Geek Answers Handbook

Change image source using javascript onclick with effect

I want to change the image source using javascript, as well as some effect like fadeout () or something like that. But I need to change the source code to several images, for example 3 images, with a fading effect or any other effect. AS?? Below is the code that I use, but its only for two images, how to 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>
+4
source share
4 answers

yes, fade it out and another image will appear ... no need to be cool effects, even a simple fade or slide. Are there any demos

ok, ,

.fadeToggle(), .prependTo(), .show() , img .frame

$(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>
Hide result
+2

By: @kmsdev say " jQuery"

CSS3

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

:

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

0

- ? jQuery .each() . .attr() , src.

:

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">
Hide result
0
source

The previous example is skipped for listening when the image is ready (loaded) before displaying it.

If you want 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 blur, just change the opacity in the animation block: transform: "blur(0px)"and transform: "blur(10px)" you may have to add a prefix for browsers without Chrome.

0
source

More articles:


All Articles