[Resolved] Fancybox is not working

[Author]

Posts

[lawrenceK]

I am trying to have product images open in a lightbox in a content template without success. Here is a link to the page: hidden link

I am using the following code:

{!{wpv-for-each field="wpcf-product-images" class="fancybox"}!}
{!{types field='product-images' alt='%%ALT%%' title='%%TITLE%%' width='150' class="fancybox" height='150' align='none' resize='crop' separator=', '}!}{!{/types}!}
{!{/wpv-for-each}!}

According to the plugin author I need to "[...] ask the Toolset support how to modify that code to make it include a link to each full size image version."

Can you please assist?

[Luo Yang]

Hello,

For the question:
how to modify that code to make it include a link to each full size image version.

You can get the full size of custom image field by using size="full" attribute in Types shortcode, for example:

{!{types field="product-images"  size="full"}!}{!{/types}!}

More help:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
size: custom image size

[lawrenceK]

This has no effect.

Let me be clear: I am displaying thumbnail images on this page. When a user clicks on an image, it should open the full-size in a lightbox.

Here is my code:
{!{wpv-for-each field="wpcf-product-images" class="fancybox"}!}
{!{types field='product-images' alt='%%ALT%%' title='%%TITLE%%' width='150' class=" fancybox"="" height="150" align="none" resize="crop" separator=", " size="full"}!}{!{/types}!}
{!{/wpv-for-each}!}

[Luo Yang]

I have checked the URL you mentioned above, it seems you just need the URL(without HTML image tags) of full size image, and setup the URL in HTML link.

If it is, you can get the image URL with attribute url="true", for example:

{!{types field="product-images"  size="full" url="true"}!}{!{/types}!}

See the document I mentioned above:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
url:
'false'(default) | 'true'
true=output the url of the image instead of the html img tag.

And use it to setup the HTML link, like this:

{!{wpv-for-each field="wpcf-product-images"}!}
<a href="{!{types field="product-images"  size="full" url="true"}!}{!{/types}!}" class="fancybox">
{!{types field='product-images' alt='%%ALT%%' title='%%TITLE%%' width='150' class="fancybox" height='150' align='none' resize='crop' separator=', '}!}{!{/types}!}
</a>
{!{/wpv-for-each}!}

[lawrenceK]

My issue is resolved now. Thank you for your help, Luo Yang. The example you gave will allow me to apply what you have taught me to other scenarios.