Keyword

Implementing new responsive lightbox for K2 item Images

  • quebecguitare
  • quebecguitare's Avatar Topic Author
  • Offline
  • Senior Member
More
8 years 9 months ago #145324 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

Thank you for your time!

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 9 months ago #145342 by Krikor Boghossian
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.
<?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
  • quebecguitare's Avatar Topic Author
  • Offline
  • Senior Member
More
8 years 9 months ago #145363 by quebecguitare
Thank you very much!

Regards

Thank you for your time!

Please Log in or Create an account to join the conversation.

  • quebecguitare
  • quebecguitare's Avatar Topic Author
  • Offline
  • Senior Member
More
8 years 9 months ago #145369 by quebecguitare
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

Thank you for your time!

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 9 months ago #145373 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • quebecguitare
  • quebecguitare's Avatar Topic Author
  • Offline
  • Senior Member
More
8 years 9 months ago #145374 by quebecguitare
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

Thank you for your time!

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 9 months ago #145382 by Krikor Boghossian
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.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • quebecguitare
  • quebecguitare's Avatar Topic Author
  • Offline
  • Senior Member
More
8 years 9 months ago #145392 by quebecguitare
It worked great! Brilliant!

Have a nice weekend Krikor.
Regards

Thank you for your time!

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
8 years 9 months ago #145423 by Krikor Boghossian
Replied by Krikor Boghossian on topic Implementing new responsive lightbox for K2 item Images
Thanks mate :)
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
  • quebecguitare's Avatar Topic Author
  • Offline
  • Senior Member
More
8 years 9 months ago - 8 years 9 months ago #145584 by quebecguitare
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:

&lt;a class=&quot;booknow popup-link&quot; href=&quot;www.quebecguitare.ca/admissions"><i class="fa fa-envelope-o"></i>Disponible pour Réservations - cliquez ici pour contacter ce professeur</a>

(<, >, " become &gt; &lt; &quot;)

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.


Powered by Kunena Forum