 |
| Bubbleriffic Image Gallery with jQuery 圖片展示套件 |
使用方法：
第一步 載入 Bubbleriffic Image Gallery 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jQuery 強化動畫效果套件-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- jQuery 滑動縮圖套件 -->
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>
第二步 建立 HTML 的圖片列表和大圖展示區
<div id="loader" class="loader"></div>
<div class="header" id="header" style="top:-90px;"><!--top 30 px to show-->
<h1>Bubbleriffic<span>jQuery Image Gallery</span></h1>
</div>
<div id="thumbnails_wrapper" class="thumbnails_wrapper" style="top:-255px;"><!--top 110 px to show-->
<div id="tshf_container1" class="tshf_container">
<div class="thumbScroller">
<div class="container">
<div class="content">
<div>
<a href="#">
<img src="images/albums/album1/thumbs/1.jpg" alt="image description comes here" class="thumb" />
</a>
<span></span>
</div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/2.jpg" alt="another image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/3.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/4.jpg" alt="another image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/5.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/6.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/7.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/8.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/9.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/10.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/11.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/12.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/13.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/14.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/15.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/16.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/17.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/18.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/19.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/20.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/21.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/22.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/23.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
<div class="content">
<div><a href="#"><img src="images/albums/album1/thumbs/24.jpg" alt="image description comes here" class="thumb" /></a><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="bubble">
<img id="bubble" src="images/bubble.png" alt=""/>
</div>
<div id="preview" class="preview">
<a id="prev_image" href="#" class="prev_image"></a>
<a id="next_image" href="#" class="next_image"></a>
</div>
第三步 使用 CSS 樣式
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
outline:none;
}
ul{
list-style:none;
}
body{
background:#222 url(../bg.jpg) repeat top left;
font-family:"Trebuchet MS", "Myriad Pro", Helvetica, sans-serif;
font-size:13px;
color: #fff;
text-transform:uppercase;
text-shadow:0px 0px 1px #fff;
letter-spacing:1px;
overflow:hidden;
}
.top_menu{
height:30px;
line-height:30px;
position:absolute;
top:-30px;
left:0;
width:100%;
overflow:hidden;
background:#010101;
border-bottom:1px solid #000;
z-index:100;
-moz-box-shadow:0px 0px 4px #010101;
-webkit-box-shadow:0px 0px 4px #010101;
box-shadow:0px 0px 4px #010101;
}
.top_menu .back{
position:absolute;
top:0px;
left:10px;
height:30px;
line-height:30px;
cursor:pointer;
color:#aaa;
}
.top_menu .back span{
width:14px;
height:30px;
display:block;
float:left;
background:#000 url(../images/prev.png) repeat-x center left;
margin-right:5px;
opacity:0.5;
}
.top_menu .back:hover{
color:#fff;
}
.top_menu .back:hover span{
opacity:0.9;
}
.top_menu span.description{
font-style:italic;
position:absolute;
width:100%;
text-align:center;
top:0px;
left:0px;
height:30px;
line-height:30px;
}
.top_menu .info{
float:right;
margin-right:10px;
}
.header{
height:80px;
position:absolute;
top:30px;
left:0px;
width:100%;
overflow:hidden;
z-index:90;
background-color:#ffd800;
-moz-box-shadow:0px 0px 10px #010101;
-webkit-box-shadow:0px 0px 10px #010101;
box-shadow:0px 0px 10px #010101;
}
h1{
font-size:60px;
padding-left:20px;
color:#010101;
line-height:80px;
text-shadow:1px 1px 1px #000;
}
h1 span{
font-size:16px;
float:right;
margin-right:20px;
}
.preview img{
position:absolute;
left:0;
top:0;
-moz-box-shadow:1px 1px 5px #111;
-webkit-box-shadow:1px 1px 5px #111;
box-shadow:1px 1px 5px #111;
-webkit-box-reflect:
below 5px
-webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(0.8, transparent),
to(rgb(255, 216, 0))
);
}
.footer{
z-index:100;
height:30px;
line-height:30px;
text-align:center;
font-size:10px;
background:#010101;
border-top:1px solid #000;
position:absolute;
bottom:0px;
left:0px;
width:100%;
-moz-box-shadow:0px 0px 4px #010101;
-webkit-box-shadow:0px 0px 4px #010101;
box-shadow:0px 0px 4px #010101;
}
.footer a{
color:#999;
text-decoration:none;
margin:40px;
}
.loader{
display:none;
width:200px;
height:200px;
background: #000 url(../images/ajax-loader.gif) no-repeat center center;
position:fixed;
top:50%;
left:50%;
margin:-100px 0px 0px -100px;
opacity: 0.7;
z-index:9999;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
a.next_image,
a.prev_image{
width:50px;
height:50px;
position:fixed;
top:50%;
margin-top:-25px;
cursor:pointer;
opacity:0.7;
z-index:999999;
-moz-box-shadow:0px 0px 3px #000;
-webkit-box-shadow:0px 0px 3px #000;
box-shadow:0px 0px 3px #000;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
a.next_image:hover,
a.prev_image:hover
{
opacity:0.9;
}
a.next_image{
background:#000 url(../images/next.png) no-repeat center center;
right:-50px;
}
a.prev_image{
background:#000 url(../images/prev.png) no-repeat center center;
left:-50px;
}
.thumbnails_wrapper{
position:absolute;
top:-255px;
left:0px;
width:100%;
-moz-box-shadow:0px 3px 5px #000;
-webkit-box-shadow:0px 3px 5px #000;
box-shadow:0px 3px 5px #000;
}
.bubble img{
position:fixed;
top:50%;
left:50%;
width:0px;
height:0px;
}
/* Based on Manos Malihu's brilliant thumbnail scroller http://manos.malihu.gr/jquery-thumbnail-scroller */
.tshf_container{
height:85px;
position:relative;
width:100%;
background:#ffd800;
}
.tshf_container .thumbScroller{
position:relative;
width:100%;
overflow:hidden;
}
.tshf_container .thumbScroller,
.tshf_container .thumbScroller .container,
.tshf_container .thumbScroller .content{
height:85px;
}
.tshf_container .thumbScroller .container{
position:relative;
left:0;
}
.tshf_container .thumbScroller .content{
float:left;
}
.tshf_container .thumbScroller .content div{
height:100%;
position:relative;
}
.tshf_container .thumbScroller img{
border:none;
}
.tshf_container .thumbScroller .content div a{
display:block;
height:85px;
width:85px;
}
.tshf_container .thumbScroller .content div a img{
width:85px;
}
.tshf_container .thumbScroller .content div a:hover{
border-color:#fff;
}
.tshf_container .thumbScroller .content div:hover span{
background:transparent url(../images/thumb_overlay_hover.png) no-repeat top left;
}
.tshf_container .thumbScroller .content span{
cursor:pointer;
position:absolute;
width:85px;
height:85px;
top:0px;
left:0px;
background:transparent url(../images/thumb_overlay.png) no-repeat top left;
}
第四步 撰寫 JavaScript
$(window).load(function() {
//caching some elements
var $thumbnails_wrapper = $('#thumbnails_wrapper'),
$thumbs = $thumbnails_wrapper.find('.tshf_container').find('.content'),
$top_menu= $('#top_menu'),
$header = $('#header'),
$bubble = $('#bubble'),
$loader = $('#loader'),
$preview= $('#preview'),
$thumb_images = $thumbnails_wrapper.find('img'),
total_thumbs = $thumb_images.length,
$next_img= $('#next_image'),
$prev_img= $('#prev_image'),
$back = $('#back'),
$description = $('#description'),
//current album and current photo
//(indexes of the tshf_container and content elements)
currentAlbum = -1,
currentPhoto = -1;
//show the loading image until we
//preload all the thumb images
$loader.show();
//show the main menu and thumbs menu
openPhotoAlbums();
function openPhotoAlbums(){
//preload all the thumb images
var cnt_loaded = 0;
$thumb_images.each(function(){
var $thumb = $(this);
var image_src = $thumb.attr('src');
$('<img/>').load(function(){
++cnt_loaded;
if(cnt_loaded == total_thumbs){
$loader.hide();
createThumbnailScroller();
//show the main menu and thumbs menu
$header.stop()
.animate({'top':'30px'},700,'easeOutBack');
$thumbnails_wrapper.stop()
.animate({'top':'110px'},700,'easeOutBack');
}
}).attr('src',image_src);
});
}
//thumb click event
$thumbs.bind('click',function(e){
//show loading image
$loader.show();
var $thumb = $(this),
//source of the corresponding large image
img_src = $thumb.find('img.thumb')
.attr('src')
.replace('/thumbs','');
//track the current album / photo
currentPhoto= $thumb.index(),
currentAlbum= $thumb.closest('.tshf_container')
.index();
//displays the current album and current photo
updateInfo(currentAlbum,currentPhoto);
//preload the large image
$('<img/>').load(function(){
var $this = $(this);
//record the size that the large image
//should have when it is shown
saveFinalPositions($this);
//margin_circle is the diameter for the
//bubble image
var w_w= $(window).width(),
w_h= $(window).height(),
margin_circle = w_w + w_w/3;
if(w_h>w_w)
margin_circle = w_h + w_h/3;
//the image will be positioned on the center,
//with width and height of 0px
$this.css({
'width': '0px',
'height' : '0px',
'marginTop' : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
});
$preview.append($this);
//hide the header
$header.stop().animate({'top':'-90px'},400, function(){
$loader.hide();
//show the top menu with the back button,
//and current album/picture info
$top_menu.stop()
.animate({'top':'0px'},400,'easeOutBack');
//animate the bubble image
$bubble.stop().animate({
'width': margin_circle + 'px',
'height' : margin_circle + 'px',
'marginTop' : -margin_circle/2+'px',
'marginLeft': -margin_circle/2+'px'
},700,function(){
//solve resize problem
$('BODY').css('background','#FFD800');
});
//after 200ms animate the large image
//and show the navigation buttons
setTimeout(function(){
var final_w = $this.data('width'),
final_h = $this.data('height');
$this.stop().animate({
'width': final_w + 'px',
'height' : final_h + 'px',
'marginTop' : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
},700,showNav);
//show the description
$description.html($thumb.find('img.thumb').attr('alt'));
},200);
});
//hide the thumbs
$thumbnails_wrapper.stop()
.animate({
'top' : w_h+'px'
},400,function(){
//solve resize problem
$(this).hide();
});
}).attr('src',img_src);
});
//next button click event
$next_img.bind('click',function(){
//increment the currentPhoto
++currentPhoto;
//current album:
var $album= $thumbnails_wrapper.find('.tshf_container')
.eq(currentAlbum),
//the next element / thumb to show
$next= $album.find('.content').eq(currentPhoto),
$current = $preview.find('img');
if($next.length == 0 || $current.is(':animated')){
--currentPhoto;
return false;
}
else{
$loader.show();
updateInfo(currentAlbum,currentPhoto);
//preload the large image
var img_src = $next.find('img.thumb')
.attr('src')
.replace('/thumbs',''),
w_w= $(window).width(),
w_h= $(window).height();
$('<img/>').load(function(){
var $this = $(this);
//record the size that the large image
//should have when it is shown
saveFinalPositions($this);
$loader.hide();
$current.stop()
.animate({'marginLeft':'-'+($current.width()+20)+'px'},500,function(){
//the current image gets removed
$(this).remove();
});
//the new image will be positioned on the center,
//with width and height of 0px
$this.css({
'width': '0px',
'height' : '0px',
'marginTop' : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
});
$preview.prepend($this);
var final_w = $this.data('width'),
final_h = $this.data('height');
$this.stop().animate({
'width': final_w + 'px',
'height' : final_h + 'px',
'marginTop' : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
},700);
//show the description
$description.html($next.find('img.thumb').attr('alt'));
}).attr('src',img_src);
}
});
//previous button click event
$prev_img.bind('click',function(){
--currentPhoto;
//current album:
var $album= $thumbnails_wrapper.find('.tshf_container')
.eq(currentAlbum),
$prev= $album.find('.content').eq(currentPhoto),
$current = $preview.find('img');
if($prev.length == 0 || $current.is(':animated') || currentPhoto < 0){
++currentPhoto;
return false;
}
else{
$loader.show();
updateInfo(currentAlbum,currentPhoto);
//preload the large image
var img_src = $prev.find('img.thumb')
.attr('src')
.replace('/thumbs',''),
w_w= $(window).width(),
w_h= $(window).height();
$('<img/>').load(function(){
var $this = $(this);
//record the size that the large image
//should have when it is shown
saveFinalPositions($this);
$loader.hide();
$current.stop()
.animate({'marginLeft':(w_w+20)+'px'},500,function(){
//the current image gets removed
$(this).remove();
});
//the new image will be positioned on the center,
//with width and height of 0px
$this.css({
'width': '0px',
'height' : '0px',
'marginTop' : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
});
$preview.append($this);
var final_w = $this.data('width'),
final_h = $this.data('height');
$this.stop().animate({
'width': final_w + 'px',
'height' : final_h + 'px',
'marginTop' : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
},700);
//show the description
$description.html($prev.find('img.thumb').attr('alt'));
}).attr('src',img_src);
}
});
//on window resize we recalculate the sizes of the current image
$(window).resize(function(){
var $current = $preview.find('img'),
w_w = $(window).width(),
w_h = $(window).height();
if($current.length > 0){
saveFinalPositions($current);
var final_w = $current.data('width'),
final_h = $current.data('height');
$current.css({
'width': final_w + 'px',
'height' : final_h + 'px',
'marginTop' : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
});
}
});
//back button click event
$back.bind('click',closePreview)
//shows the navigation buttons
function showNav(){
$next_img.stop().animate({
'right' : '10px'
},300);
$prev_img.stop().animate({
'left' : '10px'
},300);
}
//hides the navigation buttons
function hideNav(){
$next_img.stop().animate({
'right' : '-50px'
},300);
$prev_img.stop().animate({
'left' : '-50px'
},300);
}
//updates the current album and current photo info
function updateInfo(album,photo){
$top_menu.find('.album_info')
.html('Album ' + (album+1))
.end()
.find('.image_info')
.html(' / Shot ' + (photo+1))
}
//calculates the final width and height
//of an image about to expand
//based on the window size
function saveFinalPositions($image){
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
//140 is 2*60 of next/previous buttons plus 20 of extra margin
var containerwidth = $(window).width() - 140;
//150 is 30 of header + 30 of footer + extra 90
var containerheight = $(window).height() - 150;
if(imgwidth > containerwidth){
var newwidth = containerwidth;
var ratio = imgwidth / containerwidth;
var newheight = imgheight / ratio;
if(newheight > containerheight){
var newnewheight = containerheight;
var newratio = newheight/containerheight;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
else if(imgheight > containerheight){
var newheight = containerheight;
var ratio = imgheight / containerheight;
var newwidth = imgwidth / ratio;
if(newwidth > containerwidth){
var newnewwidth = containerwidth;
var newratio = newwidth/containerwidth;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
$image.data({'width':theImage.width,'height':theImage.height});
}
//triggered when user clicks the back button.
//hides the current image and the bubble image,
//and shows the main menu and the thumbs
function closePreview(){
var $current = $preview.find('img'),
w_w = $(window).width(),
w_h = $(window).height(),
margin_circle = w_w + w_w/3;
if(w_h>w_w)
margin_circle = w_h + w_h/3;
if($current.is(':animated'))
return false;
//hide the navigation
hideNav();
//hide the topmenu
$top_menu.stop()
.animate({'top':'-30px'},400,'easeOutBack');
//hide the image
$current.stop().animate({
'width': '0px',
'height' : '0px',
'marginTop' : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
},700,function(){
$(this).remove();
});
//animate the bubble image
//first set the positions correctly -
//it could have changed on a window resize
setTimeout(function(){
$bubble.css({
'width' : margin_circle + 'px',
'height' : margin_circle + 'px',
'margin-top' : -margin_circle/2+'px',
'margin-left': -margin_circle/2+'px'
});
$('BODY').css('background','url("bg.jpg") repeat scroll left top #222222');
$bubble.animate({
'width': '0px',
'height' : '0px',
'marginTop' : '0px',
'marginLeft': '0px'
},500);
},200);
setTimeout(function(){
$header.stop()
.animate({'top':'30px'},700,'easeOutBack');
$thumbnails_wrapper.stop()
.show()
.animate({'top':'110px'},700,'easeOutBack');
},600);
}
//builds the scrollers for the thumbs
//done by Manos
//(http://manos.malihu.gr/jquery-thumbnail-scroller)
function createThumbnailScroller(){
/*
ThumbnailScroller function parameters:
1) id of the container (div id)
2) thumbnail scroller type. Values: "horizontal", "vertical"
3) first and last thumbnail margin (for better cursor interaction)
4) scroll easing amount (0 for no easing)
5) scroll easing type
6) thumbnails default opacity
7) thumbnails mouseover fade speed (in milliseconds)
*/
ThumbnailScroller("tshf_container1","horizontal",10,800,"easeOutCirc",0.5,300);
//ThumbnailScroller("tshf_container2","horizontal",10,800,"easeOutCirc",0.5,300);
//ThumbnailScroller("tshf_container3","horizontal",10,800,"easeOutCirc",0.5,300);
}
});
作者網站：http://tympanus.net/codrops/
檔案大小：912 KB (包含範例)
檔案下載：http://tympanus.net/Tutorials/BubblerifficImageGallery/BubblerifficImageGallery.zip?84cd58
檔案備份：下載
0 意見