html - Select different pictures in jquery/js -
i'm trying make simple photo viewer, , want know how select src of image, in order change big image (.big-t)
this html+js code part far:
$("#imagefound").click(function(e){ var bigthumb = $("#imagefound").attr("src"); alert(bigthumb); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="diaporama-thumbs" id="wabi3-slider"> <div class="thumb-preview"> <img id="big-thumb" class="big-t" src="big-image1.png" /> </div> <div class="small-thumbs"> <div class="thumbs-container"> <div class="small-pre"> <a id="findimage" href="#"><img id="imagefound" src="image1.png"/></a> </div> <div class="small-pre"> <a id="findimage" href="#"><img id="imagefound" src="image2.png"/></a> </div> </div> </div> </div>
$(".small-pre img").click(function(e){ var smallsrc = $(this).attr("src"); var bigsrc = "big-"+ smallsrc; showpicture(bigsrc); //alert(bigsrc); }); function showpicture(src){ $(".thumb-preview img").attr("src", src) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="diaporama-thumbs" id="wabi3-slider"> <div class="thumb-preview"> <img id="big-thumb" class="big-t" src="big-image1.png" /> </div> <div class="small-thumbs"> <div class="thumbs-container"> <div class="small-pre"> <a href="#"><img src="image1.png"/></a> </div> <div class="small-pre"> <a href="#"><img src="image2.png"/></a> </div> </div> </div> </di>
Comments
Post a Comment