jquery - Zoom Effect Only Zooms Original Image Not New Image From Thumbnail -

-

info
have grid of div's. each div opens modal. each modal has simple thumbnail gallery (click thumbnail, main image replaced).

problem
zoom working original main image. doesn't realize there new main image after clicking thumbnail continues zoom original image.

fiddle
http://jsfiddle.net/zuhloobie/bcuh489d/2/

question
how alter code zooms new main image chosen thumbnail?

html
<div class="container"> <div class="image wow rotatein" data-wow-delay=".3s" data-wow-duration=".3s"> <div id="gallery" class="zoom"> <div class="content"> <img src="http://dummyimage.com/900x900/000/fff" class="image_1"> <img src="http://dummyimage.com/900x900/f00/fff" class="image_2" style="display:none"> </div> </div> </div> <div class="body wow fadeindown" data-wow-delay=".5s" data-wow-duration=".3s"> <div class="thumbnail"> <div class="thumb view2"> <a href="#" rel="2"> <img src="http://dummyimage.com/900x900/f00/fff" id="thumb_2" class="fit"> </a> </div> <div class="thumb view2"> <a href="#" rel="1"> <img src="http://dummyimage.com/900x900/000/fff" id="thumb_1" class="fit"> </a> </div> </div> </div> </div> </div>
jquery
$('#gallery').simplegallery({ galltime : 400, // transition delay gallcontent: '.content', gallthumbnail: '.thumbnail', gallthumb: '.thumb' }); $('.zoom').zoom({ on:'grab' });
plugins used
[1] http://www.jacklmoore.com/zoom/
[2] http://www.jqueryscript.net/gallery/minimalist-jquery-image-gallery-with-thumbnails.html

in advance!

the problem have simplegallery not aware of zoom plugin using.

the zoom plugin creates new element first image finds based on element supply.

in order make zoom plugin change image zooming need make sure image updated 1 clicked.

add code after initialize zoom plugin:

$('.thumb img').click(function() {     $('.zoomimg').attr('src', $(this).attr('src')); });

it should solve problem.


Comments

Post a Comment

Popular posts from this blog

java - HTTP Status 500 - An exception occurred processing JSP page /second.jsp at line 15 -

-
this question has answer here: what nullpointerexception, , how fix it? 12 answers i have 4 pages on jsp web project student showing details db.. have used tomcat web server. index.html <body> <h1> student search page</h1> <form action="second.jsp"> <h2> enter id search details</h2> <input type=text name=id1 /> <br/> <input type=submit value=search /> </form> </body> second.jsp <body> <% string id =(request.getparameter("id1")); studentdao std=new studentdao(); student s=std.searchinfo("id"); %> <h1> <%=s.showstudent()%></h1> </body> student.java import java.io.*; public class student implements serializable { string name; string id1,phone,clas; ...
Read more

php - Using str_replace to translate a MySQL Table in html -

-
i have website contains pricelist of cs:go items. now, how did this: mysql db w/ prices --> select db x ( item name ) --> echo table ( works fine ) now want translation of item names. how planned it: mysql db --> $result= ( signature character ) --> $translate = str_replace (signature character $result) however, there's issue code or str_replace think. $translate returns $result no filtering. <?php require 'lang.php'; $servername = "localhost"; $username = ""; $dbname = ""; $password = ""; // create connection $conn = new mysqli($servername, $username, $password, $dbname); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } // filter name $sql = "select name, price utf name 'k%'"; $result = $conn->query($sql); // translate $tr = str_replace('k','karambit','$result'); // ech...
Read more

SQL Server - MyCTE query based on 24 hour period (next day) -

-
i have bit of code: ;with mycte ( select *, row_number() over(partition carduser order cardtableid) newvariation cardchecker ) update mycte set status = newvariation which updates status column, want happen on 24 hour period, status starts again next day @ 1, , counts again based on carduser specified above: current data , happens: 2 aaa 1 2015-06-25 08:00:00.000 123 1 null 3 ccc 1 2015-06-25 00:00:00.000 124 1 null 4 aaa 1 2015-06-25 17:30:00.000 125 2 null 5 aaa 1 2015-06-26 17:30:00.000 125 *3* null what want happen: 2 aaa 1 2015-06-25 08:00:00.000 123 1 null 3 ccc 1 2015-06-25 00:00:00.000 124 1 null 4 aaa 1 2015-06-25 17:30:00.000 125 2 null 5 aaa 1 2015-06-26 17:30:00.000 125 *1* null im not quite sure how add above query possible point me in right direction? the main problem eventtime field contains both date , time, adding partition means status 1 based on time parameter of field thanks ...
Read more