Zoom image within container on hover


#1

Hey community, how’s it going?

I’m trying to create a product gallery on the page I’m working on (http://unbouncepages.com/solitaire-jewellery/) where each product, when you hover over them, can be zoomed in to viewed within the box that it’s contained in.
In the same way that you can see in this example demo: http://www.jacklmoore.com/zoom/

I currently have this code sitting in my Javascripts tab of Unbounce which I copied from the aforementioned page.

script
// Example:
(document).ready(function(){ (’#lp-pom-image-361’).zoom({url: ‘#lp-pom-image-361’});
});
// Using Colorbox with Zoom
(document).ready(function(){ (’#lp-pom-image-361’).zoom({
url: ‘#lp-pom-image-361’,
callback: function(){
$(this).colorbox({href: this.src});
}
});
});
/script

I’m not overly skilled or experienced in Javascript so I could be completely off the mark with this one.

I hope that this isn’t too large of a request for help,
Thank-you in advance!