Need onclick to toggle between image and gif from giphy api call

Question

::UPDATED CODE::

I have dynamically generated buttons from an array. When a button is clicked, 10 still images of gifs append to the page from an API call. When clicking on one of the dynamically generated still images, I need the animated gif to display. Upon clicking again, I need the still image to show and the animated gif to hide.

lastClick = [];

var killersGifs = {

killerSearches: ["Freddy Krueger", "Jason Voorhees", "Pennywise", "Ghostface", "American Mary", "Chucky", "Bride of Chucky", "The Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Myers", "Norman Bates", "Pinhead"],

buttonLoop: function() {
    for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
        var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
        $("#buttons").append(buttonM);
    }
},

divLoop: function(click) {
    var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + lastClick + "&limit=10"

  $.ajax({
    url: queryURL,
    method: "GET"
  }).done(function(response) {
    console.log(response.data);

    for (var i = 0; i < response.data.length; i++) {
        var respData = response.data[i];
        var image = respData.images.fixed_height_small_still.url;
        var gif = respData.images.fixed_height_small.url;
        var rating = respData.rating;

        var dynDiv = $("<div class='dyn-div'>");
        //dynDiv.attr("data-index", i);

        var killerImg = $("<img class='still-image'>");

        killerImg.attr("src", image);
        killerImg.attr("alt", "Serial Killer still frame of gif");
        killerImg.attr("data-gif", gif);
        killerImg.attr("class", "killerImg");
        killerImg.attr("data-index", i);


        dynDiv.append("<p> Rating: " + rating + "</p>");
        dynDiv.append(killerImg);

        $("#append-img-div").prepend($(dynDiv));
        };

    });
  },
   userPush: function () {
        var userInput = $("input[type='text']").val().trim();
        console.log(userInput);
        killersGifs.killerSearches.push(userInput);
        var buttonU = $("<button class='dynGen'>").text(userInput).attr("data-index", userInput);
        $("#buttons").append(buttonU);
        console.log(killersGifs.killerSearches);
  }

};

killersGifs.buttonLoop();

$("#killer-add-submit").on("click", function(event) {
    event.preventDefault();
    killersGifs.userPush();
});

$(document).on("click", "button.dynGen", function(event) {
    var currentIndex = $(this).attr("data-index");
    lastClick.push(currentIndex);
    console.log(currentIndex);
    event.preventDefault();
    $("#append-img-div").empty();
    killersGifs.divLoop();
    lastClick = [];
});

$(document).on("click", ".killerImg", function(event) {
    console.log("test");
    var currentIn = $(this).attr("data-index");
    var tempUrl = $(this).attr("data-gif");
    console.log(currentIn);
    console.log(tempUrl);
});

On click, the clicked image should toggle between still image and animated gif.

Click function console logs index and correct gif URL of clicked image. I am not sure how to incorperate that to swap the gif and image on click.

Answer 1

lastClick = [];

var killersGifs = {

killerSearches: ["Freddy Krueger", "Jason Voorhees", "Pennywise", "Ghostface", "American Mary", "Chucky", "Bride of Chucky", "The Candyman", "Cujo", "Hannibal", "Leatherface", "Michael Myers", "Norman Bates", "Pinhead"],

buttonLoop: function() {
    for (var b = 0; b < killersGifs.killerSearches.length - 1; b++) {
      var buttonM = $("<button class='dynGen'>").text(killersGifs.killerSearches[b]).attr("data-index", killersGifs.killerSearches[b]);
      $("#buttons").append(buttonM);
    }
},

divLoop: function(click) {

    var queryURL = "https://api.giphy.com/v1/gifs/search?api_key=B26sstJns2pZuNT5HiJpqS5FV8Su1sDd&q=" + lastClick + "&limit=10"

  $.ajax({
    url: queryURL,
    method: "GET"
  }).done(function(response) {
    console.log(response.data);

    for (var i = 0; i < response.data.length; i++) {
        var respData = response.data[i];
        var image = respData.images.fixed_height_still.url;
        var gif = respData.images.fixed_height.url;
        var rating = respData.rating;

        var dynDiv = $("<div class='dyn-div'>");
        //dynDiv.attr("data-index", i);

        var killerImg = $("<img class='still-image'>");

        killerImg.attr("src", image);
        killerImg.attr("alt", "Serial Killer still frame of gif");
        killerImg.attr("data-gif", gif);
        killerImg.attr("class", "killerImg");
        killerImg.attr("data-index", i);
        killerImg.attr("data-img", image);



        dynDiv.append("<p> Rating: " + rating + "</p>");
        dynDiv.append(killerImg);


        $("#append-img-div").prepend($(dynDiv));
        };

    });


  },
    userPush: function () {
        var userInput = $("input[type='text']").val().trim();
        killersGifs.killerSearches.push(userInput);
        var buttonU = $("<button class='dynGen'>").text(userInput).attr("data-index", userInput);
        $("#buttons").append(buttonU);
        console.log(killersGifs.killerSearches);
  }
};

killersGifs.buttonLoop();

$("#killer-add-submit").on("click", function(event) {
    event.preventDefault();
    killersGifs.userPush();
});

$(document).on("click", "button.dynGen", function(event) {
    var currentIndex = $(this).attr("data-index");
    lastClick.push(currentIndex);
    console.log(currentIndex);
    event.preventDefault();
    $("#append-img-div").empty();
    killersGifs.divLoop();
    lastClick = [];
});

$(document).on("click", ".killerImg", function(event) {
    console.log("test");
    //killersGifs.animateGif();
    var currentIn = $(this).attr("data-index");
    var tempUrl = $(this).attr("data-gif");
    var tempUrl2 = $(this).attr("data-img");
    console.log(currentIn);
    console.log(tempUrl);
    if ($(this).attr("src") == tempUrl2) {
        $(this).attr("src", tempUrl);
    }
    else if ($(this).attr("src") == tempUrl) {
        $(this).attr("src", tempUrl2);
    };
});

Answer 2

I think you need to set the gif url as a property of the img element you are creating with jQuery. Something like:

`killerImg.attr("data-gif", gif);`

seeing as you already defined var gif = respData.images.fixed_height_small.url;. You may also want to give it a unique id like: killerImg.attr("id", "killer-img");

Then, in your on click event you can retrieve that attribute from the element itself:

var tempUrl = $("#killer-img").attr("data-gif");

and switch it out with the img src with:

$("#killer-img").attr("data-gif") = $("#killer-img").attr("src");

and finally:

$("#killer-img").attr("src") = tempUrl to set the image source to the moving gif.

I recently tackled a very similar assignment myself. Hope this helps!