javascript - css image gallery with inner zoom -


I have a working interior-zoomable image using the code given below and I can zoom it out with a Imagine the image element selected in the image gallery, but the method of starting can not be understood. Would I wish to transfer the image to the second hyperlink ("img_02" src = ") below for the source. Any light can any shade please?

  & lt ; Html> gt; head & gt; script src = "../jquery-1.8.3.min.js"> gt; & lt; / script & gt; & lt; script src = "../ Jquery.elevatezoom.js "& gt; & lt; / script & gt; & lt; / head> gt; body & gt; & lt; img id =" zoom_01 "src =" ../images / package .jpg "data-zoom-image =" ../ images / package_big.jpg "> gt; & lt; img id =" zoom_01 "src =" ../ images / package.jpg "data-zoom-image =" ../ images / package_big.jpg "& gt; & lt; Div id = "zoom_01" & lt; a href = "#" data-image = "..// image / package.jpg" data-zoom-image = "../images/ package_big.jpg" & Gt; & lt; img id = "img_01" src = "../ Images / Package_thumb.jpg" />  & lt; a href = "#" Data-Image = ". ./images/Coffee.jpg "data-zoom-image =" ../images/coffee_big.jpg "& gt; & lt; img id =" img_02 "src =" ../ images / coffee_thumb.jpg "/ & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt ;! - Start the plugin and pass IDs - Gallery images with division - & gt; & Lt; Script & gt; ; $ ('# zoom_01'). Elevate zoom ({zoomType: "inner", cursor: "crosshairs",}); & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

1) ID should never be used once in html html "zoom_01 "Is used only on first image 3 times.

2) You must use this code to create a gallery:

  $ ("# zoom_01") .elevate zoom ({Gallery: 'Gallery', cursor : 'Pointer', Gallery Active Class: 'Active', RoofRosofed: True, Loading icon: 'http://www.elevateweb.co.uk/spinner.gif'});   

This is the default HTML:

  & lt; Img id = "zoom_01" src = "../ images / package.jpg" data zoom -image = "../ images / package_big.jpg" & gt; & Lt; Div id = "gallery" & gt; & Lt; A href = "../ images / package_big.jpg" data-image = "../p / package.jpg" data-zoom-image = "../images/ package_big.jpg" gt; & Lt; Img id = "img_01" src = "../ images / package_thumb.jpg" /> & Lt; / A & gt; & Lt; A href = "../ images / coffee_big.jpg" data-image = "../images/coffee.jpg" data-zoom-image = "../ images / coffee_big.jpg" & gt; & Lt; Img id = "img_02" src = "../ images / coffee_thumb.jpg" /> & Lt; / A & gt; & Lt; / Div & gt;   

And yes the demo site HTML code is incorrect :) ~ I will send them a mail.

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -