Jqm / Jquery-collageplus Usage Issue

I'm building app using jQM and I'm trying to use jquery-collagePlus (http://ed-lea.github.io/jquery-collagePlus/) This is the jsfiddle: http://jsfiddle.net/z5HfK/ My HTML:

Solution 1:

When working with jQuery Mobile you need to use appropriate jQuery Mobile page event, in this case it is showpage (jQuery Mobile 1.4 and below) or pagecontainershow (jQuery Mobile 1.4 and above).

Working example: http://jsfiddle.net/Gajotres/26WXB/4/

jQuery Mobile 1.4 and above

$(document).on('pagecontainershow', function (e, ui) {
    var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
    if(activePage === 'index') {
        $('.collage').collagePlus(
            {
                // change this to adjust the height of the rows'targetHeight' : 100,
                // change this to try different effects// valid effets = effect-1 to effect-6'effect' : "effect-1"
            }
        );   
    }
});

or jQuery Mobile 1.4 and below:

$(document).on('pageshow', '#index', function(){ 
    $('.collage').collagePlus(
        {
            // change this to adjust the height of the rows'targetHeight' : 100,
            // change this to try different effects// valid effets = effect-1 to effect-6'effect' : "effect-1"
        }
    );             
});

Share