Elie Shhade Elie Shhade - 7 months ago 9
Javascript Question

adding div in jquery does not perform as if it is written directly by html

html code:

<div class="swiper-container">
<div class="swiper-wrapper"></div>
<div class="swiper-pagination"></div>
</div>


jquery:

<script type="text/javascript" >
var queryString = (window.location.href).substr((window.location.href).indexOf('?') + 1);
var value = (queryString.split('='))[1];
$(document).ready(function() {
$.getJSON("http://localhost/phoneGap/AnyScan/www/image.php?typeID="+value,function(result){
$.each(result, function(i, field){
$(".swiper-wrapper").append("<div class='swiper-slide'><a href='http://localhost/anyscan/images/"+field.content+"'><img src='http://localhost/anyscan/images/"+field.content+"' width='100%' height='100%'></a></div>");
});
});
});
</script>


I am using an external file for swiping between pictures, every image should be in a which is a part of a div with class swiper-wrapper as shown below :

<div class="swiper-container">
<div class="swiper-wrapper">
<div class=swiper-slide>image 1</div>
<div class=swiper-slide>image 2</div>
<div class=swiper-slide>image 3</div>
<div class=swiper-slide>image 4</div>
</div>
</div>


The problem is : when i use the jquery code the images doesn't swipe unless i minimize the browser and maximize it (I don't know why), but if i put the links of image inside the html like this:

<div class="swiper-slide"><a href='http://localhost/anyscan/images/icon-30182012-08-12-133.jpg'><img src='http://localhost/anyscan/images/icon-30182012-08-12-133.jpg' width='100%' height='100%'></a></div>
<div class="swiper-slide"><a href='http://localhost/anyscan/images/icon-59071hyt%20002.jpg'><img src='http://localhost/anyscan/images/icon-59071hyt%20002.jpg' width='100%' height='100%'></a></div>
<div class="swiper-slide"><a href='http://localhost/anyscan/images/icon-11955hyt%20003.jpg'><img src='http://localhost/anyscan/images/icon-11955hyt%20003.jpg' width='100%' height='100%'></a></div>


it works perfectly, any help ?

Answer

You can try to call the onResize() or update() method after adding the contents to the slider

var queryString = (window.location.href).substr((window.location.href).indexOf('?') + 1);
var value = (queryString.split('='))[1];
$(document).ready(function() {
  $.getJSON("http://localhost/phoneGap/AnyScan/www/image.php?typeID=" + value, function(result) {
    $.each(result, function(i, field) {
      $(".swiper-wrapper").append("<div class='swiper-slide'><a href='http://localhost/anyscan/images/" + field.content + "'><img src='http://localhost/anyscan/images/" + field.content + "' width='100%' height='100%'></a></div>");
    });
    swiper.update();
  });
});
Comments