آموزش اسکریپت یک اسلایدر زیبا (Camera slideshow)

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

مشاهده دمو

[free_vip]

در ابتدا فایل های css و اسکریپت های مورد نیاز را در بین تگ <head> اضافه میکنیم :

[html]

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”camera.css” type=”text/css” media=”all” />
<script type=’text/javascript’ src=’js/jquery-core.min.js’></script>
<script type=’text/javascript’ src=’js/jquery.easing.1.3.js’></script>
<script type=’text/javascript’ src=’js/camera.min.js’></script>
<script>
jQuery(function(){

jQuery(‘#camera_wrap_1’).camera({
thumbnails: true,
height: ‘450px’,
loader: ‘bar’,
barDirection: ‘rightToLeft’
});
});
</script>

[/html]

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

[html]

<div class=”fluid_container” dir=”ltr”>
<div class=”camera_wrap camera_azure_skin” id=”camera_wrap_1″>
<div data-thumb=”images/slides/thumbs/slide2.jpg” data-src=”images/slides/slide2.jpg”>
<div class=”camera_caption fadeFromBottom”>یک متن دلخواه در این قسمت نوشته میشود</div>
</div>
<div data-thumb=”images/slides/thumbs/slide3.jpg” data-src=”images/slides/slide3.jpg”>
<div class=”camera_caption fadeFromBottom”>یک متن دلخواه در این قسمت نوشته میشود</div>
</div>
<div data-thumb=”images/slides/thumbs/slide4.jpg” data-src=”images/slides/slide4.jpg”>
<div class=”camera_caption fadeFromBottom”> یک متن در این قسمت نوشته میشود</em> </div>
</div>
</div>
<!–#camera_wrap_1–>
</div>
<!– .fluid_container –>

[/html]

دقت کنید که این اسلایدر تنظیمات مختلفی دارد. اگر بخواهید در قسمت pagination آن عکس های کوچک از هر اسلاید نمایش داده شود، علاوه بر اینکه باید مقدار thumbnails در قسمت فراخوانی اسکریپت true باشد، باید در قسمت html مقدار صفت data-thumb را برابر آدرس عکسی که میخواهید نمایش داده شود قرار دهید.

مقدار صفت data-src آدرس عکس هر اسلاید را نشان میدهد. اگر میخواهید هر اسلاید کپشن داشته باشد باید تگ div با کلاس camera_caption را هم بین هر اسلاید قرار دهید.

کدهای css مربوط به این اسلایدر به صورت زیر است :

