Essayer de changer les états de l'image - de l'image fixe à l'animation - en utilisant l'API giphy

Question

Donc, je suis dans un bootcamp, pour commencer la 7ème semaine. Nous avons une affectation d'API, et j'ai choisi d'utiliser l'API Giphy. Ok, j'ai fait l'appel ajax, j'ai l'objet json, j'affiche des gifs en cliquant sur un bouton. Une fois les gifs chargés, vous devriez pouvoir animer l'image, puis au prochain clic, l'image redevient fixe. le processus devrait pouvoir se répéter ad nauseam. Je l'ai mis en place le sens qui a du sens; Cependant, je ne peux pas sembler obtenir les URL pour changer sur le clic comme c'est actuellement écrit. J'ai essayé .splice url, et en utilisant concat pour compléter l'URL mise à jour; cependant, je ne peux pas sembler comprendre comment obtenir l'image pour revenir à l'état encore sur le clic suivant ... travaillé sur ceci pendant tellement d'heures, quelqu'un me prêtera s'il vous plaît un nouvel ensemble d'yeux?

voici mes js et jquery

// $("#loadTimer, .buttonGallery, #btnGeneratingbtn").hide(); 
 
var topics = ["Brandon", "Biggie Smalls", "Dr. Seuss", "Paul McCartney", "John Lennon", "Will Ferrell", "Jimmy Fallon", "Chris Farley", "Dane Cook", "Eminem", "Nas", "Jay-Z", "Rakim", "William Shakespeare","Jim Morrison", "James Maynard", "Serj Tankian"]; 
 
var gifcount = 0; 
 
var gifLocation; 
 
var clickCount = 0; 
 

 
var buttonFactory = function() { 
 
    $(".buttonGallery").empty(); 
 

 
    for (i = 0; i < topics.length; i++) { 
 
     var imAbutton = $("<button>"); 
 
     imAbutton.addClass("yup"); 
 
     imAbutton.attr("data-name", topics[i]); 
 
     imAbutton.text(topics[i]); 
 
     $(".buttonGallery").append(imAbutton); 
 

 
    }}; 
 

 
buttonFactory(); 
 

 

 

 

 

 

 
$("#anotherButton").on("click", function(event) { 
 

 
     event.preventDefault(); 
 
     // This line grabs the input from the textbox 
 
     var onemorebutton = $("#user-input").val().trim(); 
 
     // Adding movie from the textbox to our array 
 
     topics.push(onemorebutton); 
 
     // Calling renderButtons which handles the processing of our movie array 
 
     buttonFactory(); 
 
     }); 
 

 

 
$(".yup").on("click", function(){ 
 
    
 

 
    
 
    $("#gif-Gallery").empty(); 
 
    var searchTermUpdate; 
 
    var searchTerm = $(this).attr("data-name"); 
 
     // removing white space between two-word strings, replacing with a "+" \\ 
 
searchTermUpdate = searchTerm.replace(/ +/g, "+"); 
 

 
    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + searchTermUpdate + "&api_key=dc6zaTOxFJmzC&limit=10"; 
 
    $.ajax({ 
 
     url: queryURL, 
 
     method: 'GET' 
 
    }).done(function(response) { 
 
     console.log(response); 
 
     
 
     var results = response.data; 
 
    
 
     for (var i = 0; i < results.length; i++){ 
 
      gifcount = gifLocation; 
 
      
 
      
 
      var gifDIV = $("<div class='unit' data-state='still'>"); 
 
      var pRating = $("<p>").text("Rating: " + results[i].rating); 
 
      var gifImg = $("<img id='gifimg' class='col-md-4'>"); 
 
      gifImg.attr("src", results[i].images.fixed_height_still.url); 
 
      gifImg.attr({'data-animate' : results[i].images.fixed_height.url}); 
 
      gifImg.attr({'data-state' : "still"}); 
 
      gifImg.attr({'data-still' : results[i].images.fixed_height_still.url}); 
 
      gifDIV.append(pRating); 
 
      gifDIV.append(gifImg); 
 
      gifDIV.append(gifLocation); 
 
      
 
      gifcount++; 
 

 
      
 

 
      // appending gif div to DOM \\ 
 
      if (results[i].rating !== "g" || "pg" || "pg-13" || "y"){ 
 
      $("#gif-Gallery").append(gifDIV); 
 
     }} 
 

 
     $(".unit").on("click", function(){ 
 

 

 
        var state = $(this).attr('data-state'); 
 
        
 
       
 
       if (state === "still") { 
 
     $(this).attr("src", $(this).attr("data-animate")); 
 
     $(this).attr("data-state", "animate"); 
 
     } else { 
 
     $(this).attr("src", $(this).attr("data-still")); 
 
     $(this).attr("data-state", "still"); 
 
     } 
 
     
 

 
      
 
// var imgPath = this.children[1].src; 
 
      
 
      clickCount++; 
 
      var a; 
 
      var b; 
 
      var c; 
 
      var d; 
 
      var f; 
 
      
 
        
 
        // if (clickCount % 2 === 0){ 
 
        
 
        // for (i=0; i < imgPath.length; i++){ 
 
        //  // locating index of underscore, storing that value in var a\\ 
 
        //  var a = imgPath.indexOf("_"); 
 
        //  // removing all characters to the right of the underscore \\ 
 
        //  var b = imgPath.slice(0, a); 
 
        //  f = b; 
 

 
        //  // setting var c to a string value of .gif \\ 
 
        //  var c = ".gif"; 
 
        //  // combining var b and var c to complete updated image path \\ 
 
        //  var d = b.concat(c); 
 
        //  } 
 
       
 
         // setting image url to animated url \\ 
 
        // $(gifImg).attr("src", d); 
 

 
         
 
        // this.children[1].src = d; 
 
}); 
 
    });});   //

et est le html ici si nécessaire:

<body> 
 
    <div class="jumbotron"> 
 
     <div class="container"> 
 
      <div class="myHeader"> 
 
       <h1>WordSmiths</h1> 
 
       <span class="text-muted" id="jtronText"> 
 
        <div id="sometimeGone">Sometimes</div><div id="loadTimer">someone opens their mouth and you can't help but to be dazzled with the magic.</div> 
 
       </span> 
 
       <p class="text-success" id="instructionsOne"> 
 
        Click a button, see what happens! 
 
       </p> 
 
       <p class="text-success" id="instructionsTwo"> 
 
        Now you can create your own buttons!!! 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <div class="buttonGallery"></div> 
 
       <h4>Create buttons, find Gifs!: </h4> 
 
       <form id="btnGeneratingForm"> 
 
        <label for="input">Anything: </label> 
 
        <input type="text" id="user-input"> 
 
        <br> 
 
        <input type="submit" id="anotherButton" value="More buttons"> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
      <div id="gif-Gallery"></div> 
 
     </div> 
 
    </div>

à nouveau, grâce à avancer! Robert

Answer 1

Je suis en train de faire le même projet! Je l'ai fait d'une manière assez similaire. Je pense que le problème est peut-être que vous ajoutez le src animé au div de l'image au lieu de l'image enfant elle-même. Cette ligne: $ (this) .attr ("src", $ (this) .attr ("data-anime"));

Est-ce que c'est ce qui vous donne des ennuis, je pense.

Bonne chance avec le projet, j'espère que cela aide.