Lightbox inside Classic Slider?

Support
#1

I have added a classic slider element to my page. Simple slideshow of images - looks great.

I want to have it so if you click on the image, it expands the image to a full screen lightbox. I tried setting the slider slides to use the lightbox shortcode, however on first click the image loads without a lightbox. If I go back and click the image a second time, the lightbox loads but the image doesn’t appear inside it.

I’m using the Integrity framework. Is there any way to get the outcome I’m after or am I overlooking something?

Thanks!

Classic Slider - incorporating lightbox feature
#2

Hi Mike,

Can you provide us the page where you have set up your slider.

In your slider, try to link your image then add a class to your link.

For example


<a class="my-lightbox"  href="http://placehold.it/1200x600/3498db/2980b9"><img src="http://placehold.it/1200x600/3498db/2980b9" alt="Placeholder"></a>

Do the same to all slides. Then add a classic text element with your lightbox shortcode

[lightbox selector=".my-lightbox"]

Hope that helps

#3

Hi Paul,

Have done that but no longer get any lightbox - just the image.

Left a secure note with my site details.

#4

Hello Mike,

Thanks for writing in!

I checked the lightbox process shared by my colleague and on my dev setup it’s working fine. I also checked your website and from outside it seems to be fine. Please do following:

  1. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  2. Go to X > Settings and click on the Clear Style Cache button.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

#5

Hi Prasant,

I have disabled all plugins and cleared cache. I’m still getting the same result - no lightbox. Have tested this in Incognito Mode in Chrome, Private Mode in Firefox, and IE11.

Edit: Have also tried switching from my child theme to the stock X theme. Am still seeing the same thing.

Have re-enabled the Cornerstone and Under Construction plugins, and left user account details in the secure note.

Thanks.

#6

Hi Mike,

I like to check it but it’s been down, I then tested it to see if it’s just me but looks like it’s completely down.

Please let us know once it became available.

Cheers!

#7

The website is up Rad - am using Cornerstone right now and just saved changes.

Would you mind removing that image please? I haven’t shared that address publically.

#8

Hi there,

It appears that this is a bug within X/classic slider. I was able to replicate the break condition in my dev enviroment with a clean theme.

How to replicate:

  1. Create a classic slider.
  2. Add the example code @paul.r provided in the second post.
  3. Turn on the “Random” setting (and no other settings)

When you click on an image, it will load the image (as noted by the URL changing in the address bar). If you turn off “Random” and turn on any or all other settings, clicking the image will result in the lightbox loading.

I have reactivated the plugins in my prod enviroment and turned off the Random function for my slider. The lightbox now loads on clicking the image. However, I’m finding that only the third and sixth slides load in the lightboxes - the others return the background only.

I’d really appreciate some assistance on this one - it doesn’t appear to be only my enviroment.

#9

Hi Mike,

Sorry about that, I removed the image :slight_smile:

I’m able to reproduce the issue on your site but not on my installation, it’s a bit weird as it seems it won’t generate the top positioning. For workaround, please add this CSS to Theme Options > CSS

.ilightbox-holder.light {
    top: 10vw !important;
    -webkit-transition: top 0.5s;
    transition: top 0.5s;
}
.ilightbox-holder.ilightbox-next, .ilightbox-holder.ilightbox-prev {
    cursor: pointer;
    top: 13.5vw !important;
}

Thanks!

#10

Thanks @Rad. Have implemented that CSS in my child theme and the images show in the correct spot. As I don’t want the previous and next images to sit in the background of the lightbox, I changed .ilightbox-holder.ilightbox-next, .ilightbox-holder.ilightbox-prev to visibility: hidden.

Any idea of why the top positioning isn’t generating? Also, any way to have a bugfix raised for the random setting?

Thanks.

#11

Hello Mike,

The code is working for the positioning. You are using vw which will reference the width of the browser. I will recommend that you change to vh so that the top position will reference the height of the browser instead:

.ilightbox-holder.light {
    top: 10vh !important;
    -webkit-transition: top 0.5s;
    transition: top 0.5s;
}
.ilightbox-holder.ilightbox-next, .ilightbox-holder.ilightbox-prev {
    cursor: pointer;
    top: 13.5vh !important;
}

You might also use % and see if that works for you too.

Please let us know how it goes.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.