Written by Sai Sandeep Thota on February 21, 2015 in JavaScript > Programming

Change Image Source using jQuery

GET ALERTS:

Get our Latest updates delivered to your mailbox!

After longtime I am writing a post, hoping to get back to writing posts regularly. So today I am going to write an article about Changing Image Source Tag when Clicked using jQuery. The concept is when we click on an thumbnail of an image, it gets displayed in the preview frame.

Here we will be using img tag, whenever an img tag click event is triggered, we get the ID of the img tag which is clicked and change the src attribute of preview frame image. For instance, if we click on image with ID 1, preview frame gets replaced with 1.jpg (IMAGE_ID.jpg) .

Demo Download Source Code

Change Image Source using jQuery

File: index.html

<html>
<body>

<div id="imgpreview">
	<img src="http://placehold.it/550x350" id="preview">
</div>

<div id="thumbnails">
<table border="0">
	<tr>
		<td><img id="1" src="1.jpg"></td>
		<td><img id="2" src="2.jpg"></td>
		<td><img id="3" src="3.jpg"></td>
		<td><img id="4" src="4.jpg"></td>
		<td><img id="5" src="5.jpg"></td>
	</tr>
</table>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
    $(function(){
    	$('img').click(function(e){
    		var imgid = e.target.id;
    		$('#preview').fadeOut(10);
    		$('#preview').attr('src', imgid+'.jpg');
    		$('#preview').fadeIn(400);
    	});
    });
</script>
</body>
</html>

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: