Ich versuche, Bildzustände zu wechseln - von still zu animieren - mit Hilfe von API API

Question

Also bin ich in einem Bootcamp, um die 7. Woche zu beginnen. Wir haben eine API-Zuweisung und ich entschied mich für die API von Giphy. Okay, ich habe den Ajax-Aufruf gemacht, habe das Json-Objekt, zeige Gifs mit einem Klick an. Sobald die Gifs geladen sind, sollten Sie in der Lage sein, das Bild animieren zu lassen. Beim nächsten Klick wird das Bild wieder angezeigt. Der Prozess sollte sich bis zum Überdruss wiederholen können. Ich habe es so eingerichtet, dass es Sinn ergibt; Allerdings kann ich die URLs anscheinend nicht ändern, wenn ich auf die Art und Weise klicke, wie sie gerade geschrieben wurde. Ich habe versucht .splice URL, und concat verwenden, um aktualisierte URL abzuschließen; Allerdings kann ich nicht herausfinden, wie man das Bild beim nächsten Klick wieder in den Standzustand bringen kann ... habe so viele Stunden an diesem Thema gearbeitet, wird mir jemand bitte eine frische Augenweide leihen?

hier ist mein js und 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; 
 
}); 
 
    });});   //

und hier ist die html, wenn nötig:

<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>

wieder, Dank in voraus! Robert

Answer 1

Ich mache eigentlich das gleiche Projekt! Ich habe es ziemlich ähnlich gemacht. Ich denke, das Problem könnte sein, dass Sie den animierten Quellcode an den Bildträger div anhängen, anstatt an das Kindbild selbst. Diese Zeile: $ (this) .attr ("src", $ (this) .attr ("Daten-Animation"));

Ist, was Sie Ärger gibt, denke ich.

Viel Glück mit dem Projekt, ich hoffe, dass hilft.