?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

Pembuatan Slider Cantik

Daftar isi
Daftar isi buku menggunakan sortir label dan posting terbaru
<div id='slider_show' class='slider_show'>
    <a class='prev disabled'></a>
    <a class='next disabled'></a>
    <div id='slider_albums'>
        <div class='slider_album' style='opacity:0;'>
            <img src='URL Image' alt=''/>
            <div class='slider_desc'>
                <a href='#'><h2>Judul Tulisan</h2></a><span>Isi tulisan</span>
            </div>
        </div>
        <div class='slider_album' style='opacity:0;'>
            <img src='URL Image' alt=''/>
            <div class='slider_desc'>
                <a href='#'><h2>Judul Tulisan</h2></a><span>Isi tulisan</span>
            </div>
        </div>
        <div class='slider_album' style='opacity:0;'>
            <img src='URL Image' alt=''/>
            <div class='slider_desc'>
                <a href='#'><h2>Judul Tulisan</h2></a><span>Isi tulisan</span>
            </div>
        </div>
    </div>
</div>
$(function () {
    /**
     * navR,navL are flags for controlling the albums navigation
     * first gives us the position of the album on the left
     * positions are the left positions for each of the 5 albums displayed at a time
     */
    var navR, navL = false;
    var first = 1;
    var positions = {
        '0': 0,
        '1': 170,
        '2': 340,
        '3': 510,
        '4': 680
    }
    var $slider_albums = $('#slider_albums');
    /**
     * number of albums available
     */
    var elems = $slider_albums.children().length;
    var $slider_show = $('#slider_show');


    /**
     * let's position the albums on the right side of the window
     */
    var hiddenRight = $(window).width() - $slider_albums.offset().left;
    $slider_albums.children('div').css('left', hiddenRight + 'px');
    /**
     * move the first 5 albums to the viewport
     */
    $slider_albums.children('div:lt(5)').each(function (i) {
        var $elem = $(this);
        $elem.animate({
            'left': positions[i] + 'px',
            'opacity': 1
        }, 800, function () {
            if (elems > 5)
                enableNavRight();
        });
    });



    /**
     * next album
     */
    $slider_show.find('.next').bind('click', function () {
        if (!$slider_albums.children('div:nth-child(' + parseInt(first + 5) + ')').length || !navR) return;
        disableNavRight();
        disableNavLeft();
        moveRight();
    });

    /**
     * we move the first album (the one on the left) to the left side of the window
     * the next 4 albums slide one position, and finally the next one in the list
     * slides in, to fill the space of the first one
     */

    function moveRight() {
        var hiddenLeft = $slider_albums.offset().left + 163;

        var cnt = 0;
        $slider_albums.children('div:nth-child(' + first + ')').animate({
            'left': -hiddenLeft + 'px',
            'opacity': 0
        }, 500, function () {
            var $this = $(this);
            $slider_albums.children('div').slice(first, parseInt(first + 4)).each(function (i) {
                var $elem = $(this);
                $elem.animate({
                    'left': positions[i] + 'px'
                }, 800, function () {
                    ++cnt;
                    if (cnt == 4) {
                        $slider_albums.children('div:nth-child(' + parseInt(first + 5) + ')').animate({
                            'left': positions[cnt] + 'px',
                            'opacity': 1
                        }, 500, function () {
                            //$this.hide();
                            ++first;
                            if (parseInt(first + 4) < elems)
                                enableNavRight();
                            enableNavLeft();
                        });
                    }
                });
            });
        });
    }

    /**
     * previous album
     */
    $slider_show.find('.prev').bind('click', function () {
        if (first == 1 || !navL) return;
        disableNavRight();
        disableNavLeft();
        moveLeft();
    });

    /**
     * we move the last album (the one on the right) to the right side of the window
     * the previous 4 albums slide one position, and finally the previous one in the list
     * slides in, to fill the space of the last one
     */

    function moveLeft() {
        var hiddenRight = $(window).width() - $slider_albums.offset().left;

        var cnt = 0;
        var last = first + 4;
        $slider_albums.children('div:nth-child(' + last + ')').animate({
            'left': hiddenRight + 'px',
            'opacity': 0
        }, 500, function () {
            var $this = $(this);
            $slider_albums.children('div').slice(parseInt(last - 5), parseInt(last - 1)).each(function (i) {
                var $elem = $(this);
                $elem.animate({
                    'left': positions[i + 1] + 'px'
                }, 800, function () {
                    ++cnt;
                    if (cnt == 4) {
                        $slider_albums.children('div:nth-child(' + parseInt(last - 5) + ')').animate({
                            'left': positions[0] + 'px',
                            'opacity': 1
                        }, 500, function () {
                            //$this.hide();
                            --first;
                            enableNavRight();
                            if (first > 1)
                                enableNavLeft();
                        });
                    }
                });
            });
        });
    }

    /**
     * disable or enable albums navigation
     */

    function disableNavRight() {
        navR = false;
        $slider_show.find('.next').addClass('disabled');
    }

    function disableNavLeft() {
        navL = false;
        $slider_show.find('.prev').addClass('disabled');
    }

    function enableNavRight() {
        navR = true;
        $slider_show.find('.next').removeClass('disabled');
    }

    function enableNavLeft() {
        navL = true;
        $slider_show.find('.prev').removeClass('disabled');
    }

    var $slider_container = $('#slider_container');
    var $slider_overlay = $('#slider_overlay');
    var $slider_close = $('#slider_close');
    /**
     * when we click on an album,
     * we load with AJAX the list of pictures for that album.
     * we randomly rotate them except the last one, which is
     * the one the User sees first. We also resize and center each image.
     */
    $slider_albums.children('div').bind('click', function () {
        var $elem = $(this);
        var album_name = 'album' + parseInt($elem.index() + 1);
        var $loading = $('<div />', {
            className: 'loading'
        });
        $elem.append($loading);
        $slider_container.find('img').remove();
        $.get('photostack.php', {
            album_name: album_name
        }, function (data) {
            var items_count = data.length;
            for (var i = 0; i < items_count; ++i) {
                var item_source = data[i];
                var cnt = 0;
                $('<img />').load(function () {
                    var $image = $(this);
                    ++cnt;
                    resizeCenterImage($image);
                    $slider_container.append($image);
                    var r = Math.floor(Math.random() * 41) - 20;
                    if (cnt < items_count) {
                        $image.css({
                            '-moz-transform': 'rotate(' + r + 'deg)',
                            '-webkit-transform': 'rotate(' + r + 'deg)',
                            'transform': 'rotate(' + r + 'deg)'
                        });
                    }
                    if (cnt == items_count) {
                        $loading.remove();
                        $slider_container.show();
                        $slider_close.show();
                        $slider_overlay.show();
                    }
                }).attr('src', item_source);
            }
        }, 'json');
    });

    /**
     * when hovering each one of the images, 
     * we show the button to navigate through them
     */
    $slider_container.live('mouseenter', function () {
        $('#slider_next_photo').show();
    }).live('mouseleave', function () {
        $('#slider_next_photo').hide();
    });

    /**
     * navigate through the images: 
     * the last one (the visible one) becomes the first one.
     * we also rotate 0 degrees the new visible picture 
     */
    $('#slider_next_photo').bind('click', function () {
        var $current = $slider_container.find('img:last');
        var r = Math.floor(Math.random() * 41) - 20;

        var currentPositions = {
            marginLeft: $current.css('margin-left'),
            marginTop: $current.css('margin-top')
        }
        var $new_current = $current.prev();

        $current.animate({
            'marginLeft': '250px',
            'marginTop': '-385px'
        }, 250, function () {
            $(this).insertBefore($slider_container.find('img:first'))
                .css({
                    '-moz-transform': 'rotate(' + r + 'deg)',
                    '-webkit-transform': 'rotate(' + r + 'deg)',
                    'transform': 'rotate(' + r + 'deg)'
                })
                .animate({
                    'marginLeft': currentPositions.marginLeft,
                    'marginTop': currentPositions.marginTop
                }, 250, function () {
                    $new_current.css({
                        '-moz-transform': 'rotate(0deg)',
                        '-webkit-transform': 'rotate(0deg)',
                        'transform': 'rotate(0deg)'
                    });
                });
        });
    });

    /**
     * close the images view, and go back to albums
     */
    $('#slider_close').bind('click', function () {
        $slider_container.hide();
        $slider_close.hide();
        $slider_overlay.fadeOut(400);
    });

    /**
     * resize and center the images
     */

    function resizeCenterImage($image) {
        var theImage = new Image();
        theImage.src = $image.attr("src");
        var imgwidth = theImage.width;
        var imgheight = theImage.height;

        var containerwidth = 460;
        var containerheight = 330;

        if (imgwidth > containerwidth) {
            var newwidth = containerwidth;
            var ratio = imgwidth / containerwidth;
            var newheight = imgheight / ratio;
            if (newheight > containerheight) {
                var newnewheight = containerheight;
                var newratio = newheight / containerheight;
                var newnewwidth = newwidth / newratio;
                theImage.width = newnewwidth;
                theImage.height = newnewheight;
            } else {
                theImage.width = newwidth;
                theImage.height = newheight;
            }
        } else if (imgheight > containerheight) {
            var newheight = containerheight;
            var ratio = imgheight / containerheight;
            var newwidth = imgwidth / ratio;
            if (newwidth > containerwidth) {
                var newnewwidth = containerwidth;
                var newratio = newwidth / containerwidth;
                var newnewheight = newheight / newratio;
                theImage.height = newnewheight;
                theImage.width = newnewwidth;
            } else {
                theImage.width = newwidth;
                theImage.height = newheight;
            }
        }
        $image.css({
            'width': theImage.width,
            'height': theImage.height,
            'margin-top': -(theImage.height / 2) - 10 + 'px',
            'margin-left': -(theImage.width / 2) - 10 + 'px'
        });
    }
});
.slider_overlay {
  z-index: 90;
  background: #111;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.5;
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);
}

