Creating Multiple Instances in Jquery mobile

[woocommerce]

Creating Multiple Instances in Jquery mobile

[tylernotfound]

Looks like you have alerts to fire when the event is triggered. Do those alerts fire at the expected times? If you try and load the flexslider while it is hidden (display: none via css or js), jQuery won't be able to work with the objects.

If you fire the load when the slider is visible (parent element), everything should be fine. Does this sound like it could be the issue?

[ecurtis]

Some where, the solution (in part at least) was to fire the events on pageinit:

$('div#flexSwipePageTwo').live('pageinit',function(){
$('div#swipeFlexPageTwo').flexslider({
animation: "slide",
controlsContainer: "#flexImageSliderContainerTwo",
directionNav: false,
controlNav: false,
slideToStart: 0,
mousewheel: true });
});

$('div#flexSwipePageOne').live('pageinit',function(){
$('div#swipeFlexPageOne').flexslider({
animation: "slide",
controlsContainer: "#flexImageSliderContainerOne",
directionNav: false,
controlNav: false,
slideToStart: 0,
mousewheel: true });
});

Also it did not work on andriod 2.3.5 until I changed #swipeFlexPageTwo to div#swipeFlexPageTwo

On odd thing I am seeing is that the slideshow sometimes appears offset (in between two slides on load) or the images are squished and then stretched out on initial load, though it fixes itself if you swipe.

[ibrent]

Hi. I am also trying to get it working on jQM. The slider works, but the images are stretched tall. I am using iPhone4S with latest OS - mobile safari. It doesnt happen in the simulator or a desktop browser. Does anyone know a fix to this stretching issue? Or know what I am doing wrong? Thx. I assume it's something that jQM is doing to the slider since I do not see this happening on the flex.madebymufffin.com homepage slider.

[tylernotfound]

I believe I have fixed the jQM issues with the upcoming version. I haven't been able to reproduce the stretching error.

[ibrent]

OK rocking cool. Thanks Tyler. I'll look for an update and test this sucker out when ready.

[alexandriacuellar]

I have multiple instances of flexslider per page on multiple pages in jquery mobile and and while appearing on the first page navigating to another page without rel="external" would not render the flexsliders on the new pages. To get the flexsliders to initialize on each active page without rel="external" on the links to the new pages I used this code:

$( '.ui-page-active' ).live( 'pageshow',function(event){
if($(".ui-page-active #photolatest-slider").length!= 0){
$flexslider2 = $('.ui-page-active #photolatest-slider').flexslider({
prevText: "Prev",
animation: "slide",
slideshow: false,
directionNav: true,
controlNav: false,
controlsContainer: ".flex-container2"
});
}

The #photolatest-slider id is on the div with class="flexslider".

[gaurav-shetty]

@alexandria757 - You are my savior!! I spent hours trying to get this to work using different events but could not get it to work right. Thank you.