1

I am trying to load a still image into the variable topicImage and then switch to the animated GIF when clicked. My code causes the image to disappear when clicked instead of switching to the animated GIF. Any input would be greatly appreciated. 

            var topicImage = $("<img>");
            topicImage.attr("src", results[i].images.fixed_height_still.url);

            topicImage.on( "click", function() {
              topicImage.attr("src", results[i].images.fixed_height.url);
            });



            gifDiv.prepend(p);
            gifDiv.prepend(topicImage);

            $("#addedGifs").prepend(gifDiv);
          }
        });
            console.log(searchParam);
    });
Seytorin
  • 11
  • 1
  • Does the GIF eventually show up? A common trick is to place a hidden `` on the page that references the same image. Then when you switch to the image, the browser has already retrieved the image and has it cached. – dwilliss Dec 13 '17 at 22:34
  • Also have you verified that `results[i].images.fixed_height.url` contains accurate values? – Taplar Dec 13 '17 at 22:35
  • It shows up and the values seem fine. Each one works if they are done separately. It just won't switch for some reason. Does anyone know the syntax to switch between two src attributes on click? – Seytorin Dec 14 '17 at 00:25
  • Here is the error I get in the console. gifTastic.html:90 Uncaught TypeError: Cannot read property 'images' of undefined at HTMLImageElement. (gifTastic.html:90) at HTMLImageElement.dispatch (jquery.min.js:3) at HTMLImageElement.q.handle (jquery.min.js:3) – Seytorin Dec 14 '17 at 00:36

0 Answers0