画像のスワイパーに動的コンテンツを挿入

Question

javascriptで画像のスワイパーを使用しています。コンテンツを動的に読み込むために、ajaxリクエストを介して画像を取り上げようとしています。

これは正常に動作し、私のスクリプトです：https://jsfiddle.net/ywn1w7fn/2/

しかし、それは働いていない私は、AJAXリクエストを経由して、それを移植しようとした場合：

：

var output = $('#swippy'); 
$.ajax({ 
     url: 'http://mywebsite.com/images/images_to_swiper.php', 
     dataType: 'jsonp', 
     jsonp: 'jsoncallback', 
     timeout: 5000, 
     success: function(data, status){ 
      $.each(data, function(i,item){ 
       var landmark = '<div class="swiper-slide"><img src="http://mywebsite.com//images/'+item.img+'" style="width:100%;"></img></div>';   
       output.append(landmark); 

      }); 

     }, 
     error: function(){ 
      $("#popupDialog").popup("open") 
     } 
    }); 

私のPHPページでは、このようなJSONエンコードされた文字列を返します。

([{"id":"19","img":"image1.png","posizione":"1"},{"id":"11","img":"anotherimage.jpg","posizione":"6"}]); 

私のコードで何が間違っていますか？

Answer 1

あなたのコードでは何も間違っているようですが、ajax success関数でswiperを初期化したいと思います。

Your code should look like this 

var output = $('#swippy'); 
$.ajax({ 
     url: 'http://mywebsite.com/images/images_to_swiper.php', 
     dataType: 'jsonp', 
     jsonp: 'jsoncallback', 
     timeout: 5000, 
     success: function(data, status){ 
      $.each(data, function(i,item){ 
       var landmark = '<div class="swiper-slide"><img src="http://mywebsite.com//images/'+item.img+'" style="width:100%;"></img></div>';   
       output.append(landmark); 

      }); 

      var swiper = new Swiper('.swiper-container', 
      { 
       pagination: '.swiper-pagination', 
       paginationClickable: true, 
       autoplay: 2500, 
       autoplayDisableOnInteraction: true, 
       preloadImages: false 
      }); 
     }, 
     error: function(){ 
      $("#popupDialog").popup("open") 
     } 
    }); 

これはあなたの声援に役立ちます。