How To Change Img Src With A Transition By Clicking Another Image
So I'm on a project which requires me to use table, and forbids me to use any div tag. I want to make a slider in one row of my table. I want the image to change with a click on ot
Solution 1:
You can change that images dynamically using JQuery I have added the classes to the images so that I can access them using class Main Image: added class "fullimage" small Images: added class "changeimage"
$('.changeimage').click(function(){
//getting the current clicked image source
var clickedItemImage=$(this).attr('src');
//setting the src of your main image
$(".fullimage").attr('src',clickedItemImage);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<table border="0" width="100%" height="10px" cellspacing="0">
<tr>
<td colspan="4" >
<img id="imgblockjs" class="fullimage" src="../img/singa.jpg" width="100%" height="300px" />
</td>
</tr>
<tr>
<td colspan="4" id="imgchanger">
<a href="#"><img class="changeimage" src="../img/singa.jpg" id="imgthumb"></a>
<a href="#"><img class="changeimage" src="../img/gajah.jpg" id="imgthumb"></a>
</td>
</tr>
</table>
I hope it helps :)
Solution 2:
$("img").on("click", function(){
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",this.src);
}.bind(this)).fadeIn(1000);
});
If an image is clicked, change the #imgblockjs.src to this images src...
Post a Comment for "How To Change Img Src With A Transition By Clicking Another Image"