CODEWITHSUNDEEP
javascriptjqueryhtmlimage
user1782730
user1782730

Reputation: 61

Change the src of a main image by clicking on thumbnails using jQuery

Here is the challenge I am faced with:

At development time, I do not know the src of the images as they are all added via a tinyMCE text editor. Therefore, 4 images are uploaded into the editor using an image upload plugin so all that is stored in the db is some HTML e.g. 

<p>
    <img src="../image_uploads/Golf_Resize_2.jpg" alt="" /> 
    <img src="../image_uploads/Golf_Resize_3.jpg" alt="" /> 
    <img src="../image_uploads/Golf_Resize_41.jpg" alt="" /> 
    <img src="../image_uploads/Golf_Resize_5.jpg" alt="" />
</p>

What I'd like to do is firstly, change the size of each thumbnail displayed, using runtime JQuery, and then when a thumbnail is clicked, change the main image (uploaded separately) to the src of the thumbnail that was clicked.

I'm sure it can be done but haven't been able to do it yet using .attr('src'...

Help would be so appreciated. Thank you.

So to recap, there is one main image and 4 thumbnails. I want the main image to change based on the thumbnail I click. But, and this is a big 'But', I do not know the name of the image file (src) until runtime and only by extracting it from the HTML. Therefore, using JQuery, I need to do something that effectively does this:

Take the HTML above and render it into a DIV tag with a class on it.

Tell JQuery to make every image within that DIV class a certain size (the thumbnails).

With JQuery, add an onclick event that takes the src of that specific thumbnail (using 'this' perhaps?) and changes the src of the main image to show the full version of the clicked thumbnail.

Hope that makes sense.

Upvotes: 2

Views: 2681

Answers (1)

tejashsoni111
tejashsoni111

Reputation: 1405

I tried with the attr and it works for me.

This is sample code and jsfiddle link:

HTML : 

<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" class="thumb" />

JS : 

$('.thumb').click(function(){
    $(this).attr('src', 'http://www.toolsformoney.com/financial_software_demos.jpg');
});

jsfiddle : http://jsfiddle.net/tejashsoni111/MNk4z/

Update

I read your additional info of the question, and according to my understanding I updated my code. This is the link to the jsfiddle : http://jsfiddle.net/tejashsoni111/MNk4z/2/

Hope this will help you.

Upvotes: 3

Related Questions