jQM - Slide transition demo with dynamically added pages

by Alin Guta

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

    
    <body>
        <div data-role="page" id="article1" data-pagination="1">
                <h1>Pages</h1>

            <div data-role="content">
                <img src="http://img1.wikia.nocookie.net/__cb20140519075925/thehungergames/images/8/84/Kitten-16219-1280x800.jpg" />
            </div>

        </div>
        
        <div data-role="page" id="article2" data-pagination="2">

                <h1>Pages</h1>
            <div data-role="content">
                <img src="http://img1.wikia.nocookie.net/__cb20140519075925/thehungergames/images/8/84/Kitten-16219-1280x800.jpg" />
            </div>

        </div>
        
        <div data-role="page" id="article3" data-pagination="3">

                <h1>Pages</h1>
            <div data-role="content">
                <img src="http://img1.wikia.nocookie.net/__cb20140519075925/thehungergames/images/8/84/Kitten-16219-1280x800.jpg" />
            </div>
        </div>
        
    </body>

CSS

img{
    width:100%;
    height:auto;
    display:table;
    position:relative;
    margin:0 auto;
    padding:0;
}
h1{
    width:100%;
    height:auto;
    display:table;
    color:#fff;
    background:#333;
    padding:10px 0;
    text-align:center;
    font-weight:normal;
    text-shadow:none;
}

JavaScript

$(document).on('pagebeforeshow', 'div[data-role="page"]', function(){    
    selectbubble($(this));
});

$(document).off('swipeleft').on('swipeleft', 'div[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('div[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).off('swiperight').on('swiperight', 'div[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

function selectbubble(page) {
    $.each($('#bubble-holder div'), function (index,value) {
        var bubble = $(this);
        bubble.css('background','#3408AE'); 
        if(bubble.attr('id') === 'page' + page.attr('data-pagination') + '-bubble'){
            bubble.css('background','#0B0228');
        }
    });    
}

var myNewSRC= $('img').attr('src').replace('http://img1.wikia.nocookie.net/__cb20140519075925/thehungergames/images/8/84/','Detalii: ').replace('.jpg','').replace('.JPG','').replace('.png','');

var images = $('img').attr(myNewSRC);


  $('h1').html(myNewSRC);