jQM / jquery-collagePlus Usage Issue

Question

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:

<div class="collage">
    <img src="http://mywaiter.my/images/food1.jpg">
                    <img src="http://mywaiter.my/images/food2.jpg">
                    <img src="http://mywaiter.my/images/food3.jpg">
                    <img src="http://mywaiter.my/images/food4.jpg">
                    <img src="http://mywaiter.my/images/food5.jpg">
                    <img src="http://mywaiter.my/images/food6.jpg">
                    <img src="http://mywaiter.my/images/food7.jpg">
                    <img src="http://mywaiter.my/images/food8.jpg">
                    <img src="http://mywaiter.my/images/food9.jpg">
                </div>

The JS:

$(window).load(function () {
        $('.collage').collagePlus();
    });

It doesn't seem to work and because I'm new to JS, I'm not too sure why.

In my app test, all the images is gone after the jQM page loaded.

Please advice on what I have done wrong. Thank you.

Answer 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"
        }
    );             
});