insert dynamic content in image swiper
<p>I'm using an image swiper in javascript and i'm trying to pupulate it via ajax request, to load content dynamically.</p>

<p>This is my script, working fine: <a href="https://jsfiddle.net/ywn1w7fn/2/" rel="nofollow noreferrer">https://jsfiddle.net/ywn1w7fn/2/</a></p>

<p>But it's not working if i try to populate it via ajax request:</p>

<pre><code>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 = '&lt;div class="swiper-slide"&gt;&lt;img src="http://mywebsite.com//images/'+item.img+'" style="width:100%;"&gt;&lt;/img&gt;&lt;/div&gt;';           
                output.append(landmark);

            }); 

        },
        error: function(){
            $( "#popupDialog" ).popup( "open" )
        }
    });
</code></pre>

<p>my php page returns a json encoded string like this:</p>

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

<p>What's wrong in my code?</p>