در این آموزش نحوه ایجاد یک اسلایدر شبیه اسلایدر iTunes را آموزش داده ایم.
اسلایدر مورد علاقه من اسلایدری است که بتوان عکس های اسلایدر را جداگانه دید. در این آموزش این کار را بصورت بسیار ساده انجام میدهیم. اگر میخواهید این آموزش را به یک اسلایدر حرفه ای تبدیل کنید باید روی تک تک عکس ها امکان کلیک و تغییر اسلایدر را اضافه کنید.
مشاهده نتیجه
قبل از هر کاری لینک بالا را باز کنید و ببینید آیا از اسلایدر ما خوشتان می آید یا خیر .
تصویر زیر تصویر کلی از اسلایدری است که در این آموزش ایجاد خواهیم کرد.
اهداف کد نویسی برای این اسلایدر زیبا
قبل از شروع کد نویسی ، در زیر کمی در باره کاری که میخواهیم با کد ها انجام دهیم حرف زده ایم.
کاهش فاصله بین عکس ها برای ایجاد اسلایدری با اندازه یکی از تصاویر و ایجاد محو شدگی هنگام حرکت از یکی به دیگری
امکان چرخیدن عکس ها برای نمایش عکس بعدی
امکان حرکت دستی اسلایدر
امکان حرکت با کلیک روی دکمه next
به حداقل رساند کد های DOM برای نشان دادن میزان حرفه ای بودن خودمان
گام های این تکنیک :
گام 1: ایجاد یک CSS برای کانتینر گالری ، تمام عکس ها درون این کانتینر قرار گرفته و فضایی برابر با یک عکس را اشغال می کنند.
گام 2: تنظیم CSS برای نمایش عکس های بند انگشتی در کانتینر تا تنها عکس های مد نظر در کانتینر به نمایش گذاشته شوند.
گام 3: چرخیدن بین عکس ها و دادن یک کلاس به هر عکس بند انگشتی و عکس اسلایدر براساس ایندکس های عددی برای شناسایی آنها ، برای مثال ، هر عکس یک کلاس بصورت thumb-xx به خود میگیرد، XX اعداد متوالی خواهد بود.
گام 4: هنگامی که دکمه Next زده شد، عکس های بند انگشتی یکی به سمت بالا حرکت کرده و عکس بعدی به نمایش گذاشته می شود.
کد های HTML این اسلایدر
در زیر کدهای لازم برای ایجاد یک اسلایدر را مشاهده می کنید:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>iTunes slider</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<h1>Create a simple iTunes-esque slider with jQuery</h1>
<div>by Siddharth for the lovely folks at Net Tuts</div>
<p>A simple slider/slideshow which mostly emulates the one on iTunes barring a few changes. Click the down button to cycle the images.</p>
<div id="gallery">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
</div>
<div id="thumbs">
<img src="img/11.jpg" />
<img src="img/22.jpg" />
<img src="img/33.jpg" />
<img src="img/44.jpg" />
<img src="img/55.jpg" />
<img src="img/66.jpg" />
</div>
<a href="#" id="next"></a>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mocha.js"></script>
</body>
</html>
در کد های بالا میتوان دو کانتینر را که دارای عکس های زیادی هستند را تشخیص داد. یکی از این دو کانتینر وظیفه نگهداری عکس های بزرگ و دیگری وظیفه نگهداری عکس ها بند انگشتی را دارد. با دادن ID به این دو کانتینر امکان دسترسی از طریق جاوا اسکریپت را ساده تر کرده ایم. در کد های بالا تگی را میبینید که نقش دکمه NEXT را برای ما بازی خواهد کرد.
ما در ابتدا کتابخانه جی کوئری را ایجاد و در آخر اسکریپت های خودمان را اضافه می کنیم.
تا اینجای کار عکس های ما بصورت زیر خواهند بود.
گام 2: استایل های CSS
*{
margin: 0;
padding: 0;
border: 0 none;
outline: 0;
}
body{
font-family: "Lucida Grande", "Verdana", sans-serif;
font-size: 12px;
}
p{
margin: 20px 0 40px 0;
}
h1{
font-size: 30px;
font-family: "Myriad Pro", "Lucida Grande", "Verdana", sans-serif;
padding: 0;
margin: 0;
}
h2{
font-size: 20px;
}
#container{
width: 900px;
margin-left: auto;
margin-right: auto;
padding: 50px 0 0 0;
position: relative;
}
img{
display: block;
}
#gallery, #thumbs{
float: left;
}
#gallery{
width: 800px;
height: 300px;
overflow: hidden;
}
#gallery img{
position: absolute;
}
#thumbs{
width: 100px;
height: 300px;
overflow: hidden;
}
#next{
display: block;
width: 47px;
height: 43px;
background: url(img/arrow.png);
position: relative;
top: 257px;
left: 855px;
}
#next:hover{
background: url(img/arrowmo.png);
}
.clear{
clear: both;
}
از مزایای CSS در این است که نیازی به توضیحات زیاد ندارد.
ما در ابتدا به #gallery img صفت position: absolute به این ترتیب تمام عکس ها روی هم قرار می گیرند بجای اینکه زیر هم باشند. بعدا با تغییر OPACITY تصمیم می گیریم که کدام عکس به نمایش در بیاید.
ما به عکس های بند انگشتی ارتفاع 300px داده ایم. اینکار به این دلیل است که عکس های بند انگشتی 100Px ارتفاع دارند و ارتفاع 300 سه عکس را برای ما نمایان خواهد کرد.
ما سپس مقدار صفت overflow را روی hidden قرار داده ایم تا مطمئن شویم تعداد عکس بیشتری از آنچه میخواهیم نمایش داده نمی شود.
تا اینجای کار تصاویر ما به این صورت در آمده اند:
افزودن کد های جاوا اسکریپت
در مقاله اصلی پیشنهاد داده کتابخانه جی کوئری را از روی سایت گوگل استفاده کنید. ما خلاف آن را پیشنهاد میدهیم بارها دیده شده که در ایران این صفحه فیلتر شده و تمام سایت هایی که از آن استفاده می کنند با مشکل لود شدن اسلایدر مواجه شده اند .
گام اول در جی کوئری تعریف متغییر های لازم است.
var images = $("#gallery img");
var thumbs = $("#thumbs img");
var index = 0;
قطعه کد بالا برای ما کد عکس های اسلایدر و عکس های بند انگشتی را درون یک متغییر قرار میدهد. همچنین در کد بالا یک INDEX مشاهده می کنید که برابر با عدد صفر است.
for (i=0; i<thumbs.length; i++)
{
$(thumbs[i]).addClass("thumb-"+i);
$(images[i]).addClass("image-"+i);
}
در گام بعد ما با تگ های image-xx بین تصاویر جابجا خواهیم شد. اینکار به ما اجازه میدهد که به هر تصویر بند انگشتی جداگانه رجوع کنیم.
به دکمه NEXT یک عملگر متصل کنید.
در کد زیر ما برای دکمه NEXT عملگر کلیک را اضافه کرده ایم.
تک خط بالا برای قابلیت کلیک کاملا ضروری است ولی باید به Sift یک عملگر اضافه کنیم اینکار با این کدها صورت می گیرید.
function sift()
{
if (index<(thumbs.length-1)) {index+=1 ; }
else {index=0}
show (index);
}
این کدها بسیار ساده نوشته شده اند ، ما فقط باید چک کنیم ببیینیم کدام تگ ها در حال حاضر انتخاب شده اند. اگر تگ آخر انتخاب شده بود ما index را ریست می کنیم. به این ترتیب به عکس اول باز می گردیم.
در گام بعد با عملگر Show را فراخوانی می کنیم. که متغییر index را بصورت پارامتر در میآورد.
استفاده از منطق اصلی برای حرکت عکس ها :
function show(num)
{
images.fadeOut(400);
$(".image-"+num).stop().fadeIn(400);
var scrollPos = (num+1)*imgHeight;
$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
}
عملگر SHOW در این آموزش کار اصلی را انجام میدهد. کد بالا را در زیر توضیح داده ایم.
اول ، ما تمام عکس های درون تگ Gallery را مخفی کرده ایم. بعد ، عکس دلخواه خود را ظاهر می کنیم.از آنجا که هر عکس با کلاس خود قابل فراخوانی است. ما هم به Position index عسک ها دسترسی داریم. کافیست که از انتخاب گر ".image-"+num استفاده کنیم.
بعد، باید عکس بند انگشتی را اسکرول کنیم. با اینکار به عکس بالاتر دسترسی خواهیم داشت. برای اینکار دو راهکار هست.
اول از صفت jQuery's position استفاده کنیم. اینکار مکان فعلی تگ را به ما نشان میدهد . این مکان وابسته به مکان والد تگ میباشد.
راهکار دوم که ساده تر است ، این است که ما میدانیم که ارتفاع عکس های بند انگشتی چقدر است. ما تنها کافیست المان دلخواه را پیدا کرده و از بالا مقدار ارتفاع آن را به تگ خود بیافزاییم.
var imgHeight = thumbs.attr("height");
کد بالا به ما اجازه میدهد که ارتفاع عکس بند انگشتی را مشخص کنیم. یادتان باشد که ارتفاع مجموع عکس ها را هم لازم داریم:
var scrollPos = (num+1)*imgHeight;
حالا باید مقدار حرکت عکس های بند انگشتی را محاسبه کنیم. از آنجا که ما عکس بعدی را میخواهیم نشان دهیم باید به مقدار بدست آمده اندازه یک عکس را اضافه کنیم.
در کد زیر ما عکس ها را به حرکت در میآوریم.
$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
حقه ای برای تکرار عکس ها
در این آموزش برای تکرار عکس ها آنها را کپی می کنیم. این کد بصورت زیر میباشد.
thumbs.slice(0,3).clone().appendTo("#thumbs");
این خط کد سه عکس اول را گرفته و به آخر لیست کپی می کند. متد Slice سه عکس اول را دریافت کرده متد Clone سه تگ اول را کپی می کند. در آخر هم کد appendTo آنها را به تگ Thumb وصل می کند.
ما نمی توانیم تنها از متد appendTo استفاده ک
نیم ، بلکه اول باید آنها را از مکان اولیه خود کپی نماییم . برای همین این کد را به این صورت بکار برده ایم.
اسلایدر را بصورت اتوماتیک در بیاوریم
برای اینکه اسلایدر بدون کلیک روی دکمه ها هم بگردد، ما سرعت گردش را بصورت microsecond در میآوریم. خط زیر اینکار را انجام میدهد:
setInterval(sift, 8000);
در کد بالا، ما عملگر Sift را هر 8 ثانیه تکرار می کنیم.
نمایش عکس بعد
برای نمایش عکس بعد متد Show را برای عکس بعدی فراخوانی می کنیم.
کد های نهایی ما را مشاهده کنید.
$(document).ready(function()
{
var index = 0;
var images = $("#gallery img");
var thumbs = $("#thumbs img");
var imgHeight = thumbs.attr("height");
thumbs.slice(0,3).clone().appendTo("#thumbs");
for (i=0; i<thumbs.length; i++)
{
$(thumbs[i]).addClass("thumb-"+i);
$(images[i]).addClass("image-"+i);
}
$("#next").click(sift);
show(index);
setInterval(sift, 8000);
function sift()
{
if (index<(thumbs.length-1)){index+=1 ; }
else {index=0}
show (index);
}
function show(num)
{
images.fadeOut(400);
$(".image-"+num).stop().fadeIn(400);
var scrollPos = (num+1)*imgHeight;
$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
}
});
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد