Ways to easily modify images using a single button with the help of jq

Question

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn...

Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images start as hidden, and upon clicking the button, the first image appears with a fadeIn effect. Upon the next click, the first image disappears and the second image appears, and so on...

This is my HTML setup..

<button id="animeButton">Animate</button> <br>
<img id="firstPic" class="images" src="http://paladone.com/ 
image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">
<img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-      
content/uploads/2009/05/furious-george.jpg?w=557">
<img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">

This is my jQuery code...

$(document).ready(function() {
$(".images").hide();    
});

$(document).ready(function(){
$("#animeButton").click(function(){
$("#firstPic").fadeIn(2000);
//Need assistance in implementing further steps....
});
});

javascript jquery html css

Answer 1

Answer №1

To start, make sure to include a data attribute in the following way:

<img id="firstPic" data-id="1" class="images" src="http://paladone.com/ 
    image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

Next,

$(document).ready(function(){
    imgID = 1;
    $("#animeButton").click(function(){
        if (imgID>3) {
           imgID = 1
        }
        $($('[data-id="'+imgID+'"]')).fadeIn(2000);
        imgID = imgID+1
    });
});

Although it hasn't been tested yet, this code should function as intended.

Answer 2

To start, make sure to include a data attribute in the following way:

<img id="firstPic" data-id="1" class="images" src="http://paladone.com/ 
    image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

Next,

$(document).ready(function(){
    imgID = 1;
    $("#animeButton").click(function(){
        if (imgID>3) {
           imgID = 1
        }
        $($('[data-id="'+imgID+'"]')).fadeIn(2000);
        imgID = imgID+1
    });
});

Although it hasn't been tested yet, this code should function as intended.

Answer 3

Answer №2

Give this a shot:

$(document).ready(function() {
    $(".pictures").hide();

  var imageArray = ["firstImage","secondImage","thirdImage"];
  // assign attribute to button for next image
  $("#imageButton").attr("nextImage", imageArray[0]);
  var counter = 0;

  $("#imageButton").click(function(){
    var button = $(this).attr("nextImage");
    var currentVisible = $(".pictures:visible").attr("id");
    $("#" + button).fadeIn(2000, function() {
      counter += 1;
      if (counter >= imageArray.length) counter = 0;
      $("#imageButton").attr("nextImage", imageArray[counter]);
    });
    $("#" + currentVisible).fadeOut(2000);
  });
});

Answer 4

Give this a shot:

$(document).ready(function() {
    $(".pictures").hide();

  var imageArray = ["firstImage","secondImage","thirdImage"];
  // assign attribute to button for next image
  $("#imageButton").attr("nextImage", imageArray[0]);
  var counter = 0;

  $("#imageButton").click(function(){
    var button = $(this).attr("nextImage");
    var currentVisible = $(".pictures:visible").attr("id");
    $("#" + button).fadeIn(2000, function() {
      counter += 1;
      if (counter >= imageArray.length) counter = 0;
      $("#imageButton").attr("nextImage", imageArray[counter]);
    });
    $("#" + currentVisible).fadeOut(2000);
  });
});

Answer 5

Answer №3

Here is a solution for you to try:

$(document).ready(function() {
  $('.images').hide();

  var counter = 0;
  var picArray = [];

  $("div").find("img").each(function(index, value) {
    picArray[index] = $(this);
  })

  $('#animeButton').click(function() {
    if (counter == 0) {
      picArray[picArray.length - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
      })

    } else {
      picArray[counter - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
        if (counter > picArray.length - 1) {
          counter = 0;
        }
      })
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="animeButton">
  Animate
</button>
<br/>

<div>
  <img id="firstPic" class="images" src="http://paladone.com/image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

  <img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-content/uploads/2009/05/furious-george.jpg?w=557">

  <img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">
</div>

Answer 6

Here is a solution for you to try:

$(document).ready(function() {
  $('.images').hide();

  var counter = 0;
  var picArray = [];

  $("div").find("img").each(function(index, value) {
    picArray[index] = $(this);
  })

  $('#animeButton').click(function() {
    if (counter == 0) {
      picArray[picArray.length - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
      })

    } else {
      picArray[counter - 1].fadeOut(2000, function() {
        picArray[counter].fadeIn(2000);
        counter++;
        if (counter > picArray.length - 1) {
          counter = 0;
        }
      })
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="animeButton">
  Animate
</button>
<br/>

<div>
  <img id="firstPic" class="images" src="http://paladone.com/image/cache/data/Pacman/PP2723PM_pac_man_ghost_pixel_bricks-800x800.jpg">

  <img id="secondPic" class="images" src="http://i2.wp.com/loyalkng.com/wp-content/uploads/2009/05/furious-george.jpg?w=557">

  <img id="thirdPic" class="images" src="http://www.wallpaperist.com/ 
wallpapers/Cartoons/Donald-duck-furious-800-600.jpg">
</div>

Ways to easily modify images using a single button with the help of jq

Answer №1

Answer №2

Answer №3

Similar questions

Can Javascript be used to open a new window, send POST parameters to it, and pass the request as application/json?

Invoke two functions simultaneously on a single Onchange event

jQuery UI Slider is malfunctioning (code example included)

appearing like a straightforward process of creating strings in JavaScript

How can I incorporate arithmetic operators within a function in EJS?

Solution to ensure fixed header with correct z-index placement

Tips for detecting the existence of a different class within a div/ul through jquery or javascript?

Using a straightforward approach with v-model in vue.js on an href element instead of a select

What is the best way to organize Node/Express routes based on their type into different files?

Click to dynamically rotate images using jQuery, or easily swap out images by clicking on them

Angular's Motion Module

Is there a way to prevent the Pace js plugin from running on page load, but still have it execute during Ajax requests only?

Does the success callback for AJAX operate synchronously?

Having trouble retrieving the JSON value as it returns undefined

Having difficulty accessing $scope beyond the function

Protruding button on the surface of the form

Position a Bootstrap 3 division within a central division for ultimate centering

Obtain the beginning and ending positions of a substring within a larger string

Rearrange object based on several criteria - JavaScript

What is the more effective option: utilizing the bootstrap offset feature or inserting an empty div?