CODEWITHSUNDEEP
javascriptjquerymobilejquery-mobileslideshow
user1195246
user1195246

Reputation: 31

Flexslider loads once with jQuery Mobile

I tried to implement Flexslider into jquery mobile without success. It loads once and after page refresh the whole gallery is invisible. Please see full HTML at: http://jsfiddle.net/vyNxb/1/

jQuery mobile call:

    <!-- Flexslider -->
        <script src="js/jquery.flexslider-min.js"></script>

            <!-- Flexslider Test Call -->
<!--             <script type="text/javascript">
                 $('#homepage').live('pageinit', function() {
                //$( document ).delegate("#homepage", "pageinit", function() {
                    $('.flexslider').flexslider();
                });
            </script> -->

Standard call: 

<!-- Flexslider Standard Call -->
            <script type="text/javascript"> 
                $(window).load(function() { 
                    $('.flexslider').flexslider(); 
                }); 
            </script>

Thanks in advance.

Upvotes: 2

Views: 1904

Answers (3)

Nagama Inamdar
Nagama Inamdar

Reputation: 2857

Try to include the flexslider.js and flexslider.css very above the script tags.Write it after the footer of your page before the page end.This worked for me.

<script defer src="js/jquery.flexslider.js"></script>      
<link rel="stylesheet" href="css/flexslider.css"/> 

$('#idOfPage').on('pageshow', function(event) {
    $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider) {}
    });
});

Upvotes: 2

CrabbyChicken
CrabbyChicken

Reputation: 21

Try adding rel="external" to links leading to the problem page. Hope this helps someone.

Upvotes: 2

alexandria757
alexandria757

Reputation: 81

Try using this for jQuery Mobile:

$( '#homepage' ).live( 'pageshow',function(event){

    // FlexSlider

    $myflexslider = $('.flexslider').flexslider({
        animation: "slide"
    });


});

Upvotes: 1

Related Questions