Skip Navigation

[Closed] How set click image to enlarge image

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.

This topic contains 5 replies, has 4 voices.

Last updated by Anthony 9 years, 1 month ago.

Assigned support staff: bruce.

Author
Posts
#10304

Hi. I have v1.0 and know that somehow I can make the images clickable to show in a zoom lightbox.

I don't fully understand the instruction from your Types Field API page, ‘url’ => ‘true’|'false’ (output the URL only, without the entire image tag). Can you please give me an example. Below is my HTML code snippet for my view, which does display a small 200px thumbnail of the correct images. How do I alter that to also be able to show an enlarged version, perhaps 800px wide, of those same images?

<div style=P "width: 810px">[types field="additional-image-1" width="200px" proportional="true"][/types] [types field="additional-image-2" width="200px" proportional="true"][/types] [types field="additional-image-3" width="200px" proportional="true"][/types] [types field="additional-image-4" width="200px" proportional="true"][/types]</div>

thanks, Alan

#10310

bruce
Supporter

Languages: English (English )

Timezone: Australia/Perth (GMT+08:00)

Hi Alan,

I'm not sure how to do it with zoom lightbox.

You can use the url="true" in the href attribute. This is how you could create a link to an image of a different size:
<a href="[types field="additional-image-1" width="800px" proportional="true" url="true"][/types]">[types field="additional-image-1" width="200px" proportional="true"][/types]</a>

Best regards,
Bruce.

#10664

On the lightbox, I'm using a plugin WPImageFlow 2, although any other lightbox gallery will do. In a regular WP post I would simply insert this shortcode to enable the lightbox: [wp-imageflow2 dir=subfolder]. Is there a way to work that into the HTML code that I'm using for my View layout so that it will open in the lightbox view? Or if not, can I do something to modify View's showing of the image to use a white background instead and also have a link back to the main page? Here is the HTML code for the View:

<div style=P "width: 810px">
<a href="[types field="additional-image-1" width="900px" proportional="true" url="true"][/types]">[types field="additional-image-1" width="200px" proportional="true"][/types]
<a href="[types field="additional-image-2" width="900px" proportional="true" url="true"][/types]">[types field="additional-image-2" width="200px" proportional="true"][/types]
<a href="[types field="additional-image-3" width="900px" proportional="true" url="true"][/types]">[types field="additional-image-3" width="200px" proportional="true"][/types]
<a href="[types field="additional-image-4" width="900px" proportional="true" url="true"][/types]">[types field="additional-image-4" width="200px" proportional="true"][/types]
</div>

Many thanks, Alan

#10682

Dear Alan,

I normally use thickbox that is included in wordpress. Add this line to your functions.php:

add_thickbox();

And add the thickbox class to the link:

<a href="[types field="photo" width="800px" proportional="true" url="true"][/types]" class="thickbox">[types field="photo" width="200px" proportional="true" align="right"][/types]</a>

Please let me know if there is anything else that I can assist you with.

Regards.
Caridad

#10702

That's a beautiful thing! So easy. Just what I wanted. You might consider adding this to your core because it's a much nicer effect.

Thanks for your help.

Best wishes,

Alan

#16543

I'm having a problem with the url with the above code. Here is what I put into my view template:

<a href='[types field="images" width="500px" proportional="true" url="true"][/types]' class="thickbox">[types field="images" width="50px" proportional="true" align="left"][/types]</a>

The result is a link that looks like this :

hidden link

Any help would be greatly appreciated.

The topic ‘[Closed] How set click image to enlarge image’ is closed to new replies.