/* Image container style */
.slider_container {
  width: 480px;
  height: 350px;
  position: absolute;
  top: 50%;
  margin-top: -175px;
  left: 50%;
  margin-left: -240px;
  z-index: 100;
}
.slider_container img {
  border: 10px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-box-shadow: 1px 1px 10px #000;
  -webkit-box-shadow: 1px 1px 10px #000;
  box-shadow: 1px 1px 10px #000;
}

/* Close button for preview mode */
a.slider_close {
  background: #000 url(http: //tympanus.net/Tutorials/PhotoStack/images/close.png) no-repeat center center;
  cursor: pointer;
  width: 56px;
  height: 56px;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 1000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  opacity: 0.6;
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
}

/* Next photo button for preview mode */
a.slider_next_photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  z-index: 200;
  cursor: pointer;
  background: #000 url(http: //tympanus.net/Tutorials/PhotoStack/images/next_photo.png) no-repeat 50% 50%;
  opacity: 0.6;
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
a.slider_next_photo:hover,
a.slider_close:hover {
  opacity: 0.8;
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);
}

/* Thumbnail slider style */
.slider_show {
  width: 845px;
  height: 300px;
  position: relative;
  margin: 110px auto 0 auto;
}
.slider_show a.next,
.slider_show a.prev {
  position: absolute;
  background-color: #000;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid #232323;
  width: 20px;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  opacity: 0.6;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}
