/*
the images preload plugin
*/
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options),
o = $.meta ? $.extend({}, opts, this.data()) : opts;
return this.each(function() {
var $e = $(this),
t = $e.attr('rel'),
i = $e.attr('href'),
l = 0;
$('').load(function(i){
++l;
if(l==2) o.oncomplete();
}).attr('src',i);
$('').load(function(i){
++l;
if(l==2) o.oncomplete();
}).attr('src',t);
});
};
$.fn.preload.defaults = {
oncomplete : function(){return false;}
};
})(jquery);
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currenthovered = -1,
current = 0,
$loader = $('#loader');
/*自动播放图片*/
interval = setinterval(autonext, "5000");
var next_or_prev = 'next';
function autonext(){
if((next_or_prev == 'next')&&(current == (total_images-1))){
next_or_prev = 'prev';
}
if((next_or_prev == 'prev')&&(current == 0)){
next_or_prev = 'next';
}
if(next_or_prev == 'next') nextimage(); else previmage();
}
/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();
/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
oncomplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showtooltip)
.bind('mouseleave',hidetooltip)
.bind('click',showimage);
//navigate through the images
$ps_next.bind('click',nextimage);
$ps_prev.bind('click',previmage);
}
}
});
});
function showtooltip(){
var $link = $(this),
idx = $link.index(),
linkouterwidth = $link.outerwidth(),
//this holds the left value for the next position
//of the tooltip
left = parsefloat(idx * linkouterwidth) - $tooltip.width()/2 + linkouterwidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageleft;
//if we are not hovering the current one
if(currenthovered != idx){
//check if we will animate left->right or right->left
if(currenthovered != -1){
if(currenthovered < idx){
imageleft = 75;
}
else{
imageleft = -75;
}
}
currenthovered = idx;
//the next thumb image to be shown in the tooltip
var $newimage = $('').css('left','0px')
.attr('src',$thumb);
//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();
//prepend the new image
$ps_preview_wrapper.prepend($newimage);
var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;
//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageleft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageleft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}
function hidetooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}
function showimage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentimage = $ps_image_wrapper.find('img'),
currentimagewidth = $currentimage.width();
//if we click the current one return
if(current == idx) return false;
//add class selected to the current page / dot
$links.eq(current).removeclass('selected');
$link.addclass('selected');
//the new image element
var $newimage = $('').css('left',currentimagewidth + 'px')
.attr('src',$image);
//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();
//prepend the new image
$ps_image_wrapper.prepend($newimage);
//the new image width.
//this will be the new width of the ps_image_wrapper
var newimagewidth = $newimage.width();
//check animation direction
if(current > idx){
$newimage.css('left',-newimagewidth + 'px');
currentimagewidth = -newimagewidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newimagewidth + 'px'
},350);
//animate the new image in
$newimage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentimage.stop().animate({
left : -currentimagewidth + 'px'
},350);
e.preventdefault();
clearinterval(interval);
interval = setinterval(autonext, "5000");
}
function nextimage(){
if(current < total_images){
$links.eq(current+1).trigger('click');
}
}
function previmage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
});