qstring chop
Creating photo album with jQuery Chop Slider Today I will tell you about new impressive jQuery slider – Chop. This slider have already had quite 200 different transition effects. Here are many 2D and 3D effects. Plus, here are you can find even few NonCss3 effects (to old IE browsers) and five effects for mobile browsers (for cellphones). Plus, we can create our own new transitions (if you want).
使用jQuery Chop Slider创建相册今天，我将向您介绍新的令人印象深刻的jQuery滑块– Chop。 该滑块已经具有200种不同的过渡效果。 这里有许多2D和3D效果。 另外，在这里，您甚至可以找到很少的NonCss3效果(对于旧的IE浏览器)和五个针对移动浏览器的效果(对于手机)。 另外，我们可以创建自己的新过渡(如果需要)。
Here are links to demo and downloadable package:
以下是演示和可下载软件包的链接：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, lets download the example files and goto coding !
好，让我们下载示例文件并进行编码！
步骤1. HTML (Step 1. HTML)
index.html (index.html)
Here are HTML source code of our Chop photo slider.
这是“印章”照片滑块HTML源代码。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Creating photo album with jQuery Chop Slider | Script Tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/chopslider.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.id.chopslider-2.2.0.free.min.js"></script>
<script src="js/jquery.id.cstransitions-1.2.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<header>
<h2>Creating photo album with jQuery Chop Slider</h2>
<a href="https://www.script-tutorials.com/creating-photo-album-with-jquery-chop-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="wrapper">
<div class="s-shadow-b"></div>
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div>
<div class="slide"> <img src="slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div>
<div class="slide"> <img src="slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div>
<div class="slide"> <img src="slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div>
<div class="slide"> <img src="slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div>
<div class="slide"> <img src="slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div>
<div class="slide"> <img src="slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div>
</div>
<div class="pagination">
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Thailand, There are very many different ATM in one place</div>
<div class="sl-descr">All city colour is bright, nothing black</div>
<div class="sl-descr">Floating market. Shopping on river</div>
<div class="sl-descr">Sunset on Koh Phangan island</div>
<div class="sl-descr">Shortly before sunset</div>
<div class="sl-descr">Good sculpture on Koh Samui island</div>
<div class="sl-descr">That is such cute barmaid you can see here</div>
</div>
<div class="caption"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Creating photo album with jQuery Chop Slider | Script Tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/chopslider.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.id.chopslider-2.2.0.free.min.js"></script>
<script src="js/jquery.id.cstransitions-1.2.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<header>
<h2>Creating photo album with jQuery Chop Slider</h2>
<a href="https://www.script-tutorials.com/creating-photo-album-with-jquery-chop-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</header>
<div class="container">
<div class="wrapper">
<div class="s-shadow-b"></div>
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div>
<div class="slide"> <img src="slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div>
<div class="slide"> <img src="slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div>
<div class="slide"> <img src="slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div>
<div class="slide"> <img src="slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div>
<div class="slide"> <img src="slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div>
<div class="slide"> <img src="slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div>
</div>
<div class="pagination">
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
<span class="slider-pagination"></span>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Thailand, There are very many different ATM in one place</div>
<div class="sl-descr">All city colour is bright, nothing black</div>
<div class="sl-descr">Floating market. Shopping on river</div>
<div class="sl-descr">Sunset on Koh Phangan island</div>
<div class="sl-descr">Shortly before sunset</div>
<div class="sl-descr">Good sculpture on Koh Samui island</div>
<div class="sl-descr">That is such cute barmaid you can see here</div>
</div>
<div class="caption"></div>
</div>
</div>
</body>
</html>
All slides wrap into own DIV parent elements with class name ‘slide’. Pay attention, that we have to create same amount of slider-pagination elements as amount of slider. Same for description.
所有幻灯片都包裹在自己的DIV父元素中，类名称为“ slide”。 请注意，我们必须创建与滑块数量相同数量的滑块-分页元素。 相同的描述。
步骤2. CSS (Step 2. CSS)
css / layout.css和css / chopslider.css (css/layout.css and css/chopslider.css)
First file is layout of our demo page. Second one is CSS file of Chop slider. You can customize it as you like. Right now it contain next styles:
第一个文件是我们的演示页面的布局。 第二个是Chop滑块CSS文件。 您可以根据需要自定义它。 现在，它包含以下样式：
.wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:960px;
height:300px;
display:block;
padding-top:150px;
padding-bottom:120px;
background:url(../images/podium.png) no-repeat bottom;
z-index:2;
}
.wrapper2 {
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:960px;
height:300px;
display:block;
z-index:2;
text-align:center;
padding-bottom:50px;
}
.wrapper2 a {
display:inline-block;
padding:0px 5px;
background:#fff;
border:1px solid #ccc;
border-radius:3px;
text-decoration:none;
margin:0px 5px;
}
.wrapper2 .active-transition {
background:#222;
color:#fff;
}
/*---------- Slider ----------- */
/*---------- Left and Right Triggers ----------- */
#slide-prev {
position:absolute;
width:21px;
height:33px;
bottom:39px;
left:26px;
z-index:4;
background:url(../images/sl-control.png) left top no-repeat;
}
#slide-next {
position:absolute;
width:21px;
height:33px;
bottom:39px;
right:26px;
z-index:4;
background:url(../images/sl-control.png) left bottom no-repeat;
}
/*---------- Shadow, just for styling ----------- */
.s-shadow-b{
background:url(../images/shadow.png) no-repeat top;
width:876px;
height:55px;
position:absolute;
left:42px;
bottom:60px;
z-index:1;
}
/*---------- Main Slider Container----------- */
#slider {
width:900px;
height:300px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
display:block;
}
/* Every slide must be hidden by default */
.slide { display:none; }
/*
And only the slide with "cs-activeSlide" class must be visible!
!Reserved Class name. Required class!
*/
.cs-activeSlide { display:block; }
/* Container with caption's text. Must be hidden */
.slide-descriptions {
display:none;
}
/* Container with caption, must be hidden by default */
.caption {
background: url("../images/d-bg.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
display: none;
height: 280px;
padding: 20px;
position: absolute;
right: 40px;
top: 140px;
width: 180px;
z-index: 3;
}
.full-3D {
right: 40px;
top: 580px;
width: 840px;
height:20px;
}
/* Container with Pagination buttons */
.pagination {
bottom: 50px;
left: 345px;
margin-top: 50px;
position: absolute;
text-align: center;
}
.slider-pagination {
display:inline-block;
width:15px;
height:10px;
background:url(../images/navi.png) no-repeat left bottom;
margin:0 10px;
cursor:pointer;
position:relative;
z-index:200;
}
/* This is a required class for the "Active" pagination button. ! Reserved Class Name ! */
.cs-active-pagination {
background:url(../images/navi.png) no-repeat left top;
}
/* Multiple SLiders */
.slider-2 {
padding-top:0;
margin-top:20px;
}
#slider-1, #slider-2 {
width:900px;
height:300px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
display:block;
}
.cs-activeSlide-2 {
display:block
}
.cs-active-pagination-2 {
background:url(../images/navi.png) no-repeat left top;
}
.wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:960px;
height:300px;
display:block;
padding-top:150px;
padding-bottom:120px;
background:url(../images/podium.png) no-repeat bottom;
z-index:2;
}
.wrapper2 {
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:960px;
height:300px;
display:block;
z-index:2;
text-align:center;
padding-bottom:50px;
}
.wrapper2 a {
display:inline-block;
padding:0px 5px;
background:#fff;
border:1px solid #ccc;
border-radius:3px;
text-decoration:none;
margin:0px 5px;
}
.wrapper2 .active-transition {
background:#222;
color:#fff;
}
/*---------- Slider ----------- */
/*---------- Left and Right Triggers ----------- */
#slide-prev {
position:absolute;
width:21px;
height:33px;
bottom:39px;
left:26px;
z-index:4;
background:url(../images/sl-control.png) left top no-repeat;
}
#slide-next {
position:absolute;
width:21px;
height:33px;
bottom:39px;
right:26px;
z-index:4;
background:url(../images/sl-control.png) left bottom no-repeat;
}
/*---------- Shadow, just for styling ----------- */
.s-shadow-b{
background:url(../images/shadow.png) no-repeat top;
width:876px;
height:55px;
position:absolute;
left:42px;
bottom:60px;
z-index:1;
}
/*---------- Main Slider Container----------- */
#slider {
width:900px;
height:300px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
display:block;
}
/* Every slide must be hidden by default */
.slide { display:none; }
/*
And only the slide with "cs-activeSlide" class must be visible!
!Reserved Class name. Required class!
*/
.cs-activeSlide { display:block; }
/* Container with caption's text. Must be hidden */
.slide-descriptions {
display:none;
}
/* Container with caption, must be hidden by default */
.caption {
background: url("../images/d-bg.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
display: none;
height: 280px;
padding: 20px;
position: absolute;
right: 40px;
top: 140px;
width: 180px;
z-index: 3;
}
.full-3D {
right: 40px;
top: 580px;
width: 840px;
height:20px;
}
/* Container with Pagination buttons */
.pagination {
bottom: 50px;
left: 345px;
margin-top: 50px;
position: absolute;
text-align: center;
}
.slider-pagination {
display:inline-block;
width:15px;
height:10px;
background:url(../images/navi.png) no-repeat left bottom;
margin:0 10px;
cursor:pointer;
position:relative;
z-index:200;
}
/* This is a required class for the "Active" pagination button. ! Reserved Class Name ! */
.cs-active-pagination {
background:url(../images/navi.png) no-repeat left top;
}
/* Multiple SLiders */
.slider-2 {
padding-top:0;
margin-top:20px;
}
#slider-1, #slider-2 {
width:900px;
height:300px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
display:block;
}
.cs-activeSlide-2 {
display:block
}
.cs-active-pagination-2 {
background:url(../images/navi.png) no-repeat left top;
}
步骤3. JS (Step 3. JS)
js / jquery.id.chopslider-2.2.0.free.min.js和js / jquery.id.cstransitions-1.2.min.js (js/jquery.id.chopslider-2.2.0.free.min.js and js/jquery.id.cstransitions-1.2.min.js)
These are two JS files in this slider. We just have to include it to our page.
这是此滑块中的两个JS文件。 我们只需要将其包含到我们的页面中即可。
js / main.js (js/main.js)
jQuery(function(){
$("#slider").chopSlider({
/* slide element */
slide : ".slide",
/* controlers */
nextTrigger : "a#slide-next",
prevTrigger : "a#slide-prev",
hideTriggers : true,
sliderPagination : ".slider-pagination",
/* captions */
useCaptions : true,
everyCaptionIn : ".sl-descr",
showCaptionIn : ".caption",
captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
/* autoplay */
autoplay : true,
autoplayDelay : 5000,
/* for Browsers that support 3D transforms */
t3D : csTransitions['3DFlips']['random'], /* all will be picked up randomly */
t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
noCSS3 : csTransitions['noCSS3']['random'],
mobile : csTransitions['mobile']['random'],
onStart: function(){},
onEnd: function(){}
})
})
jQuery(function(){
$("#slider").chopSlider({
/* slide element */
slide : ".slide",
/* controlers */
nextTrigger : "a#slide-next",
prevTrigger : "a#slide-prev",
hideTriggers : true,
sliderPagination : ".slider-pagination",
/* captions */
useCaptions : true,
everyCaptionIn : ".sl-descr",
showCaptionIn : ".caption",
captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
/* autoplay */
autoplay : true,
autoplayDelay : 5000,
/* for Browsers that support 3D transforms */
t3D : csTransitions['3DFlips']['random'], /* all will be picked up randomly */
t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
noCSS3 : csTransitions['noCSS3']['random'],
mobile : csTransitions['mobile']['random'],
onStart: function(){},
onEnd: function(){}
})
})
This is initialization of Chop slider. I set all effects (transitions) to random to display different effects to different browsers. Also I have enabled autoplay and display captions (descriptions).
这是“切碎”滑块的初始化。 我将所有效果(过渡)设置为随机，以向不同的浏览器显示不同的效果。 另外，我还启用了自动播放和显示字幕(说明)。
Here you can find full documentation for this slider (with detailed explanation of all params).
在这里，您可以找到有关此滑块的完整文档(所有参数的详细说明)。
步骤4.图片 (Step 4. Images)
For slider interface we are using few images (caption-bg.png, d-bg.png, navi.png, podium.png, shadow.png and sl-control.png). All these images available in our package. All slider images is in ‘slide_images’ folder.
对于滑块界面，我们使用的图像很少(caption-bg.png，d-bg.png，navi.png，podium.png，shadow.png和sl-control.png)。 所有这些图像都在我们的包装中。 所有滑块图像都在“ slide_images”文件夹中。
现场演示
结论 (Conclusion)
I hope that today we made new nice photo slider. Good luck in your projects!
我希望今天我们制作了新的漂亮照片滑块。 在您的项目中祝您好运！
翻译自: https://www.script-tutorials.com/creating-photo-album-with-jquery-chop-slider/
qstring chop
扫一扫
3849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
