Implementing reInit() after dynamic load using Idangerous

Question

In a Mongo, Bottle setup I'm using several Idangerous vertical swiper streams each below each other. I use Ajax jQuery to load more content but I have issues reInit() the swiper causing the new content to jump around until the browser window is resized.

I've read this posting idangerous swiper issue with dynamic content but can't get the hang of how to implement the reInit properly.

Any pointers much appreciated.

$(function(){
var mySwiper=$('.thumbs-cotnainer').each(function(){
    $(this).swiper({ 
        slidesPerView:'auto', 
        offsetPxBefore:5,
        offsetPxAfter:10,
        calculateHeight:true,   
        grabCursor: true
    });
  });
});


function fetch_stream_more(arti_type) {
var eurl = {arti_type: arti_type};

$.ajaxSetup({
    headers: { "cache-control": "no-cache" }
});

$.ajax({
    dataType: 'jsonp',
    data: eurl,
    type: 'GET',
    url: '/more_in_stream/' + arti_type + '/rdKh3dC5sYfNuoiv07Ka',
    jsonpCallback: "rdKh3dC5sYfNuoiv07Ka",
    success: function (data) {
        $("#" + arti_type).load("add_more.tpl");
        $("#" + arti_type).before(data[0]['more_streams_r']);
    },
    init: function reinitSwiper(swiper) {
        setTimeout(function () {
            mySwiper.reInit();
            }, 500);
    },
    error: function(jqXHR, textStatus) {
        alert("this failed");
    }
});
}

For reference here is an example of the html to show one (of several) horizontal swiper.

<!--stream by specific arti-type-->
<div class="swiper-container thumbs-cotnainer border-gradient">
<div class="thumbs-title">Products</div>
<div class="swiper-wrapper">
%artiType = "product"
%for entry in myentries:
%if entry['arti_type']==artiType:
<div class="swiper-slide">
<!--sort media after rank and show only first ranked media-->
%if entry['media']: 
%media = entry['media']
%sorted_media = sorted(media, key=lambda m:m['rank'])
%first_media = sorted_media[0]
<a href="/{{entry['permalink']}}"><img src='/images/{{first_media['media_id']}}/105/140' alt='{{first_media['caption']}}'>
<div class="thumbs-gradient">
<div class="thumbs-headline">{{entry['title']}}</div>
</div></a>
%else:
<a href="/{{entry['permalink']}}" >
<div class="thumbs-gradient-noimage">
<div class="thumbs-headline-noimage">
<div class="noimage">{{entry['title']}}</div>
<div class="noimage-intro" id="dot1">{{entry['intro']}}</div>
</div></div></a>
%end
</div>
%end
%end
<div id='{{artiType}}'></div>
<!--add_more.tpl need to go here-->
<div class="swiper-slide">
<img src='/static/load_more.png' onclick="fetch_stream_more('{{artiType}}')" alt='more'>

score 0 · Answer 1 · answered Nov 17 '14 at 22:38

Got this fixed and updating the answer. in the success did a
reinitSwiper(); and then the swiper scripts as follow:

var mySwipers = [];

function reinitSwiper() {
  $.each(mySwipers, function(index, swiper){
  swiper.reInit();
  });
}

$(function(){
  mySwiper=$('.thumbs-cotnainer').each(function(){
    var swiper = $(this).swiper({ 
        slidesPerView:'auto', 
        offsetPxBefore:5,
        offsetPxAfter:10,
        calculateHeight:true,   
        grabCursor: true
    });
    mySwipers.push(swiper);
  });
});

Implementing reInit() after dynamic load using Idangerous

1 Answers1