more debugs

MORE DEBUGS!

Tuesday, November 29, 2011

jQuery

Image SlideShow Using jQuery

index.html

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
        <title>Image SlideShow</title>       
    </head>
   
    <body>
        <header id="main-header">
        </header>

        <section id="slideshow-app">       
            <div id="slideshow-frame">
                <ul id="slideshow-nav"></ul>               
                <ul id="slideshow-images">
                    <li class = "visible">
                        <figure class="slideshow-image">
                            <img alt="" src="images/everest.jpg" />
                            <figcaption>Everest Nepal</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="slideshow-image" >
                            <img alt="" src="images/mountain-lake.jpg" />
                            <figcaption>Mountain Lake</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="slideshow-image" >
                            <img alt="" src="images/kantegapeak.jpg" />
                            <figcaption>Kantega Peak</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="slideshow-image" >
                            <img alt="" src="images/khumbu_valley.jpg" />
                            <figcaption>Khumbu Valley</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="slideshow-image" >
                        <img alt="" src="images/mount everest.jpg" />
                        <figcaption>Mount Everest</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="slideshow-image" >
                        <img alt="" src="images/mt_everest.jpg" />
                        <figcaption>Sagarmatha</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="slideshow-image" >
                        <img alt="" src="images/view-at-chomrong.jpg" />
                        <figcaption>View at Chomrong</figcaption>
                        </figure>
                    </li>
                </ul>
            </div>
            <div id="slide-control">
                <a id="previous-slide" href="#">&larr;</a>
                <a id="play-toggle" href="">Pause</a>
                <a id="next-slide" href="">&rarr;</a>
            </div>
        </section>
               
        <footer>
            <script src="js/jquery-1.5.1.js"></script>
            <script src="js/application.js"></script>   
        </footer>
    </body>
</html>




application.js



function slide_next() {
    $("#slideshow-nav li#"+ page).removeClass("current-slide");
    if (page >= total_images)
        page= 1;
    else
        page++;
    $("#slideshow-nav li#"+ page).addClass("current-slide");
    $("#pagination").text(page);
    var current = $('#slideshow-images li.visible');
    current.removeClass('visible');
    current.fadeOut(100);   
    var remaining_images = current.nextAll().length;       
    if (remaining_images == 0) {
        $('#slideshow-images li:first').addClass('visible');
        $('#slideshow-images li:first').fadeIn('slow');
    }
    else {
        current.next().fadeIn("slow");
        current.next().addClass('visible');
    }
}

function slide_jump(img_number) {
    $("#slideshow-nav li#"+ page).removeClass("current-slide");
    var current = $('#slideshow-images li.visible');
    current.removeClass('visible');
    current.fadeOut(100);
    page=img_number;
    $("#slideshow-nav li#"+ page).addClass("current-slide");
    $("#slideshow-nav li#"+ page).addClass("current-slide");
    var first_image = $('#slideshow-images li:first');
    for(i=1;i<page;i++)
    {
        first_image = first_image.next();
    }
    first_image.addClass('visible');
    first_image.fadeIn('slow');
}

function slide_previous() {
    $("#slideshow-nav li#"+ page).removeClass("current-slide");
    if (page <= 1)
        page= total_images;
    else
        page--;
    $("#slideshow-nav li#"+ page).addClass("current-slide");
    $("#pagination").text(page);
    var current = $('#slideshow-images li.visible');
    current.removeClass('visible');
    current.fadeOut(100);
    var remaining_images = current.prevAll().length;
    if (remaining_images == 0) {
        $('#slideshow-images li:last').addClass('visible');
        $('#slideshow-images li:last').fadeIn('slow');
    }
    else {
        current.prev().addClass('visible');
        current.prev().fadeIn('slow');
    }
}

function auto_play() {
    if (play == true)
        slide_next();
}

function play_toggle() {
        if ($("#play-toggle").text()=="Pause") {
            play=false;
            $("#play-toggle").text("Play");
        }
        else {
            play=true;
            $("#play-toggle").text("Pause");
        }
}

$(function () {
    play = true;
    page=1;
    $("#pagination").text(page);
   
    total_images= $('#slideshow-images li.visible').nextAll().length +1;
    for(i=1;i<=total_images;i++) {       
        $('#slideshow-nav').append("<li>.</li>");
        $('#slideshow-nav li:last').attr("id",i);
    }
   
    $("#slideshow-nav li").click(function () {
        slide_jump(this.id);
    });
   
    $('#slideshow-images li:first').fadeIn("slow");
    $("#slideshow-nav li#"+ page).addClass("current-slide");
    //automatic slide show
    setInterval("auto_play()",1500);
   
    $('#next-slide').click( function () {
        slide_next();
        return false;
    });

    $('#play-toggle').click( function () {
        play_toggle();
        return false;
    });
   
    $("#slideshow-frame, #slide-control").mouseover(function () {
        play=false;
    });
   
    $("#slideshow-frame, #slide-control").mouseout(function() {
        if ($("#play-toggle").text()=="Pause")
            play=true;
    });

    $('#previous-slide').click( function () {
        slide_previous();
        return false;
    });
});

style.css

body {
    text-align: center;
}

#slideshow-app {
    background: #000000;
    padding: 8px 0px 10px 0px;
}

#slideshow-frame {
    border: solid 1px #D4CDCF;
    height: 620px;
    width: 660px;
    display:inline-block;
    border-radius: 20px;
    padding-top: 0px;
    background: #000000;
    overflow: hidden;
    margin-bottom: 10px;
    padding-right: 30px;
}

#pagination {
    color: #D4CDCF;
}

ul#slideshow-nav {
    cursor: hand;
}

ul#slideshow-nav li{
    display:inline;
    color: #73172E;
    font-size: 30px;
    font-weight: bolder;
    padding-right: 15px;
}

ul#slideshow-nav li.current-slide {
    color: #D4CDCF;
}

ul#slideshow-images {
    list-style: none;
    overflow:hidden;
}

ul#slideshow-images li {
    display: none;
    overflow: hidden;
}

ul#slideshow-images li img {
    -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.8, transparent), to(white));
    -webkit-border-radius: 7px;
    margin-bottom: 100px;
    height: 400px;
    width: 533px;
}

figure.slideshow-image figcaption {
    color: #D4CDCF;
}

figcaption {
    display:block;
}

#slide-control a {
    text-decoration: none;
    font-size: 30px;
    padding: 0px 18px;
    background-color: #000000; /* fallback color */
    background: -moz-linear-gradient(100% 100% 90deg, #303030, #000000);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#505050), to(#000000));
    color: #FFFFFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 5px 5px rgba(0,0,0,.4);
    text-shadow: 0 3px 3px rgba(255,255,255,.6);
}

#slide-control a:hover {
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#666666), color-stop(.6,#333));
    background-color: #000000;
}











Posted by at 7:14 AM
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)