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).
Here are links to demo and downloadable package:
Contents
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, lets download the example files and goto coding !
Step 1. HTML
index.html
Here are HTML source code of our Chop photo slider.
01 | <!DOCTYPE html> |
02 | <html lang="en" > |
03 | <head> |
04 | <meta charset="utf-8" /> |
05 | <title>Creating photo album with jQuery Chop Slider | Script Tutorials</title> |
06 | <link href="css/layout.css" rel="stylesheet" type="text/css" /> |
07 | <link href="css/chopslider.css" rel="stylesheet" type="text/css" /> |
08 | <script src="http://code.jquery.com/jquery-latest.min.js"></script> |
09 | <script src="js/jquery.id.chopslider-2.2.0.free.min.js"></script> |
10 | <script src="js/jquery.id.cstransitions-1.2.min.js"></script> |
11 | <script src="js/main.js"></script> |
12 | </head> |
13 | <body> |
14 | <header> |
15 | <h2>Creating photo album with jQuery Chop Slider</h2> |
16 | <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> |
17 | </header> |
18 | <div class="container"> |
19 | <div class="wrapper"> |
20 | <div class="s-shadow-b"></div> |
21 | <a id="slide-next" href="#"></a> |
22 | <a id="slide-prev" href="#"></a> |
23 | <div id="slider"> |
24 | <div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div> |
25 | <div class="slide"> <img src="slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div> |
26 | <div class="slide"> <img src="slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div> |
27 | <div class="slide"> <img src="slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div> |
28 | <div class="slide"> <img src="slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div> |
29 | <div class="slide"> <img src="slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div> |
30 | <div class="slide"> <img src="slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div> |
31 | </div> |
32 | <div class="pagination"> |
33 | <span class="slider-pagination"></span> |
34 | <span class="slider-pagination"></span> |
35 | <span class="slider-pagination"></span> |
36 | <span class="slider-pagination"></span> |
37 | <span class="slider-pagination"></span> |
38 | <span class="slider-pagination"></span> |
39 | <span class="slider-pagination"></span> |
40 | </div> |
41 | <div class="slide-descriptions"> |
42 | <div class="sl-descr">Thailand, There are very many different ATM in one place</div> |
43 | <div class="sl-descr">All city colour is bright, nothing black</div> |
44 | <div class="sl-descr">Floating market. Shopping on river</div> |
45 | <div class="sl-descr">Sunset on Koh Phangan island</div> |
46 | <div class="sl-descr">Shortly before sunset</div> |
47 | <div class="sl-descr">Good sculpture on Koh Samui island</div> |
48 | <div class="sl-descr">That is such cute barmaid you can see here</div> |
49 | </div> |
50 | <div class="caption"></div> |
51 | </div> |
52 | </div> |
53 | </body> |
54 | </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.
Step 2. 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:
001 | .wrapper { |
002 | position:relative; |
003 | margin-left:auto; |
004 | margin-right:auto; |
005 | width:960px; |
006 | height:300px; |
007 | display:block; |
008 | padding-top:150px; |
009 | padding-bottom:120px; |
010 | background:url(../images/podium.png) no-repeat bottom; |
011 | z-index:2; |
012 | } |
013 | .wrapper2 { |
014 | position:relative; |
015 | margin-left:auto; |
016 | margin-right:auto; |
017 | margin-top:20px; |
018 | width:960px; |
019 | height:300px; |
020 | display:block; |
021 | z-index:2; |
022 | text-align:center; |
023 | padding-bottom:50px; |
024 | } |
025 | .wrapper2 a { |
026 | display:inline-block; |
027 | padding:0px 5px; |
028 | background:#fff; |
029 | border:1px solid #ccc; |
030 | border-radius:3px; |
031 | text-decoration:none; |
032 | margin:0px 5px; |
033 | } |
034 | .wrapper2 .active-transition { |
035 | background:#222; |
036 | color:#fff; |
037 | } |
038 | /*---------- Slider ----------- */ |
039 | /*---------- Left and Right Triggers ----------- */ |
040 | #slide-prev { |
041 | position:absolute; |
042 | width:21px; |
043 | height:33px; |
044 | bottom:39px; |
045 | left:26px; |
046 | z-index:4; |
047 | background:url(../images/sl-control.png) left top no-repeat; |
048 | } |
049 | #slide-next { |
050 | position:absolute; |
051 | width:21px; |
052 | height:33px; |
053 | bottom:39px; |
054 | right:26px; |
055 | z-index:4; |
056 | background:url(../images/sl-control.png) left bottom no-repeat; |
057 | } |
058 | /*---------- Shadow, just for styling ----------- */ |
059 | .s-shadow-b{ |
060 | background:url(../images/shadow.png) no-repeat top; |
061 | width:876px; |
062 | height:55px; |
063 | position:absolute; |
064 | left:42px; |
065 | bottom:60px; |
066 | z-index:1; |
067 | } |
068 | /*---------- Main Slider Container----------- */ |
069 | #slider { |
070 | width:900px; |
071 | height:300px; |
072 | margin-left:auto; |
073 | margin-right:auto; |
074 | position:relative; |
075 | z-index:2; |
076 | display:block; |
077 | } |
078 | /* Every slide must be hidden by default */ |
079 | .slide { display:none; } |
080 | /* |
081 | And only the slide with "cs-activeSlide" class must be visible! |
082 | !Reserved Class name. Required class! |
083 | */ |
084 | .cs-activeSlide { display:block; } |
085 | /* Container with caption's text. Must be hidden */ |
086 | .slide-descriptions { |
087 | display:none; |
088 | } |
089 | /* Container with caption, must be hidden by default */ |
090 | .caption { |
091 | background: url("../images/d-bg.png") repeat scroll 0 0 transparent; |
092 | color: #FFFFFF; |
093 | display: none; |
094 | height: 280px; |
095 | padding: 20px; |
096 | position: absolute; |
097 | right: 40px; |
098 | top: 140px; |
099 | width: 180px; |
100 | z-index: 3; |
101 | } |
102 | .full-3D { |
103 | right: 40px; |
104 | top: 580px; |
105 | width: 840px; |
106 | height:20px; |
107 | } |
108 | /* Container with Pagination buttons */ |
109 | .pagination { |
110 | bottom: 50px; |
111 | left: 345px; |
112 | margin-top: 50px; |
113 | position: absolute; |
114 | text-align: center; |
115 | } |
116 | .slider-pagination { |
117 | display:inline-block; |
118 | width:15px; |
119 | height:10px; |
120 | background:url(../images/navi.png) no-repeat left bottom; |
121 | margin:0 10px; |
122 | cursor:pointer; |
123 | position:relative; |
124 | z-index:200; |
125 | } |
126 | /* This is a required class for the "Active" pagination button. ! Reserved Class Name ! */ |
127 | .cs-active-pagination { |
128 | background:url(../images/navi.png) no-repeat left top; |
129 | } |
130 | /* Multiple SLiders */ |
131 | .slider-2 { |
132 | padding-top:0; |
133 | margin-top:20px; |
134 | } |
135 | #slider-1, #slider-2 { |
136 | width:900px; |
137 | height:300px; |
138 | margin-left:auto; |
139 | margin-right:auto; |
140 | position:relative; |
141 | z-index:2; |
142 | display:block; |
143 | } |
144 | .cs-activeSlide-2 { |
145 | display:block |
146 | } |
147 | .cs-active-pagination-2 { |
148 | background:url(../images/navi.png) no-repeat left top; |
149 | } |
Step 3. 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/main.js
01 | jQuery(function(){ |
02 | $("#slider").chopSlider({ |
03 | /* slide element */ |
04 | slide : ".slide", |
05 | /* controlers */ |
06 | nextTrigger : "a#slide-next", |
07 | prevTrigger : "a#slide-prev", |
08 | hideTriggers : true, |
09 | sliderPagination : ".slider-pagination", |
10 | /* captions */ |
11 | useCaptions : true, |
12 | everyCaptionIn : ".sl-descr", |
13 | showCaptionIn : ".caption", |
14 | captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)", |
15 | /* autoplay */ |
16 | autoplay : true, |
17 | autoplayDelay : 5000, |
18 | /* for Browsers that support 3D transforms */ |
19 | t3D : csTransitions['3DFlips']['random'], /* all will be picked up randomly */ |
20 | t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ], |
21 | noCSS3 : csTransitions['noCSS3']['random'], |
22 | mobile : csTransitions['mobile']['random'], |
23 | onStart: function(){}, |
24 | onEnd: function(){} |
25 | }) |
26 | }) |
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).
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.
Live Demo
Conclusion
I hope that today we made new nice photo slider. Good luck in your projects!
