مطالب عمومی

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

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

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

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

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

1087 نفر
9 دقیقه
بروزرسانی در: آذر 1, 1400

فهرست مطالب

استفاده از اسلایدرها در وب سایت ها،  یکی از روش های نمایش مطالب مهمی است که باید به کاربران نمایش داده شود. در این آموزش 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]

به این صفحه رتبه دهید
بدون دیدگاه
انتشار: مهر 20, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

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

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