jQM - Photoswipe custom button

by kalmarsh80

HTML

<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.css">
<link href="http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.css" rel="stylesheet" type="text/css">
<script src="http://torontographic.com/wordpress/mouseSwipe/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js" type="text/javascript"></script>
<div data-role="page">
    <div data-role="header">
         <h1 id="header_title">Play music for your</h1>
 <a href="#mypanel" class="ui-btn ui-btn-right ui-icon-bars ui-btn-icon-notext ui-corner-all">no text</a>
 <a href="#myback" id="myback" style="display:none;" class="ui-btn ui-btn-left ui-icon-back ui-btn-icon-notext ui-corner-all">no text</a>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content pages-body">
        <ul data-role="listview">
            <li class="li-top">
                <table id="table0">
                    <tbody>
                        <tr><td><a href="#" id="select_mood" class="lvl1_select">mood</a></td><td><a href="#" id="select_activity" class="lvl1_select">activity</a></td></tr>
                        <tr><td><a href="#" id="select_event" class="lvl1_select">event</a></td><td><a href="#" id="select_genre" class="lvl1_select">genre</a></td></tr>
                    </tbody>
                </table>
                <!--
                <div class="notsaved">auto-generated list. <button id="save_btn" class="ui-btn ui-mini ui-btn-inline">Save it Now</button></div>
                -->
                <table id="table1" align="center" cellpadding="5" cellspacing="0">
                    <tbody>
                        <tr>
                            <td>
                                <div id="viewport2" style='width:100%;' onselectstart="return false;">
                                    <div...

CSS

div.notsaved  {  
    color: #F00;
    font-weight: bold;
    margin: 2px 5px;
    padding: 5px;
    background: #FFC3C3;
    border: 1px solid #F00;
} 
div.saved  {  
    color: #008000;
    font-weight: normal;
    margin: 2px 5px;
    padding: 5px;
    background: #C5FFC3;
    border: 1px solid #008000;
}
#save_btn{
    margin: 0;
    padding: 2px 5px;
}
.ui-listview {
    height: 100%;
    position: relative;
    display: block;
    margin: 0 !important;
}
.pages-body {
    overflow:hidden;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
}
.pages-body ul li {
    padding:0 !important;
    margin:0 !important;
}
#table0{
    width:100%;
    height:100%;
    text-align:center;
}
#table1{
    width:100%;
    display:none;
}

/*
#table1 {
    width:100%;
}
#viewport2 {
    min-width: 1200px;
}
.panel{
    width:225px !important;
}
#viewport2, #mouseSwipeScroll, {
    width:225px;
}*/
#mouseSwipeScroll{
    width:100%;
}
.panel{
    width:225px !important;
}
.panel>h2 {
    position: relative;
    padding: 8px 10px;
    margin: 0;
    top: -56px;
    text-align: center;
    color: #333;
    text-shadow: none;
    font-size: 23px;
    background: rgba(255, 255, 255, 0.63);
}
.panel>img {
    height:225px;
    width:225px;
}

JavaScript

$(document).ready(function () {

    $(document).bind("dragstart", function () {
        return false;
    });

    $('#mouseSwipeScroll').swipe({
        TYPE: 'mouseSwipe',
        HORIZ: true
    });
    $(".pages-body").height($(document).height() - 88);
    $(".li-top").height(Math.round($(".pages-body").height() / 2.5));
    $(".li-bottom").height($(".pages-body").height() - $(".li-top").height());
    $("#vidBox").height($(".pages-body").height() - $(".li-top").height());
    //$("#viewport2").width($(document).width());

    $("#save_btn").live('click', function(){
        $(this).hide();
        $(".notsaved").removeClass("notsaved").addClass("saved");
        setTimeout(function(){$(".saved").fadeOut('fast');}, 3000);

    });
    
    $(".lvl1_select").live('click', function(){
        var cat = $(this).attr('id');
        //$.mobile.changePage( "#moods_page", { transition: "slide", changeHash: false });
        $("#table0").hide();
        $("#table1").fadeIn();
        $("#myback").show();
            var swipeWidth = 5 * 230;
            $("#mouseSwipeScroll").width(swipeWidth);
        $("#mouseSwipeScroll").html('').html(getCarousel_1(cat));
        navArray.push(cat);
    });
    $(".lvl2_select").live('click', function(){
            var swipeWidth = 8 * 230;
            $("#mouseSwipeScroll").width(swipeWidth);
        $("#mouseSwipeScroll").html('').html(getCarousel_2($(this).find("h2").text()));
        navArray.push($(this).find("h2").text());
    });
    
    $("#myback").live('click', function(){
        navArray.pop();
        if(navArray.length === 0){
            alert(navArray.length + " y " + navArray[navArray.length -1]);
            //getCarousel_1(navArray.pop());
            $("#header_title").text("Play music for your");
            navArray.pop();
            $("#table1").hide();
            $("#table0").fadeIn();
            $("#myback").hide();
        }
        if(navArray.length === 1){
            alert(navArray.length + "...