مطالب عمومی

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

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

1709 نفر
3 دقیقه
بروزرسانی در: آبان 9, 1400

فهرست مطالب

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

Untitled-1

مشاهده دمو

اسکریپت های مورد نیاز این اسلایدر را بصورت زیر در 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]

4.5/5 - (2 امتیاز)
3 دیدگاه
انتشار: آذر 16, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا