Make Image Popup to Bigger Size in Pangolin 122

MikeR · 2017-07-22 04:18:08

I would like to have some images on a product page, popup to bigger size just by clicking on them.
I don't want a button or text.
You must have to hyperlink the small images to the larger images. What is way to go about this?

Thanks

MikeR

rod barbee · 2017-07-22 05:47:33

One thing you could try is adding the Fancybox popup code to the image tag and then include the image(s) in popup boxes.

The base code for a popup button is this:

<button data-fancybox data-src="#popup">Button</button>

The first thing I'd try is something like this:

<img data-fancybox data-src="#popup" src="url-to-smaller-image" class="product-small-image"/>

(You could also add a custom class to this to style the image with borders, padding, box-shadows, etc.)

For the popup box, give the div the id of "popup" and place the larger image in it. I'd also add a class to it for styling the image.

If you have more than one image, give each popup box a unique ID and use the same ID in the data-src= parameter of the corresponding small image.

More on popup boxes here: http://ttg-tips-and-tricks.barbeephoto. … pup-boxes/

Daniel Leu · 2017-07-22 07:28:53

There are different ways to do this. Just to have a popup when clicking on a thumbnail is as simple as this:

<a href="photo.jpg" data-fancybox>
    <img src="thumb.jpg" />
</a>

But it you would like to add some additional text, you have to use the format Rod already showed:

<a data-fancybox data-src="#item1" href="javascript:;"><img  src="thumb.jpg"/></a>

<div id="item1" style="display:none;">Some text  <img src="photo.jpg"/></div>

If you have several thumbnails on your page, the code might become a bit ugly. That's one of the reasons I like the inline format:

<a data-fancybox data-options='{"src" : "Lorem ipsum ... <img src=\"photo.jpg\"/></p> ", "type" : "html"}' href="javascript:;">
   <img  src="thumb.jpg"/>
</a>

Keep an eye on the escaped quotes (\").

rod barbee · 2017-07-22 23:37:16

Here's a quick and dirty sample page:
http://pangolin.barbeephoto.com/product-page/

MikeR · 2017-07-22 23:54:48

Thanks for your info

In the end I have gone what's below, so that the small image on the product page, is hyperlinked direct to the large image in the gallery it is from

Thanks for your help MikeR

Community @ The Turning Gate

#1 2017-07-22 04:18:08

Make Image Popup to Bigger Size in Pangolin 122

#2 2017-07-22 05:47:33

Re: Make Image Popup to Bigger Size in Pangolin 122

#3 2017-07-22 07:28:53

Re: Make Image Popup to Bigger Size in Pangolin 122

#4 2017-07-22 23:37:16

Re: Make Image Popup to Bigger Size in Pangolin 122

#5 2017-07-22 23:54:48

Re: Make Image Popup to Bigger Size in Pangolin 122

Board footer