CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Scooter Daraf
Scooter Daraf

Reputation: 535

Switch and replace Images on click

Im trying to replace and switch pictures on click But im getting stack on my code. I can get the big picture to change but the small doesnt change.

here what i have so far :

html

<div class="image_container">
       <a  href="" >
    <img  class="big_image" src="picture1" />
      </a>
</div>
<div class="pics_container">
  <img class="lilla" src="picture2"  />
  <img class="lilla" src="picture3"  />
</div>

   $('.lilla').on('click',function(){
          $('.big_image').attr('src',$(this).attr('src')); 
          $(this).attr('src',$('.big_image').attr('src'));
    })

What i want is when i click on picture 2 or 3 it will be in the place of picture1 and the picture1 will take place of the clicked picture 2 or 3 .

In my example the small picture works good to replace picture1 but picture1 didnt replace the clicked one. what i have missed pls ?

working Demo fiddle here

Upvotes: 1

Views: 707

Answers (2)

dbledayr
dbledayr

Reputation: 13

I would apply a class on each picture then reference upon that. So in an on click function I would do the following.

Example

$('#imagereplacing).attr('src',$('.exampleClass').attr('src'));

Upvotes: 0

adeneo
adeneo

Reputation: 318182

You'll need a variable to store the source from the big image before you swap it out

$('.lilla').on('click',function(){
      var big_src = $('.big_image').attr('src');

      $('.big_image').attr('src', $(this).attr('src')); 

      $(this).attr('src', big_src);

});

Upvotes: 3

Related Questions