change image source using javascript onclick with effect

Question

I want to change the source of image with javascript,along with some effect like fadeout() or something like that.But I need to change source for more than one image,say 3 images,with fade effect or any other effect.HOW?? Below is the code i'm using but its only for 2 images how do i use for multiple images:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Untitled Document</title>
    <script src="jquery-1.5.1.js"></script>
</head>
<style>
body{
    background:url(big-image.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
    }
#a{
    width:15%;
    height:25%;

    position:static;
}
#b{
    width:50%;
    height:45%;
    display:none;
    left:10%;
}

</style>
<body>
    <h1>
      <input type="button" value="Click here" />
    </h1>
    <div class="frame">
      <h2 align="center">
         <img src="1.png" width="15%" height="31%" class="cat" id="a">
      </h2>
      <h3 align="center">
         <img src="2.png" id="b" class="cat">
      </h3>
    </div>
  <script type="text/javascript">
  $(function(){
    $("input:button").click(function(){
        $(".cat").fadeToggle("slow");
    });
  });
  </script>
</body>
</html>

If it is a new project, you should consider to use an updated version of jQuery — kosmos
– kosmos, Commented Jul 1, 2015 at 6:44
yea,fade it and another image comes up...neednt be any classy effects,even simple fade or slide would do.Is there any demo available. — Manoj Krishna Mohan
– Manoj Krishna Mohan, Commented Jul 1, 2015 at 6:46

guest271314 · Accepted Answer · 2015-07-01 07:30:42Z

2

yea,fade it and another image comes up...neednt be any classy effects,even simple fade or slide would do.Is there any demo available

ok,the result must be like an image carousel,on click it should keep fading in

Try utilizing .fadeToggle() , .prependTo(), .show() to cycle effect of fading out, fading in img elements within .frame container

$(function() {
  $("input:button").click(function() {
    $("img:last").fadeToggle("slow", function() {
      $(this).prependTo(".frame").show()
    });
  });
});

.frame {
  position: relative;
  left: 35%;
  width: 150px;
  height: 150px;
}
img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
  <img src="http://lorempixel.com/150/150/cats" />
  <img src="http://lorempixel.com/150/150/technics" />
  <img src="http://lorempixel.com/150/150/nature" />
  <img src="http://lorempixel.com/150/150/animals" />
</div>

edited Jul 1, 2015 at 7:30

answered Jul 1, 2015 at 6:59

guest271314

1

Sign up to request clarification or add additional context in comments.

6 Comments

Manoj Krishna Mohan Over a year ago

But this is for two images.I want it for a mulitple images.Otherwise i should be writing a separate class for each image.

guest271314 Over a year ago

@ManojKSharma Not certain interpret "But this is for two images.I want it for a mulitple images." correctly ? Can describe ? a) Simultaneously fade in , fade out multiple images ? b) Fade out, fade in multiple images sequentially ? c) Fade out, fade in images one per click on input type="button" ?

Manoj Krishna Mohan Over a year ago

i mean to say,i am able to display the second image,but when i click again it goes back to the first image,so i have only two images to display. What i mean to say is,the click here button should be like a 'next image' button,when i click on it,the next image should fadein. Lets sat i have 4 images,onclick every time,they shud fadein one by one.

guest271314 Over a year ago

@ManojKSharma " i mean to say,i am able to display the second image,but when i click again it goes back to the first image,so i have only two images to display." Yes. Only two images appear at html at Question ? Can describe expected result ? See a), b), c) at previous comment.

Manoj Krishna Mohan Over a year ago

ok,the result must be like an image carousel,on click it should keep fading in

|

eliasRuizHz · Accepted Answer · 2015-07-01 06:51:23Z

0

By:@kmsdev say "you should consider to use an updated version of jQuery"

I suggest you also use the power of CSS3

$(function(){
    $("input:button").click(function(){
        $(".cat").css("filter","blur(6px)");
    });
});

When you can give a tour of these links:

http://www.desarrollolibre.net/blog/tema/74/html5-css-js/el-filtro-blur-desenfoque-en-css-y-alguno-de-sus-posibles-usos#.VZOM3e1_NHw

http://codepen.io/libredesarrollo/full/xIHda

answered Jul 1, 2015 at 6:51

eliasRuizHz

3544 silver badges15 bronze badges

1 Comment

Manoj Krishna Mohan Over a year ago

You are showing multiple images at a time,i want only one image displayed,others hidden and onclick,the next image should come in with effect.Right now the image is just fading in,which is enough,but how do i do for multiple images

Gustaf Gunér · Accepted Answer · 2015-07-01 06:58:01Z

0

Something like this? jQuery's .each() loops through all elements with a specific class. .attr() changes attribute, in this case src.

References:

https://api.jquery.com/each/

http://api.jquery.com/attr/

http://api.jquery.com/animate/

$('button').click(function(){
   $('.image').each(function(){
      $(this).animate({
        opacity: 0
      }, 300, function(){
         $(this).attr('src', 'http://www.spacecitynerd.com/launch/wp-content/uploads/2014/06/gaben.png');
      });
     $(this).animate({
       opacity: 1
     }, 300);
   });
});

img{
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click me</button><br>
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">

answered Jul 1, 2015 at 6:58

Gustaf Gunér

2,2674 gold badges19 silver badges23 bronze badges

1 Comment

Manoj Krishna Mohan Over a year ago

yea,its the same thing that i have done but in a differnt way,when i click the next image fades in,i want this for a set of images.

Jordan · Accepted Answer · 2015-07-01 08:48:15Z

Previous exemple missed to listen when image is ready (loaded) before display it back.

If you want a fadeOut/In:

// Trigger action on click (or something else)
$("img").on("click", function(){

    // Store element to access it faster
    var $this = $(this);

    // Animate to hide it
    $this.animate({
        opacity: 0
    }, {
        // When completely transparent
        complete: function(){

            // Add load event to know when img is ready (loaded)
            $this.on("load", function(){

                // Show new image
                $this.animate({
                    opacity: 1
                });
            });

            // Set to image to start loading
            $this.attr("src", "newurl");
        }
    });

});

If you want a blur, simply change opacity in animate block by : transform: "blur(0px)" and transform: "blur(10px)" You may have to add prefix for non-Chrome browsers

Collectives™ on Stack Overflow

change image source using javascript onclick with effect

4 Answers 4

6 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related