jQuery Chop Slider photo album effect

This is a 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).

 

Step 1. HTML

index.html

Here are HTML source code of our Chop photo slider.

Creating photo album with jQuery Chop Slider | Script Tutorials

Creating photo album with jQuery Chop Slider

Back to original tutorial on Script Tutorials


photo #1

photo #2

photo #3

photo #4

photo #5

photo #6

photo #7

Thailand, There are very many different ATM in one place

All city colour is bright, nothing black

Floating market. Shopping on river

Sunset on Koh Phangan island

Shortly before sunset

Good sculpture on Koh Samui island

That is such cute barmaid you can see here

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:

.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;
}

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

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).

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.

Download: http://www.htmldrive.net/items/download/1150

Leave a comment