以下是 带预览图的jQuery相册代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sweet Thumbnails Preview Gallery相册代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="JS代码,jQuery,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery相册代码，属于站长常用代码" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body style="text-align:center">
<div class="bg_image"><img src="images/bg.jpg" alt=""/></div>
<div id="loader" class="loader"></div>
<div class="wrapper">
<h1>Sweet Thumbnails Preview Gallery</h1>
<div id="ps_container" class="ps_container">
<div class="ps_image_wrapper">
<!-- First initial image -->
<img src="images/1.jpg" alt="" />
</div>
<!-- Navigation items -->
<div class="ps_next"></div>
<div class="ps_prev"></div>
<!-- Dot list with thumbnail preview -->
<ul class="ps_nav">
<li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li>
<li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li>
<li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li>
<li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li>
<li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li>
<li><a href="images/6.jpg" rel="images/thumbs/6.jpg">Image 6</a></li>
<li><a href="images/7.jpg" rel="images/thumbs/7.jpg">Image 7</a></li>
<li><a href="images/8.jpg" rel="images/thumbs/8.jpg">Image 8</a></li>
<li><a href="images/9.jpg" rel="images/thumbs/9.jpg">Image 9</a></li>
<li><a href="images/10.jpg" rel="images/thumbs/10.jpg">Image 10</a></li>
<li class="ps_preview">
<div class="ps_preview_wrapper">
<!-- Thumbnail comes here -->
</div>
<!-- Little triangle -->
<span></span>
</li>
</ul>
</div>
</div>
<div class="footer">
<a href="http://www.flickr.com/photos/geishaboy500/" target="_blank">Images by Geishaboy500</a>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/*
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;
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',i);
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',t);
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
</script>
<script type="text/javascript">
$(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');
/*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 = $('<img/>').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 = $('<img/>').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();
}
function nextImage(){
if(current < total_images){
$links.eq(current+1).trigger('click');
}
}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
});
</script>
</body>
</html>
CSS代码(style.css):
*{margin:0;padding:0;}
body{font-family:"Myriad Pro","Trebuchet MS",sans-serif;text-transform:uppercase;text-shadow:1px 1px 2px #ccc;font-size:14px;background:#333;color:#333;}
h1{font-size:32px;padding:20px;color:#fff;z-index:999;position:relative;font-weight:normal;}
.loader{width:70px;height:70px;position:fixed;top:50%;left:50%;margin:-35px 0px 0px -35px;opacity:0.7;z-index:1000;background:#fff url(../images/loader.gif) no-repeat center center;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;-moz-box-shadow:0px 0px 5px #999;-webkit-box-shadow:0px 0px 5px #999;box-shadow:0px 0px 5px #999;}
.bg_image img{position:fixed;top:0px;left:0px;width:100%;z-index:0;}
.footer{position:fixed;top:10px;right:10px;z-index:999999;}
.footer a{color:#888;text-decoration:none;text-shadow:1px 1px 1px #fff;font-size:12px;padding-right:20px;}
.footer a:hover{color:#000;}
/* Preview Slider Gallery Style */
.ps_container{display:none;width:680px;height:500px;margin:20px auto 0px auto;position:relative;}
.ps_image_wrapper{width:680px;height:450px;overflow:hidden;position:relative;margin:0 auto;-moz-box-shadow:0px 0px 5px #999;-webkit-box-shadow:0px 0px 5px #999;box-shadow:0px 0px 5px #999;}
.ps_image_wrapper img{position:absolute;left:0px;top:0px;}
.ps_prev,.ps_next{width:30px;height:59px;position:absolute;top:50%;margin-top:-40px;cursor:pointer;opacity:0.5;}
.ps_prev{background:transparent url(../images/prev.png) no-repeat top center;left:-50px;}
.ps_next{background:transparent url(../images/next.png) no-repeat top center;right:-50px;}
.ps_prev:hover,.ps_next:hover{opacity:0.9;}
ul.ps_nav{list-style:none;margin:0;padding:0;width:170px;margin:20px auto;position:relative;}
ul.ps_nav li{float:left;}
ul.ps_nav li a{display:block;text-indent:-9000px;width:11px;height:11px;outline:none;padding:0px 3px;background:transparent url(../images/dot.png) no-repeat top center;}
ul.ps_nav li a:hover,ul.ps_nav li.selected a{background-position:50% -11px;}
ul.ps_nav li.ps_preview{display:none;width:85px;height:91px;top:-95px;left:-34.5px;/*First item,next ones is leftDot - 0.5*wThis + 0.5*wDot,i.e. second one is (16 - 42.5 + 8) = -18.5 */
position:absolute;}
ul.ps_nav li.ps_preview span{background:transparent url(../images/triangle.png) no-repeat top center;width:15px;height:6px;position:absolute;top:85px;left:35px;}
.ps_preview_wrapper{width:75px;height:75px;border:5px solid #fff;overflow:hidden;position:relative;-moz-box-shadow:0px 0px 5px #999;-webkit-box-shadow:0px 0px 5px #999;box-shadow:0px 0px 5px #999;}
.ps_preview_wrapper img{position:absolute;top:0px;left:0px;}
分享到QQ
分享到微博
微信扫一扫
