Skip Navigation

[Resolved] Light box for repeating Fields

This thread is resolved. Here is a description of the problem and solution.

Problem:
How can I produce a Lightbox for each Repeating Field (Image)?

Solution:
You must tell Views to produce the HTML for each field

This is done with the

[wpv-for-each]

ShortCode

Then you pass the RAW Image URL (link false) to the

a href

, and use whatever as your placeholder (usually the Thumbnail)

See the below example.

  <div id="img-gallery">
    [wpv-for-each field="wpcf-images"]
      <a class="thickbox" rel="gallery" href='[types field="images" raw="true" link="false"][/types]'>[types field="images" link="false" size="thumbnail"][/types]</a>
    [/wpv-for-each]
  </div>

Relevant Documentation:
https://toolset.com/documentation/user-guides/repeating-fields/
https://toolset.com/documentation/views-shortcodes/#wpv-for-each

This support ticket is created 7 years, 10 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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 4 replies, has 3 voices.

Last updated by Charles 7 years, 10 months ago.

Assisted by: Beda.

Author
Posts
#402390

Hello Support,
I installed the Real Estate reference site and want to open a larger version the "property-gallery" photos in the WP included Thickbox. So far I added the code to enable thickbox to my themes funcions.php file.

I tried all sort of different ways to add a link with class="thickbox" to the following code that shows the normal "property-gallery" images but the code puts a link to all images not just one image.

So my question: How to I get the following code to include a link to the image with class='thickbox' ???

[wpv-conditional if="( $(wpcf-property-gallery) ne '' )"]
<div class="text-center property-gallery">
 [types field="property-gallery" width="300" height="200" align="none" resize="crop" separator=" "][/types]</div>
[/wpv-conditional]

I tried

[wpv-conditional if="( $(wpcf-property-gallery) ne '' )"]
<div class="text-center property-gallery">
<a href="[types field='property-gallery' raw='true']" class="thickbox">[types field="property-gallery" width="300" height="200" align="none" resize="crop" separator=" "]</a></div>
[/wpv-conditional]

the link around each image contains the URLs of ALL images like this

<em><u>hidden link</u></em>

while it should only be ONE image per link.

The site is on my lokal installation but because it is a new installation of your Real Estate Reference site I believe you know what I am talking about.

Thanks for your help,
Gregor

#402498

You must tell Views to produce the HTML for each field (if it's repetitive)

This is done with the [wpv-for-each] ShortCode
Then you pass the RAW Image URL (link false) to the "a href", and use whatever as your placeholder (usually the Thumbnail)

See the below example.

[wpv-conditional if="( $(wpcf-images) ne '' )"]
  <div id="img-gallery">
    [wpv-for-each field="wpcf-images"]
      <a class="thickbox" rel="gallery" href='[types field="images" raw="true" link="false"][/types]'>[types field="images" link="false" size="thumbnail"][/types]</a>
    [/wpv-for-each]
  </div>
[/wpv-conditional]

Does it help?

#402501

Thanks a lot Beda!

Yes it helped!!

#599135

Hi Beda,

This is fantastic. The image pops open when clicked but the only way to close and return to the page is to use the browser back button. How to close it with another click?

#600051

I found the solution in https://toolset.com/forums/topic/image-gallery-in-prettyphoto-lightbox/.

I need to first enable ThickBox in the Theme's function.php:
add_action( 'wp_enqueue_scripts', 'add_thickbox' );

Thanks!

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