CODEWITHSUNDEEP
javascriptjquery-mobileflexslider
marius2k12
marius2k12

Reputation: 1101

jQuery Mobile + Flexslider2

I'm having huge troubles getting jQuery Mobile to work with other Javascript libraries - in my case Flexslider 2 (http://flex.madebymufffin.com/examples/basic.html).

I have a couple of pages where I want to use the flexslider in addition to jQM. Unfortunately, the slider doesn't work / isn't loaded when I click on links on my site.

I know this is because of the way jQM loads pages - by loading them with AJAX and adding them do the DOM.

I've been looking around for hours now to find out how to use events like "pageshow" and "mobileinit" etc but I just can't get it to work, so any help is really appreciated.

Heres what I'm doing now:

In each < head > part of my pages:

<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="js/jquery.flexslider2.js"></script>

<script type="text/javascript">
    $('#flexslider').bind('pageshow', function(){
        $('.flexslider').flexslider({
            animation: "slide",
        });
    });
</script>

This works when I reload the page manually, however it doesn't work when I visit the page through a link on my site.

Upvotes: 0

Views: 1553

Answers (3)

user2838018
user2838018

Reputation:

I had this same problem. Flexslider on the index page of a Jquery Mobile site would work when first navigated to, but not if returned to through the menu or back button.

I used the 'pageshow' event rather than the ''pageinit' event and it worked perfectly:

$(document).bind('pageshow', function() { $('.flexslider').flexslider({ animation: "slide", }); });

Upvotes: 0

hzm
hzm

Reputation: 430

You can add rel="external" or data-ajax="false" to the link of FlexSlider page, which can disable the Ajax loading of page. You can refer to the document here

Upvotes: 2

vanev_
vanev_

Reputation: 477

Try putting it inside a callback of pageinit. Like so...

$(document).bind('pageinit', function(){ $('.flexslider').flexslider({ animation: 'slide' ); });

I'm sure someone more knowledgable can chime in as to why this is necessary, but I'm 99% sure it's the way to go.

Enjoy!

Upvotes: 1

Related Questions