Docs

[PhilBeyond]

Will do… Try now.

[Joao]

Hi There,

Your Revolution Slider Link was set to open in a new window and as a JQuery link instead of a tag.

I also have linked now your lightbox selector to the native rev-btn class of revolution slider buttons and added to a Raw Element whitin Cornerstone.

Your lightbox is working now.

Please try following this link to learn how to create a gallery and how to hide the images on your home page when doing it.

https://community.theme.co/forums/topic/button-to-launch-lightbox-gallery/

Hope that helps,

Joao

[PhilBeyond]

Thanks, Joao, but it wasn’t the Rev Slider I wanted the lightbox to work on – it was the Test Button at the bottom of the page as I said in my earlier post.

My client is unsure if he wants the gallery to open in a new window or a lightbox, so I was giving him the two options, you see – new window from Rev Slider, lightbox from Test Button right at the bottom of the page underneath the Contact 7 form and Map.

Also, the lightbox you’ve set up in Rev Slider just opens up one image rather than all the images in the gallery to scroll through.

I had it working fine with the code above, then it just suddenly stopped working. Very odd.

Could you take a look at the code on the button at the very bottom, as given by one of your colleagues, and see why it’s not a clickable button, please?

Thanks!

[Joao]

Hi There,

Sorry for the confusion.

I was not able to fix the code you had, but I took a different approach. Now you have two options of lightbox gallery.

1st Option is the one where you connected the lightbox to another page. It is working on Slider Revolution and on the 3rd image button. It is not my favorite lightbox layout I prefer the second option but i left there in case you want to use it.

2nd option is at the very bottom section of your page. Note that that section has 2 rows. 1 row is invisible on every device. the other row has the button that lanches the lightbox. I also enabled a second button on your Slider in case you want to have it there, if not just go to your slider Global settings and delete whatever you don´t need.

On the first row I have placed a raw element with the code:

[image class="folio-1" src="http://mediadrum.co.uk/IOHtest/wp-content/uploads/2016/05/kitchenslide5.jpg" link="true"]

[image class="folio-1" src="http://mediadrum.co.uk/IOHtest/wp-content/uploads/2016/05/kitchenslide4.jpg" link="true"]

[image class="folio-1" src="http://mediadrum.co.uk/IOHtest/wp-content/uploads/2016/05/kitchenslide2.jpg" link="true"]

[image class="folio-1" src="http://mediadrum.co.uk/IOHtest/wp-content/uploads/2016/05/kitchenslide1.jpg" link="true"]

[image class="folio-1" src="http://mediadrum.co.uk/IOHtest/wp-content/uploads/2016/05/kitchenslide3.jpg" link="true"]

To edit this images, you need to click on the magnifying lens of the row: please see image attached. And make it visible on desktop while editing, after you can hide it again.

I Also created another raw element where I placed the lightbox selector code:

[lightbox selector=".folio-1"]

On The second row I created a a button, linked to the first image listed above: http://mediadrum.co.uk/IOHtest/wp-content/uploads/2016/05/kitchenslide5.jpg

And added the class folio-1 to the button, so it launches the lightbox.

You can edit the pictures by making the row visible then editing the replacing the urls for the desired pics. I recommend you copying the code to a text editor so it is easier to edit and than paste it again. You can add as many pictures as you want.

*** It is also worth mention that there is a chance you will need to update all this URLS once you migrate the website to the real domain.

Hope that helps and please let us know if you have any questions.

Joao

[PhilBeyond]

Thanks for your help so far, Joao!!! Excellent work – really appreciate all the support!

Definitely your second option – I want a button with ligthbox gallery and another with a link to another page with Rev Slider, which is fine.

Only issue now is with the images on the bottom button you’ve set up – they seem to appear with the ‘last’ image and we have to scroll right to see the images come in from the left which seems to be the wrong way round – I’d naturally look to scroll left and have images come in from the right. Can we make that work?

EDIT: I’ve replaced the other buttons with the lightbox enabled, and they seem to be adding duplicates of lightbox images for no apparent reason?

And – this is getting very picky, but expecting client to ask – can we reduce the space between images in the lightbox so there’s more of the second image showing, making it more obvious to scroll across? It seems to work on the button you’ve added on the Rev Slider.

And how/where do I add the thumbnails=”true” code to create thumbnails (if client needs them)?

Also – if my client wants to change the look of the button (which I’d created as an image) is there a way to use this method of lightbox and link it to a button made from an image, please??

Thanks again for all your help – I thought it would have been easier than this!!!

Cheers,

Phil.

[Lely]

Hello Phil,

Please check lightbox Test page here: http://mediadrum.co.uk/IOHtest/lightbox-test/

As you can see on my setup, on that section, I have 3 rows. The first one contains the button that will open the lightbox, and also an example if you want to use an image instead of a button. Adding the button/image element before the images on RAW element will make it scroll to left and the images are coming from right

On the second row, that’s where the images is.

On the third row, I have updated the lightbox shortcode for thumbnail option.
[lightbox selector=".folio-1" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

Hope this helps.

[PhilBeyond]

This reply has been marked as private.

[PhilBeyond]

This reply has been marked as private.

[PhilBeyond]

This reply has been marked as private.

[Joao]

Hi Phil,

I could login just fine on my end, have you fixed the issue?

Thanks

Joao

[PhilBeyond]

Yeah, Godaddy’s database server had gone down and took a few phone calls and a few hours to sort. All is good!

Thanks so much Team X for sorting this. Appreciate all your help!

[PhilBeyond]

One last thing, please – if I want to create another lightbox gallery with different images, do I just create these three rows in a section, but change the class to folio-2, folio-3 etc?

Cheers!

[Lely]

Hi Phil,

You’re welcome!

Yes, just update the class that was added on the image then create another lightbox shortcode with the new class as selector. The selector for lightbox shortcode groups the images when it is opened in a lightbox.

Hope this helps.

[PhilBeyond]

This reply has been marked as private.

[Joao]

Hi Phil,

Did you install a plugin or did some changes since the last time we talked, before they weren´t layering over each other like this. Let us know more details with any information you judge useful.

Every button opens a different image because each one is connected to a different HREF.

If you installed any plugins or did any change that you believe might caused the issue let us know

If you install new plugins please turn them off and test it again

Thanks

Joao

[Author]

Posts