Integrating an image gallery plugin with an image zoom in function plugin

Question

I know this site works on a points system, so i'll like to stress i'm a developer just starting out and i'm new to this site. Please be nice!!!

I have a slight problem with developing what i'm trying to achieve, i believe this maybe, predominately a HTML issue. I have downloaded two plugin's one being an image zoom function and the other is an image gallery with thumbnails.

The challenge i'm facing is integrating the two functions together, as both functions require an i can't find a "clean" way to merge these two pieces of script together. Is there anyone out there that knows how i can merge these two script together?

Image zoom HTML

        <a class="zoom" href="css/product-gallery/item1.jpg"><img class="product-gallery" src="css/product-gallery/item1.jpg" alt="img1"></a>

Image gallery with Thumbnails HTML

<a class="thumb" href="css/product-gallery/item1.jpg" title="Title #0"><img src="css/thumbnails/thumb2.jpg"/></a>

Click here for Image zoom code

PS "It's not a lightbox effect i'm after, it's more an eCom image zoom function i'm after"

Answer 1

Having them both (lightbox zoom + on hover zoom) doesn't really make much sense, you should choose one and go with it. Lightbox is very easy to use and will do exactly what you want so i'd go with that. Quick little example: -

<script type="text/javascript">
$(function() {
    $('#imageGallery a').lightBox();
});
</script>

<div id="imageGallery">
   <a href="image-you-want-to-zoom"><img src="thumbnail-image" /></a>
</div>

If a 'lightbox-like' function is not what you're after, then try something like this:

http://www.jacklmoore.com/zoom

And for some quick mock-up code of it in action:

http://jsfiddle.net/jquerybyexample/cvjsN/