Identify this type of image gallery?

Highlighted
New Member
19 0 0

Pardon my ignorance, but I cannot figure out what kind of image gallery this is...

http://www.bestmadeco.com/collections/frontpage/products/hudson-bay-axe-black-donald

It's nothing too special, but I couldn't find a free shopify theme that had a similar image gallery. I'm not too savvy with java, and so I was hoping to duplicate code from a shopify theme. At this point, I would like to just know if this is a particular java script I can download (similar to one of the many lightbox scripts).

To clarify, I would like an image gallery on my product page where the primary image is large, and when a thumbnail is clicked, it is enlarged in the main photo area, as opposed to popping up with a lightbox. If it's just as easily done with CSS, that would be fine with me too, although I suspect it isn't very easy to do that, if possible at all.

Any help pointing me in the right direction would be much appreciated!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

It uses no plugin. It's very simple to achieve such behavior. You can find the code for it around lines no 225 on that page if you look at the source.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

By the way, the designer who worked on this — whoever he is — my hat off to him or her. Whoever you are, stranger, you know what you're doing, you are in the right profession. Your code and your design are equally gorgeous. 

0 Likes
Highlighted
New Member
19 0 0

I see it now... I was thinking it would be calling a script in a separate java script file, which is how most of the lightbox scripts I've looked at work. I think I should be able to replicate it now that you pointed that out.

I agree. The design of their site as well as their products are pretty awesome (and priced accordingly).

0 Likes
Highlighted
Shopify Expert
4265 32 434

I hacked a little site recently too, http://www.polkadotwhat.com/ that has a similar use. 

You pick your variants with image swatch clicks on the left swatchs, that then loads new thumbs in the right image thumb swatchs to match the main big image, which changes when you click the thumbs. And it fancyboxes for kicks, not sure why... and you can see the cart and checkout from there too.. a one page wonder...

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
0 Likes
Highlighted
New Member
19 0 0

It took me a little while to get it to work (didn't realize I didn't have jquery declared), but now it's working great. Maybe someday I'll actually understand this java stuff instead of just getting by.

Thanks again for the help.

0 Likes
Highlighted
New Member
19 0 0

I did notice on Best Made's site, that if you click on an image, and then another one, without waiting a few seconds (6), it stalls and there is a delay for the change (6 seconds if I immediately click on another image).

 

So far this only happens to me in chrome, not safari, so there must just be something weird going on with my browser or extensions.

0 Likes
Highlighted
New Member
8 0 0

Hello,

could you pls provide the Code and point me to where to pate it?

tks so much!

 www.diamondveneer.com 

 

0 Likes