How to get a lightbox effect

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem: I would like to show a grid of featured images that trigger a lightbox-style overlay when you click one.

Solution:
Use the lightbox2 plugin and encode your image grid links as documented:

<a href="[wpv-post-featured-image output='url' size='full']" data-lightbox="gallery" showImageNumberLabel="false" alwaysShowNavOnTouchDevices="true" data-title="[wpv-post-featured-image output='caption']">[wpv-post-featured-image output='img' size="custom" width="300" height="300" crop="true"]</a>

Relevant Documentation: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

This support ticket is created vor 6 Jahre, 10 Monate. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

Tags: Views plugin

This topic contains 6 Antworten, has 3 Stimmen.

Last updated by russellH-3 vor 6 Jahre, 10 Monate.

Assisted by: Shane.

Author

Artikel

Juni 5, 2017 at 4:10 pm #532925

russellH-3

I am trying to: Get my featured images grid to appear like a lightbox overlay when you click on one of them.

I visited this URL: hidden link (look at the image grid on the bottom half under the 'Illustration' headline)

I expected to see: An lightbox overlay effect similar to the image grid on the bottom half of this page: hidden link. See attached screengrab too.

Instead, I got: I just don't now how to enact this into my View for the image grid.

I'm designing a client's site to be responsive. I need to integrate the lightbox function so that when you click on an image in the grid, an overlay appears where you see the full image and maybe a caption.

I created the grid in Toolset Views, so I probably just need to figure out what lightbox plugin to install and how to integrate that into the view. Any suggestions?

Thanks in advance.

Kind regards, Russell

Juni 5, 2017 at 4:39 pm #532939

Christian Cox

It really depends on which plugin you choose. Most of them work by wrapping your featured image thumbnail in a link, which defines the URL of the large image. When you click the link, this URL is used to load the larger image in an overlay. The structure of the link depends on the plugin you choose to show the lightbox overlay.

Lightbox2 is a fairly well-known and well-liked one:
hidden link

To integrate this plugin you must download the source files, upload them to your site, then include them in the <head> of your document by enqueueing them in your theme's functions.php file. Then you can use the [wpv-post-featured-image] shortcode to generate the correct URLs for each link in your Content Template or View Loop Output editor. The href attribute will include the full-size image link, and the link content will be the thumbnail (or your own custom-defined) size:

<a href="[wpv-post-featured-image output='url' size='full']" data-lightbox="gallery">[wpv-post-featured-image output='img']</a>

More information about this shortcode here: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

If you need help integrating the featured image shortcodes, please let me know and I can offer some additional advice.

Juni 7, 2017 at 10:35 am #533690

russellH-3

Hi Christian:

Thanks for your quick reply. I think I mostly got it working now — hooray! Just a one more thing I hope to resolve: how do I add the image caption which is entered in the Media Library for the image? I followed the your shortcode reference instructions and changed my loop code (in my View Template) to this:

<a href="[wpv-post-featured-image output='url caption' size='full']" data-lightbox="gallery" showImageNumberLabel="false" alwaysShowNavOnTouchDevices="true">[wpv-post-featured-image output='img' size="custom" width="300" height="300" crop="true"]</a>

I don't know if that

output='url caption'

is correct. I double-checked and my images have text in the Caption field in the Media Library.

Any ideas?

Cheers, R

Juni 7, 2017 at 2:23 pm #533823

Shane

Supporter

Languages: Englisch (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Russell,

As Christian is currently on Vacation i'll be handling this ticket 🙂

Taking a look at your last reply you can only have 1 output per shortcode. So you're not able to do it like this output='url caption' instead you should have it like this output='caption'

Please let me know if this helps.

Thanks,
Shane

Juni 9, 2017 at 1:19 pm #534736

russellH-3

Hey Shane:

Thanks but the suggestion of having output='caption' breaks the lightbox so that the image doesn't appear when you click on it — it's just a white box which appears.

Is there no way of having both the image and the caption below it?

Kind regards, Russell

Juni 9, 2017 at 6:41 pm #534854

Shane

Supporter

Languages: Englisch (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Russell,

Not sure if this is possible based on how the lightbox is being provided with the information. Does this lightbox support or have a way to display captions ?

Thanks,
Shane

Juni 10, 2017 at 11:19 am #534981

russellH-3

Hey Shane:

Yes, the lightbox does support captions. Their instructions say to add the attribute 'data-title' to the <a> tag. This is their example:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

So I just figured out how to blend their instructions with yours: I need to use the featured image shortcode twice. So for the record, this is how I solved it:

<a href="[wpv-post-featured-image output='url' size='full']" data-lightbox="gallery" showImageNumberLabel="false" alwaysShowNavOnTouchDevices="true" data-title="[wpv-post-featured-image output='caption']">[wpv-post-featured-image output='img' size="custom" width="300" height="300" crop="true"]</a>

Thanks for your help!

Cheers, R

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.