- Posts: 72
COMMUNITY FORUM
- Forum
- K2 Community Forum
- English K2 Community
- Implementing new responsive lightbox for K2 item Images
Implementing new responsive lightbox for K2 item Images
- quebecguitare
- Topic Author
- Offline
- Senior Member
Less
More
8 years 10 months ago #145324
by quebecguitare
Thank you for your time!
Implementing new responsive lightbox for K2 item Images was created by quebecguitare
Hello, I would like to implement this lightbox to K2 Item Images.
dimsemenov.com/plugins/magnific-popup/documentation.html
I already have it implement on my site for a form link.
Is there anyway that I can have an implementation that will not get crushed on the next build update?
Could you help me out?
Thank you
Regards
dimsemenov.com/plugins/magnific-popup/documentation.html
I already have it implement on my site for a form link.
Is there anyway that I can have an implementation that will not get crushed on the next build update?
Could you help me out?
Thank you
Regards
Thank you for your time!
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 10 months ago #145342
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Implementing new responsive lightbox for K2 item Images
After you have downloaded the lightbox's files you need to do the following.
Paste the css file in your template's stylesheet.
Paste the js file in your template's js file or include it (docs.joomla.org/JDocument/addScript) at the end of your scripts queue.
Then:
Paste this code in your item.php override. Preferably inside the image's block.
Then locate and change:
to:
In order to override or locate the item.php file read this post:
www.joomlaworks.net/blog/item/194-k2-inheritance-sub-templating
Paste the css file in your template's stylesheet.
Paste the js file in your template's js file or include it (docs.joomla.org/JDocument/addScript) at the end of your scripts queue.
Then:
Paste this code in your item.php override. Preferably inside the image's block.
<?php $doc =& JFactory::getDocument(); ?>
<?php
$modal .= "jQuery(document).ready(function(){";
$modal .= " jQuery('.popupmodal').magnificPopup({type:'image'})";
$modal .= "});";
$doc->addScriptDeclaration( $modal );
?>
Then locate and change:
<a class="itemImage modal" rel="{handler: 'image'}"...
to:
<a class="itemImage popupmodal"...
In order to override or locate the item.php file read this post:
www.joomlaworks.net/blog/item/194-k2-inheritance-sub-templating
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- quebecguitare
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
8 years 10 months ago #145363
by quebecguitare
Thank you for your time!
Replied by quebecguitare on topic Implementing new responsive lightbox for K2 item Images
Thank you very much!
Regards
Regards
Thank you for your time!
Please Log in or Create an account to join the conversation.
- quebecguitare
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
8 years 10 months ago #145369
by quebecguitare
Thank you for your time!
Replied by quebecguitare on topic Implementing new responsive lightbox for K2 item Images
Hi Krikor, I am trying to enlarge the height of the lightbox when under @media 400px class I can't reach through CSS.
Could you give me a hand?
-http://www.quebecguitare.ca/professeurs/quebec/simon-mart
-Click on the booking link under the Item Title "Disponible pour Réservations"
-Minimize the browser under 400px.
Expected result:
The height of the lightbox should be 80%.
Thank you
Regards
Could you give me a hand?
-http://www.quebecguitare.ca/professeurs/quebec/simon-mart
-Click on the booking link under the Item Title "Disponible pour Réservations"
-Minimize the browser under 400px.
Expected result:
The height of the lightbox should be 80%.
Thank you
Regards
Thank you for your time!
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 10 months ago #145373
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Implementing new responsive lightbox for K2 item Images
The height is always set to 100%.
The actual height of the contents is proportional to the width of the image. If the height is changed then the image will be distorted.
Unfortunately this is the lightbox's default behaviour and it cannot be changed.
The actual height of the contents is proportional to the width of the image. If the height is changed then the image will be distorted.
Unfortunately this is the lightbox's default behaviour and it cannot be changed.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- quebecguitare
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
8 years 10 months ago #145374
by quebecguitare
Thank you for your time!
Replied by quebecguitare on topic Implementing new responsive lightbox for K2 item Images
This is for a form not an image. So the height can be overriden without distorting it.
Otherwise, at smaller resolution the lightbox for the form is too small.
Thank you
Regards
Otherwise, at smaller resolution the lightbox for the form is too small.
Thank you
Regards
Thank you for your time!
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 10 months ago #145382
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Implementing new responsive lightbox for K2 item Images
Oh I see,
Check the ..mfp-iframe-scaler class.
This is what gives the proportions for the iframe.
You can change the padding-top: to eg: 80% for smaller viewports.
Check the ..mfp-iframe-scaler class.
This is what gives the proportions for the iframe.
You can change the padding-top: to eg: 80% for smaller viewports.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- quebecguitare
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
8 years 10 months ago #145392
by quebecguitare
Thank you for your time!
Replied by quebecguitare on topic Implementing new responsive lightbox for K2 item Images
It worked great! Brilliant!
Have a nice weekend Krikor.
Regards
Have a nice weekend Krikor.
Regards
Thank you for your time!
Please Log in or Create an account to join the conversation.
- Krikor Boghossian
- Offline
- Platinum Member
Less
More
- Posts: 15920
8 years 9 months ago #145423
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Replied by Krikor Boghossian on topic Implementing new responsive lightbox for K2 item Images
Thanks mate :)
Always happy to help.
Always happy to help.
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
Please Log in or Create an account to join the conversation.
- quebecguitare
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 72
8 years 9 months ago - 8 years 9 months ago #145584
by quebecguitare
Thank you for your time!
Replied by quebecguitare on topic Implementing new responsive lightbox for K2 item Images
Hi Krikor,
I've got this new lightbox installed on the website for K2 item images.
I've added a link at the bottom of the K2 Image with a term substitution using no!number ReReplacer.
The problem is that I want to open the link in the modal as well:
Ref.: www.quebecguitare.ca/administrator/index.php?option=com_rereplacer&view=item&layout=edit&id=19
If "Cliquez pour prévisualiser l'image" (default lightbox text for K2 Image lightbox)
Replace with:
<a class="booknow popup-link" href="www.quebecguitare.ca/admissions"><i class="fa fa-envelope-o"></i>Disponible pour Réservations - cliquez ici pour contacter ce professeur</a>
(<, >, " become > < ")
So this works going to the link "www.quebecguitare.ca/admissions"
However I would like to open this link in the modal, just like a booking link on the K2 Item custom template.
www.quebecguitare.ca/admissions?tmpl=component
Here is the link for the K2 Item modal and this problem:
www.quebecguitare.ca/professeurs/montreal/daniel
Any clues?
Thank you
Regards
I've got this new lightbox installed on the website for K2 item images.
I've added a link at the bottom of the K2 Image with a term substitution using no!number ReReplacer.
The problem is that I want to open the link in the modal as well:
Ref.: www.quebecguitare.ca/administrator/index.php?option=com_rereplacer&view=item&layout=edit&id=19
If "Cliquez pour prévisualiser l'image" (default lightbox text for K2 Image lightbox)
Replace with:
<a class="booknow popup-link" href="www.quebecguitare.ca/admissions"><i class="fa fa-envelope-o"></i>Disponible pour Réservations - cliquez ici pour contacter ce professeur</a>
(<, >, " become > < ")
So this works going to the link "www.quebecguitare.ca/admissions"
However I would like to open this link in the modal, just like a booking link on the K2 Item custom template.
www.quebecguitare.ca/admissions?tmpl=component
Here is the link for the K2 Item modal and this problem:
www.quebecguitare.ca/professeurs/montreal/daniel
Any clues?
Thank you
Regards
Thank you for your time!
Last edit: 8 years 9 months ago by quebecguitare.
Please Log in or Create an account to join the conversation.
- Forum
- K2 Community Forum
- English K2 Community
- Implementing new responsive lightbox for K2 item Images