Skip Navigation

[Resolved] thickbox syntax

This support ticket is created 5 years, 7 months ago. 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.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 5 replies, has 2 voices.

Last updated by Nigel 5 years, 6 months ago.

Assisted by: Nigel.

Author
Posts
#1263729

Hi,
I am having trouble getting lightbox to work for my images. Using DIVI child-theme

Page where this issue is happening: hidden link

I added thickbox to my childtheme functions.php using the following code:
add_action( 'wp_enqueue_scripts', 'add_thickbox' );

I have tried to add class="thickbox" to my content template but the link isn't opening the image, it opens the whole page in a lightbox. Can you please tell me the syntax I need to use for this field?

[types field='product-pics' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='crop' separator=', '][/types]

If I use the following, the image becomes clickable, but opens the whole page rather than just the image.

[types field='product-pics' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='crop' separator=', '][/types]

#1264033

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Jane

I'm not particularly familiar with using thickbox, but looking at the code you are using, it seems like you are adding thickbox wrongly, you need to run the add_thickbox() function, you don't enqueue it. Then the question becomes where you run the function.

The official docs describe how to use it: https://codex.wordpress.org/Javascript_Reference/ThickBox

Here's the first tutorial I found when googling which gives a better description of adding thickbox: https://codex.wordpress.org/Javascript_Reference/ThickBox

Take a look at those and let me know if you are still stuck with the syntax and I'll take a closer look.

#1264055

I followed the instructions on this post.

https://toolset.com/forums/topic/lightbox-effect/#post-199376

#1264179

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

That's an old post, the way to enqueue thickbox doesn't match what's in the official docs.

I set up a test site locally where I added thickbox support for single posts like so:

add_action('template_redirect', 'enqueue_thickbox');
function enqueue_thickbox() {
   if ( is_single() ){
	   add_thickbox();
   }
}

I then added the following to my template for single posts that have an image custom field with slug of 'slide':

<a href="[types field='slide' output='raw' resize='proportional'][/types]" class="thickbox">
[types field='slide' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]
</a>

It worked as expected, opening a lightbox with the image when clicked.

I repeated the test on a site using Divi for templates and it also worked.

#1265159

okay.. so do I add the enqueue to functions.php?

It triggers but hangs before loading the image, so I think I need to add enqueue elsewhere...

I applied the class to the 2 product photos on this page: hidden link

#1265287

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Jane

You can add the PHP code to your functions.php file or as a snippet at Toolset > Settings > Custom Code (activate and make sure it runs on the front end).

I'm not sure what "" means.

When I visit the link I can see that the links for the images are malformed, look at the href for the link:

href="<em><u>hidden link</u></em> <em><u>hidden link</u></em>"

It includes two URLs as the link, which explains why the thickbox lightbox isn't working. (I edited the href in the browser dev tools to include just one link, and then it worked.)

So the problem lies in how you are generating the markup for the link and images.

If this is a repeating image field you need to use a wpv-for-each shortcode loop to iterate over the field values and output one link with image for each image field value.

Check the documentation for wpv-for-each: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

You will be looking to insert something like this for an image field "product-pics":

[wpv-for-each field='product-pics']
<a class="thickbox" href="[types field='product-pics' output='raw'][/types]">
[types field='product-pics' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='crop' separator=', '][/types]
</a>
[/wpv-for-each]