Promo image clicks to larger image in lightbox

[kirk74]

Hi I am using PROMO to display artists photos with their bios beneath. I want to be able to click on the image and have it open the larger version in a lightbox. I understand how to override the ALT field and make it a link … so it doesn’t seem to be a big extra step to have a line of code for this link that instructs to “display this image in lightbox”

This is what I tried:

I used the method described here to make the ALT tag a link: https://theme.co/apex/forum/t/how-to-add-a-link-to-a-promo-image-in-a-classic-promo/20534/2 and added this shortcode to the ALT/LINK field hoping this would work but it didn’t:

[lightbox selector=".my-image" deeplink=“true” opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal” thumbnails=“true”]

I feel like this should be quite doable as these two things I am trying to do both wok, I just need help getting them to work together!

Thx so much.

[jade]

Hi @kirk74,

An alternative that you can take is to just use the image that is assigned to the promo element and when the image is clicked, the assigned image will open to a lightbox. That way, you do not have to manually assign the image path to the alt field of the promo element.

To do this, assign a class to the promo elements then add this code to the Global JS:

(function($){
  
    $('.x-promo.promo-lightbox').each(function() {
      var theImg = $(this).find('img');
      var theLink = theImg.attr('src'); 
      
      $(this).wrap("<a class='image-lightbox' href='" +theLink +"'></a>");
  });

})(jQuery);

The code above assumes that the class you have added to the promo elements is promo-lightbox.

Once you have added the code, add this lightbox shortcode in a Raw Content element:

[lightbox selector=".image-lightbox"]

Notice that the class image-lightbox is assigned to the shortcode and that is also included in the JS code previously added : $(this).wrap("<a class='image-lightbox' href='" +theLink +"'></a>");

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[kirk74]

Thanks so much, yes this works great … but the only issue is that this has also made the text under the picture in the PROMO a link as well … can’t have this because there are specific links within the text part of the promo (some words are links and I also have social media icons in each promo box that are links)

So the code you provided is perfect except I just need it to target the image only not the whole promo box.

Will provide link to the page privately. You will see I have applied this to the first two bios at the top of the page, and all the text is green and acting as the trigger for the lightbox, and the social media links are ignored because instead, these are opening lightbox.

Thx so much.

[rad]

Hi @kirk74,

I see, please change that code to this

(function($){
  
    $('.x-promo.promo-lightbox').each(function() {
      var theImg = $(this).find('img');
      var theLink = theImg.attr('src'); 
      
      $(this).find('.x-promo-image-wrap ').wrap("<a class='image-lightbox' href='" +theLink +"'></a>");
  });

})(jQuery);

Hope this helps.

[kirk74]

Perfecto! Thank you for your brilliant support

Jut a couple more quick things:

When triggering light box this way, how can I turn on the lightbox attributes like show the thumbnails? ( I tried adding it to the shortcode in RAW CONTENT but thumbnail part is ignored: [lightbox selector=".image-lightbox"][lightbox thumbnails=“true”]

And how can I turn on the captions/titles for the images in the lightbox?

Thx again so much.

[Prasant]

Hello @kirk74,

Thanks for updating the thread.

Unfortunately this now getting outside the scope of support we can offer. We have tried to assist to help you get started by providing necessary guidance. Beyond this will fall outside the scope of support we can offer. I suggest you to get in touch with a developer if you are not comfortable in making the changes yourself.

How To Get Support

Thanks for understanding.

[kirk74]

No worries… for anyone else looking for this, thumbnails work I just had to have it on the one shortcode block, like this:
[lightbox selector=".image-lightbox" thumbnails=“true”]

Working on the captions now . I was able to change the script to this and get the ALT to display as a caption, but it displays it in the image BEFORE the lightbox … I am not sure how to do this same step of dynamically displaying ALT tag, but it to display n lightbox not in the initial image.

// Adds a custom caption by pulling in the ALT tag:

(function($){

$('.x-promo.promo-lightbox').each(function() {
  var theImg = $(this).find('img');
  var theLink = theImg.attr('src'); 
  var theTitle = theImg.attr('alt'); 
  
   $(this).before( "<div style='background: rgba(0,0,0,0.5); color: white;'>" + theTitle + "</div>" );  
  $(this).find('.x-promo-image-wrap ').wrap("<a class='image-lightbox' href='" +theLink +"'></a>");
  
  });

})(jQuery);

[thai]

Thanks for sharing @kirk74

[kirk74]

My pleasure.

I know you guys said you can’t help too much more with this one, but I am so close and I think it’s prob an easy tweak your end, because I just need to know how to target the lightbox with JQuery … is someone there able to let me know this please?

Because if you see my screenshot script works perfectly to add ALT tag as a caption to the promo image BEFORE it gets clicked on… all that needs to be changed is the path to output to go to the image inside lightbox rather than the image before bing clicked.

Screenshot

Thx so much for reading this.

[lely]

Hi @kirk74,

Please check this article. See how lightbox_caption is added as an option for the image. To access that on jquery, try to use that simple setup and then check the structure when you open the lightbox. Inspect the sample and you can see an added option like this on the link:

 data-caption

Please do understand that as explained this is beyond the scope of our support. Thank you.