.slider_show a.prev:hover,
.slider_show a.next:hover {
  border: 1px solid #333;
  opacity: 0.9;
}
.slider_show a.disabled,
.slider_show a.disabled:hover {
  opacity: 0.4;
  border: 1px solid #111;
  cursor: default;
}
.slider_show a.prev {
  left: -30px;
  background-image: url(http: //tympanus.net/Tutorials/PhotoStack/images/prev.png);
}
.slider_show a.next {
  right: -30px;
  background-image: url(http: //tympanus.net/Tutorials/PhotoStack/images/next.png);
}
.slider_show .slider_album {
  width: 140px;
  height: 310px;
  padding: 10px;
  background-color: #333;
  border: 1px solid #444;
  position: absolute;
  top: 0;
  text-align: center;
  cursor: pointer;
  -moz-box-shadow: 1px 1px 4px #000;
  -webkit-box-shadow: 1px 1px 4px #000;
  box-shadow: 1px 1px 4px #000;
  -webkit-box-reflect: below 5px 
  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.6, transparent), to(rgb(18, 18, 18)));
}
.slider_show .slider_album:hover {background-color: #383838}
.slider_show .slider_album img {
  height: 90px;
  border: 1px solid #444;
  -moz-box-shadow: 1px 1px 4px #000;
  -webkit-box-shadow: 1px 1px 4px #000;
  box-shadow: 1px 1px 4px #000;
}
.slider_show .slider_album .slider_desc {
  display: block;
  color: #666;
  background: #111 url(http: //tympanus.net/Tutorials/PhotoStack/images/overlay.png) no-repeat bottom right;
  height: 200px;
  margin-top: 10px;
  text-align: left;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #393939;
  -moz-box-shadow: 0 0 2px #000 inset;
  -webkit-box-shadow: 0 0 2px #000 inset;
  box-shadow: 0 0 2px #000 inset;
}
.slider_show .slider_album:hover .slider_desc {background-image: none}
.slider_show .slider_album .slider_desc span {
  display: block;
  margin: 0 10px 10px 10px;
  border-top: 1px solid #333;
  padding-top: 5px;
}
.slider_show .slider_album .slider_desc h2 {
  margin: 10px 10px 0 10px;
  text-align: left;
  padding-bottom: 5px;
  font-weight: normal;
  color: #ddd;
  text-shadow: 0 0 1px #fff;
  border-bottom: 1px solid #000;
}
.slider_show .loading {
  background: #121212 url(http: //tympanus.net/Tutorials/PhotoStack/images/loading.gif) no-repeat 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
}

Terakhir Diperbaharui

    Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
    Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!