آموزش اسکریپت اسلایدر با تصاویر بند انگشتی (thumbnail)

در این آموزش jquery، یک اسلایدر ساده را به شما آموزش خواهیم داد که در آن از تصاویر بندانگشتی یا همان thumbnail ها نیز استفاده شده است.

مشاهده دمو

اسکریپت های مورد نیاز این اسلایدر را بصورت زیر در header سایت فراخوانی میکنیم :

[free_vip]

[html]
<script src=”js/jquery-1.8.2.min.js” type=”text/javascript”></script>
<script src=”js/jquery.carouFredSel-6.0.4-packed.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
$(‘#thumbs’).carouFredSel({
synchronise: [‘#images’, false, true],
auto: false,
width: 450,
items: {
visible: 3,
start: -1
},
scroll: {
onBefore: function( data ) {
data.items.old.eq(1).removeClass(‘selected’);
data.items.visible.eq(1).addClass(‘selected’);
}
},
prev: ‘#prev’,
next: ‘#next’
});

$(‘#images’).carouFredSel({
auto: false,
items: 1,
scroll: {
fx: ‘fade’
}
});

$(‘#thumbs img’).click(function() {
$(‘#thumbs’).trigger( ‘slideTo’, [this, -1] );
});
$(‘#thumbs img:eq(1)’).addClass(‘selected’);
});
</script>
[/html]

نکته : مقدار visible تعداد نمایش تصاویر thumbnail را مشخص میکند و شما با مقادیر prev و next میتوانید کلاس یا آیدی مورد نظر خود را به دکمه های قبلی و بعدی اسلایدر بدهید.

کدهای css نیز به صورت زیر میباشند :

[css]
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 600px;
background-color: #e6e6e6;
}
#slider-wrapper {
border: 1px solid #ddd;
background-color: #fff;
width: 450px;
height: 575px;
margin: -300px 0 0 -225px;
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
#slider-wrapper img {
display: block;
float: left;
}
#images, #thumbs {
height: 350px;
overflow: hidden;
}
#images {
width: 350px;
margin: 50px 0 25px 50px;
}
#thumbs {
width: 450px;
height: 100px;
}
#thumbs img {
border: 1px solid #ccc;
padding: 14px;
margin: 0 12px 0 12px;
cursor: pointer;
width:70px;
height:70px;
}
#images img {
width:350px;
height:350px;
}
#thumbs img.selected, #thumbs img:hover {
border-color: #333;
}
#slider-wrapper #prev, #slider-wrapper #next {
width: 15px;
height: 21px;
display: block;
text-indent: -999em;
background: transparent url(images/carousel_control.png) no-repeat 0 0;
position: absolute;
bottom: 85px;
}
#slider-wrapper #prev {
background-position: 0 0;
left: 15px;
}
#slider-wrapper #prev:hover {
left: 14px;
}
#slider-wrapper #next {
background-position: -18px 0;
right: 15px;
}
#slider-wrapper #next:hover {
right: 14px;
}
[/css]

کدهای html این اسلایدر را بصورت زیر باید بنویسید :

[html]

<div id=”slider-wrapper”>
<div id=”images”>
<img src=”images/large/ek-aanhanger.gif” alt=”ek-aanhanger” />
<img src=”images/large/ek-alien.gif” alt=”ek-alien” />
<img src=”images/large/ek-artsen.gif” alt=”ek-artsen” />
<img src=”images/large/ek-brandweer.gif” alt=”ek-brandweer” />
</div><!–#images–>
<div id=”thumbs”>
<img src=”images/small/ek-aanhanger.gif” alt=”ek-aanhanger” />
<img src=”images/small/ek-alien.gif” alt=”ek-alien” />
<img src=”images/small/ek-artsen.gif” alt=”ek-artsen” />
<img src=”images/small/ek-brandweer.gif” alt=”ek-brandweer” />
</div><!–#thumbs–>
<a id=”prev” href=”#”></a> <a id=”next” href=”#”></a> </div>
<!–#slider-wrapper–>

[/html]

تصاویر بندانگشتی را باید در بین تگ thumbs قرار دهید.

شما میتوانید فایل کامل این آموزش را از لینک زیر دانلود کنید :

[/free_vip]