Membuat CSS / jQuery Gambar Rotator dengan Deskripsi
Tutorial ini asli diciptakan oleh Soh Tanaka dan diterbitkan kembali pada tahun 2009. Sayangnya demo sejak lama offline dan saya berhasil m...
http://blogsmagazine.blogspot.com/2013/10/membuat-css-jquery-gambar-rotator.html
Tutorial ini asli diciptakan oleh Soh Tanaka dan diterbitkan kembali pada tahun 2009. Sayangnya demo sejak lama offline dan saya berhasil menemukan salinan tua dari kode sumber. Orang-orang di komentar telah meminta untuk rotasi otomatis antara slide dan aku memperbarui kode dengan fitur ini.
Jadi, dalam tutorial ini saya memperkenalkan kembali beberapa kode asli Soh tentang bagaimana membangun rotator otomatis dinamis ini. JQuery yang terkandung dalam file indeks yang sama dan mudah untuk mengikuti. Hal ini juga harus bekerja bahkan menjalankan salinan terbaru dari jQuery di website Anda. Jangan ragu untuk men-download salinan dari kode sumber diperbarui atau memeriksa live demo saya dari link di bawah ini.
Getting Started
Pertama kita perlu membuat dokumen baru index.html yang berisi slider dan JavaScript itu. saya akan masukan salinan lokal jQuery tetapi kita juga bisa menggunakan CDN-hosted version versi gantinya.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Image Rotator w/ Desc - CSS & jQuery Tutorial</title>
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Dokumen ini ditulis menggunakan skema HTML5 dengan hanya dua file eksternal. JQuery perpustakaan dari tutorial asli v1.3.2 yang merupakan salinan jauh lebih tua. Tapi saya uji dengan mengganti dengan v1.10.1 jQuery dan masih berfungsi dengan baik. Kode utama tidak banyak berubah dari rilis yang berbeda tetapi Anda dapat memperbarui animasi dengan cara apapun yang Anda suka..
Sekarang HTML internal sedikit lebih mudah untuk memahami seperti yang dipecah menjadi blok div kecil. Kita dapat menemukan div tunggal dengan kelas. Main_image yang berisi gambar yang lebih besar yang Anda lihat di sebelah kiri. Ini juga memiliki blok untuk teks deskripsi yang akan kembali animasi untuk setiap slide baru.
<div id="main" class="container">
<div class="main_image">
<img src="images/banner01.png" alt="- banner1" />
<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h2>Luigi's Mansion</h2>
<small>08/27/2013</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork By Glenn Jones</a> </p>
</div>
</div>
</div>
Di bawah ini kita menemukan koleksi blok yang lebih kecil yang berisi gambar thumbnail. Hal ini juga memegang gelar untuk foto bersama dengan tanggal publikasi. Informasi ini ditarik keluar melalui jQuery dan kemudian ditambahkan ke dalam wadah gambar utama.
<div class="image_thumb">
<ul>
<li>
<a href="images/banner01.png"><img src="images/banner01_thumb.png" alt="Luigi Mansion" /></a>
<div class="block">
<h2>Luigi's Mansion</h2>
<small>08/27/2013</small>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork by Scott Balmer</a> </p>
</div>
</li>
Sekarang ini adalah salah satu contoh dari daftar item dari set lengkap. Tapi Anda bisa mendapatkan ide dari format yang berisi judul, tanggal, dan deskripsi singkat. Ini semua terkandung dalam div tunggal dengan menggunakan kelas. Image_thumb yang kemudian memegang daftar unordered.
Design Styles
CSS stylesheet cukup khas yang tidak menggunakan sejumlah besar yang di ulang. Saya menghapus semua margin dan padding asli dari unsur-unsur menggunakan pemilih wildcard (*). Utama gambar preview kontainer memiliki banyak gaya tetap untuk menjaga semuanya dalam rangka. Anda mungkin perlu menyesuaikan ukuran ini agar mereka dapat berbaur dengan baik dalam website Anda sendiri.
.main_image {
width: 598px; height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px; margin: 0;
line-height: 1.6em;
}
.block small {
padding: 0 0 0 20px;
background: url(images/icon_cal.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
} Gaya item daftar juga cukup khas yang meliputi kelas melayang sendiri. Hal ini dibangun menggunakan kelas yang akan diterapkan melalui jQuery bukan khas: efek hover. Tapi ini dapat dengan mudah diperbarui jika diperlukan. Namun kelas yang aktif. Masih diperlukan untuk memastikan bahwa kita dapat beralih di antara item yang berbeda secara otomatis.
.image_thumb {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.image_thumb img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul {
margin: 0; padding: 0;
list-style: none;
}
.image_thumb ul li{
margin: 0; padding: 12px 10px;
background: #f0f0f0 url(images/nav_a.gif) repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
background: #ddd;
cursor: pointer;
}
.image_thumb ul li.active {
background: #fff;
cursor: default;
}
html .image_thumb ul li h2 {
font-size: 1.5em;
margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 180px;
}
Building with jQuery
Bagian akhir untuk tutorial ini berkisar pada rotasi gambar. Script ini cukup panjang tapi beberapa kode hanya digandakan menjadi fungsi yang terpisah. Aku akan memecahnya menjadi segmen sehingga segala sesuatu lebih mudah untuk memahami.
var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions
$(document).ready(function() {
// Comment out this line to disable auto-play
intervalID = setInterval(cycleImage, slidetime);
$(".main_image .desc").show(); // Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity
$(".image_thumb ul li:first").addClass('active');
Semua kode ini akan mengeksekusi tepat ketika dokumen telah dimuat. Saya membuat variabel Interval baru yang melacak auto-rotasi. Anda dapat mengedit slidetime menjadi jumlah berapapun dalam milidetik antara slide individu. Garis yang callssetInterval () mungkin komentar untuk menonaktifkan auto-play. Ini baris kode referensi fungsi cycleImage kustom () yang akan saya jelaskan sedikit kemudian.
$(".image_thumb ul li").click(function(){
// Set Variables
var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
var imgDesc = $(this).find('.block').html(); // Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block
if ($(this).is(".active")) { // If it's already active, then...
return false; // Don't click through
} else {
// Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
$(this).addClass('active'); // add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}); Ini blok besar kode menunggu untuk mengeksekusi sampai pengguna mengklik pada item daftar internal. Kami pertama kali menghasilkan beberapa variabel untuk memperbarui URL gambar besar dan HTML deskripsi internal. Jika item daftar saat ini sudah aktif maka kita menggunakan return false untuk menghentikan fungsi. Kalau tidak, kita menghidupkan konten baru ke tempatnya dan kemudian memperbarui. Kelas aktif ke item daftar baru.
Anda juga akan melihat ke arah bawah kita menggunakan hover () metode mendengarkan acara. Untuk menerapkan kelas melayang-layang ke item daftar juga. jQuery memungkinkan chaining beberapa peristiwa yang berbeda bersama-sama ke pemilih yang sama. Tanpa kode kelebihan ini bisa dibaca sebagai $(“.image_thumb ul li”).click().hover() which is completely valid syntax.
Fungsi beralih singkat juga datang setelah itu, tapi ini adalah jQuery sangat dasar yang tidak memerlukan banyak penjelasan. Carilah jQuery. SlideToggle () metode untuk memahami lebih.
// Function to autoplay cycling of images
// Source: http://stackoverflow.com/a/9259171/477958
function cycleImage(){
var onLastLi = $(".image_thumb ul li:last").hasClass("active");
var currentImage = $(".image_thumb ul li.active");
if(onLastLi){
var nextImage = $(".image_thumb ul li:first");
} else {
var nextImage = $(".image_thumb ul li.active").next();
}
$(currentImage).removeClass("active");
$(nextImage).addClass("active");
// Duplicate code for animation
var imgAlt = $(nextImage).find('img').attr("alt");
var imgTitle = $(nextImage).find('a').attr("href");
var imgDesc = $(nextImage).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
};
Sekarang fungsi terakhir ini cycleImage () hanya digunakan oleh variabel slider otomatis. Ingat jika Anda ingin menonaktifkan fungsi ini hanya komentar pada variabel intervalID yang memanggil setInterval () metode. Saya sedang mencari solusi dasar dan menemukan jawaban ini bermanfaat pada Stack Overflow. Saya sudah sesuaikan variabel untuk benar menargetkan elemen-elemen dalam tutorial ini dan itu semua siklus sempurna bahkan kembali ke awal.
Banyak dari kode animasi telah digandakan dari aslinya klik event handler. onLastLi adalah variabel yang memeriksa jika item yang terakhir dalam daftar yang sedang aktif. Jika demikian maka rotator Saya perlu menargetkan item pertama pindah kembali ke awal. The auto-rotate sistem hanya membutuhkan currentImage dengan anextImage dan dapat berjalan tanpa batas tanpa penundaan.
Conclusion
Ada banyak auto-rotating plugin jQuery di luar sana tetapi banyak memiliki antarmuka pra-format mereka sendiri. Ini bisa menjadi besar jika cocok dengan tata letak Anda sendiri. Tapi kadang-kadang jauh lebih mudah untuk kerajinan rotator Anda sendiri dari awal, seperti yang telah kita lakukan di sini.
Saya berharap tutorial ini dapat membuktikan berguna untuk pengembang lain yang membutuhkan solusi untuk rotasi gambar dinamis. Banyak kode jQuery mudah untuk transportasi lebih ke dalam proyek Anda sendiri jika Anda dapat memperbarui pemilih. Juga merasa bebas untuk men-download salinan kode tutorial dan menggunakan demo ini sebagai template untuk penataan rotator gambar yang unik Anda.
Sumber : 
DesignM.ag
DesignM.ag "THANKS FOR COMING"
Nyimak ya gan ..
ReplyDeleteBtw ini bisa ga buat wordpress ga gan ..
Suport kok gan ..
DeleteMonggo di coba gan ...
Izin sedot materinya Gan ..
ReplyDeleteSilahkan gan :D
Delete