[css]
.camera_wrap a, .camera_wrap img, .camera_wrap ol, .camera_wrap ul, .camera_wrap li, .camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td .camera_thumbs_wrap a, .camera_thumbs_wrap img, .camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li, .camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td {
background: none;
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
list-style: none
}
.camera_wrap {
display: none;
float: left;
position: relative;
z-index: 0;
}
.camera_wrap img {
max-width: none!important;
}
.camera_fakehover {
height: 100%;
min-height: 60px;
position: relative;
width: 100%;
z-index: 1;
}
.camera_wrap {
width: 100%;
}
.camera_src {
display: none;
}
.cameraCont, .cameraContents {
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.cameraSlide {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.cameraContent {
bottom: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.camera_target {
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: left;
top: 0;
width: 100%;
z-index: 0;
}
.camera_overlayer {
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 0;
}
.camera_target_content {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.camera_target_content .camera_link {
display: block;
height: 100%;
text-decoration: none;
}
.camera_loader {
background: #fff url(images/camera-loader.gif) no-repeat center;
background: rgba(255, 255, 255, 0.9) url(images/camera-loader.gif) no-repeat center;
border: 1px solid #ffffff;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
height: 36px;
left: 50%;
overflow: hidden;
position: absolute;
margin: -18px 0 0 -18px;
top: 50%;
width: 36px;
z-index: 3;
}
.camera_bar {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 3;
}
.camera_thumbs_wrap.camera_left .camera_bar, .camera_thumbs_wrap.camera_right .camera_bar {
height: 100%;
position: absolute;
width: auto;
}
.camera_thumbs_wrap.camera_bottom .camera_bar, .camera_thumbs_wrap.camera_top .camera_bar {
height: auto;
position: absolute;
width: 100%;
}
.camera_nav_cont {
height: 65px;
overflow: hidden;
position: absolute;
right: 9px;
top: 15px;
width: 120px;
z-index: 4;
}
.camera_caption {
bottom: 0;
display: block;
position: absolute;
width: 100%;
}
.camera_caption > div {
padding: 10px 20px;
}
.camerarelative {
overflow: hidden;
position: relative;
}
.imgFake {
cursor: pointer;
}
.camera_prevThumbs {
bottom: 4px;
cursor: pointer;
left: 0;
position: absolute;
top: 4px;
visibility: hidden;
width: 30px;
z-index: 10;
}
.camera_prevThumbs div {
background: url(images/camera_skins.png) no-repeat -160px 0;
display: block;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 30px;
}
.camera_nextThumbs {
bottom: 4px;
cursor: pointer;
position: absolute;
right: 0;
top: 4px;
visibility: hidden;
width: 30px;
z-index: 10;
}
.camera_nextThumbs div {
background: url(images/camera_skins.png) no-repeat -190px 0;
display: block;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 30px;
}
.camera_command_wrap .hideNav {
display: none;
}
.camera_command_wrap {
left: 0;
position: relative;
right:0;
z-index: 4;
}
.camera_wrap .camera_pag .camera_pag_ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.camera_wrap .camera_pag .camera_pag_ul li {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
height: 16px;
margin: 20px 5px;
position: relative;
text-align: left;
text-indent: -9999px;
width: 16px;
}
.camera_commands_emboss .camera_pag .camera_pag_ul li {
-moz-box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.camera_wrap .camera_pag .camera_pag_ul li > span {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 8px;
left: 4px;
overflow: hidden;
position: absolute;
top: 4px;
width: 8px;
}
.camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span {
-moz-box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
}
.camera_pag_ul li img {
display: none;
position: absolute;
}
.camera_pag_ul .thumb_arrow {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
top: 0;
left: 50%;
margin-left: -4px;
position: absolute;
}
.camera_prev, .camera_next, .camera_commands {
cursor: pointer;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 40px;
z-index: 2;
}
.camera_prev {
left: 0;
}
.camera_prev > span {
background: url(images/camera_skins.png) no-repeat 0 0;
display: block;
height: 40px;
width: 40px;
}
.camera_next {
right: 0;
}
.camera_next > span {
background: url(images/camera_skins.png) no-repeat -40px 0;
display: block;
height: 40px;
width: 40px;
}
.camera_commands {
right: 41px;
}
.camera_commands > .camera_play {
background: url(images/camera_skins.png) no-repeat -80px 0;
height: 40px;
width: 40px;
}
.camera_commands > .camera_stop {
background: url(images/camera_skins.png) no-repeat -120px 0;
display: block;
height: 40px;
width: 40px;
}
.camera_wrap .camera_pag .camera_pag_ul li {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
height: 16px;
margin: 20px 5px;
position: relative;
text-indent: -9999px;
width: 16px;
}
.camera_thumbs_cont {
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
overflow: hidden;
position: relative;
width: 100%;
}
.camera_commands_emboss .camera_thumbs_cont {
-moz-box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow:
0px 1px 0px rgba(255, 255, 255, 1),  inset 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.camera_thumbs_cont > div {
float: left;
width: 100%;
}
.camera_thumbs_cont ul {
overflow: hidden;
padding: 3px 4px 8px;
position: relative;
text-align: center;
}
.camera_thumbs_cont ul li {
display: inline;
padding: 0 4px;
}
.camera_thumbs_cont ul li > img {
border: 1px solid;
cursor: pointer;
margin-top: 5px;
vertical-align:bottom;
}
.camera_clear {
display: block;
clear: both;
}
.showIt {
display: none;
}
.camera_clear {
clear: both;
display: block;
height: 1px;
margin: -1px 0 25px;
position: relative;
}
/**************************
*
*    COLORS & SKINS
*
**************************/
.pattern_1 .camera_overlayer {
background: url(images/patterns/overlay1.png) repeat;
}
.pattern_2 .camera_overlayer {
background: url(images/patterns/overlay2.png) repeat;
}
.pattern_3 .camera_overlayer {
background: url(images/patterns/overlay3.png) repeat;
}
.pattern_4 .camera_overlayer {
background: url(images/patterns/overlay4.png) repeat;
}
.pattern_5 .camera_overlayer {
background: url(images/patterns/overlay5.png) repeat;
}
.pattern_6 .camera_overlayer {
background: url(images/patterns/overlay6.png) repeat;
}
.pattern_7 .camera_overlayer {
background: url(images/patterns/overlay7.png) repeat;
}
.pattern_8 .camera_overlayer {
background: url(images/patterns/overlay8.png) repeat;
}
.pattern_9 .camera_overlayer {
background: url(images/patterns/overlay9.png) repeat;
}
.pattern_10 .camera_overlayer {
background: url(images/patterns/overlay10.png) repeat;
}
.camera_caption {
color: #fff;
}
.camera_caption > div {
background: #000;
background: rgba(0, 0, 0, 0.8);
}
.camera_wrap .camera_pag .camera_pag_ul li {
background: #b7b7b7;
}
.camera_wrap .camera_pag .camera_pag_ul li:hover > span {
background: #b7b7b7;
}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {
background: #434648;
}
.camera_pag_ul li img {
border: 4px solid #e6e6e6;
-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
}
.camera_pag_ul .thumb_arrow {
border-top-color: #e6e6e6;
}
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands, .camera_thumbs_cont {
background: #d8d8d8;
background: rgba(216, 216, 216, 0.85);
}
.camera_wrap .camera_pag .camera_pag_ul li {
background: #b7b7b7;
}
.camera_thumbs_cont ul li > img {
border-color: 1px solid #000;
}
/*AZURE SKIN*/
.camera_azure_skin .camera_prevThumbs div {
background-position: -160px -240px;
}
.camera_azure_skin .camera_nextThumbs div {
background-position: -190px -240px;
}
.camera_azure_skin .camera_prev > span {
background-position: 0 -240px;
}
.camera_azure_skin .camera_next > span {
background-position: -40px -240px;
}
.camera_azure_skin .camera_commands > .camera_play {
background-position: -80px -240px;
}
.camera_azure_skin .camera_commands > .camera_stop {
background-position: -120px -240px;
}

@media only screen and (max-width : 980px) {
.camera_wrap img { width:100% !important; margin:0 !important;}
}

[/css]

این اسلایدر آپشن های مختلفی دارد که میتوانید با تنظیم آنها، اسلایدرهای متفاوتی برای وب سایت خود طراحی کنید.

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

 

[/free_vip]

به این صفحه رتبه دهید

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان
Scroll to Top