CrossSlide is a jQuery plugin to create pan and cross-fade
animations. Here is a small example of how slide show can be created with this
jQuery plugin.
In the example given below just have your own images and thumbnails and copy paste the following HTML code and run it.
This code will sync the thumbnail and the main image with ken burns effect.On Mouse over it will pause the slide show.
Cross Slide Plugin location
https://github.com/tobia/CrossSlide
https://github.com/tobia/Pause
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slide show using cross slide</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cross-slide.js"></script>
<script src="jquery.pause.min.js"></script>
<style type="text/css">
#slideshow {
width: 1000px;
height: 650px;
}
div.demo {
border: 1px solid #555555;
margin: 1em auto;
width: 650px;
}
div.caption {
background: none repeat scroll 0 0 black;
border-radius: 10px 10px 10px 10px;
color: white;
font-family: sans-serif;
left: 50%;
margin-left: -75px;
margin-top: -75px;
padding: 5px 10px;
position: absolute;
text-align: center;
width: 150px;
}
.opecImg
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class=demo id=slideshow>Loading...</div>
<div class=caption></div>
<center>
<a href="#" onclick="changeOrder(0)"><img src="thumb0.jpg" id="pair0" class="opecImg"/> </a>
<a href="#" onclick="changeOrder(1)"><img src="thumb1.jpg" id="pair1" class="opecImg"/> </a>
<a href="#" onclick="changeOrder(2)"><img src="thumb2.jpg" id="pair2" class="opecImg"/> </a>
<a href="#" onclick="changeOrder(3)"><img src="thumb3.jpg" id="pair3" class="opecImg"/> </a>
<a href="#" onclick="changeOrder(4)"><img src="thumb4.jpg" id="pair4" class="opecImg"/> </a>
<a href="#" onclick="changeOrder(5)"><img src="thumb5.jpg" id="pair5" class="opecImg"/> </a>
</center>
<script type="text/javascript">
var timeDuration = 3;
var imagesArray = [
{
src: 'picture0.jpg',
alt: 'Pic1',
from: 'top left',
to: 'bottom right 1.5x',
time:timeDuration
}, {
src: 'picture1.jpg',
alt: 'Pic2',
from: '100% 80% 1x',
to: '100% 0% 1.7x',
time: timeDuration
}, {
src: 'picture2.jpg',
alt: 'Pic3',
from: 'bottom right 1.2x',
to: 'top left',
time:timeDuration
}, {
src: 'picture3.jpg',
alt: 'Pic4',
from: '100% 80% 1.5x',
to: '80% 0% 1.1x',
time: timeDuration
}, {
src: 'picture4.jpg',
alt: 'Pic5',
from: '100% 50%',
to: '30% 50% 1.8x',
time: timeDuration
}, {
src: 'picture5.jpg',
alt: 'Pic6',
from: 'top left',
to: 'bottom right 1.2x',
time: timeDuration
}
];
$(function() {
$('#slideshow').crossSlide({
fade: timeDuration
}, imagesArray, function(idx, img, idxOut, imgOut) {
if (idxOut == undefined)
{
// starting single image phase, put up caption
$('div.caption').text(img.alt).animate({ opacity: .7 })
}
else
{
// starting cross-fade phase, take out caption
$('div.caption').animate({ opacity: 0 })
}
syncImages(idx);
});
});
$('div.caption').show().css({ opacity: 0 })
$('#slideshow').mouseover(function() {
$('#slideshow').crossSlidePause();
});
$('#slideshow').mouseout(function() {
$('#slideshow').crossSlideResume();
});
function changeOrder(index){
addBlurToThumbnailImages();
var idx = index;
$("#pair"+idx).removeClass("opecImg");
$('#slideshow').crossSlideStop();
tmpArray = imagesArray.slice (index).concat(imagesArray.slice(0,index));
//alert(imagesArray);
$('#slideshow').crossSlide({
fade: timeDuration
}, tmpArray, function(idx, img, idxOut, imgOut) {
if (idxOut == undefined)
{
// starting single image phase, put up caption
$('div.caption').text(img.alt).animate({ opacity: .7 })
}
else
{
// starting cross-fade phase, take out caption
$('div.caption').animate({ opacity: 0 })
}
idx = idx+index;
if(idx>=imagesArray.length){
idx = idx%(imagesArray.length-1)-1;
}
syncImages(idx);
});
}
function syncImages(idx){
$("#pair"+idx).removeClass("opecImg");
idx-=1;
if(idx==-1){
idx=imagesArray.length-1;
$("#pair"+idx).addClass("opecImg");
}else{
$("#pair"+idx).addClass("opecImg");
}
}
function addBlurToThumbnailImages(){
for(i=0;i<imagesArray.length-1;i++){
$("#pair"+i).addClass("opecImg");
}
}
</script>
</body>
</html>
