以下是 jQuery相册滚动响应特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Image Gallery</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Responsive Image Gallery with jQuery" />
<meta name="keywords" content="jquery, carousel, image gallery, slider, responsive, flexible, fluid, resize, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<!--<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />-->
<noscript>
<style>
.es-carousel ul{
display:block;
}
</style>
</noscript>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
<a href="#" class="rg-image-nav-prev">Previous Image</a>
<a href="#" class="rg-image-nav-next">Next Image</a>
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container">
<div class="content">
<h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" data-large="images/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" data-large="images/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" data-large="images/5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale" /></a></li>
<li><a href="#"><img src="images/thumbs/6.jpg" data-large="images/6.jpg" alt="image06" data-description="Ere long espied a fickle maid full pale" /></a></li>
<li><a href="#"><img src="images/thumbs/7.jpg" data-large="images/7.jpg" alt="image07" data-description="Tearing of papers, breaking rings a-twain" /></a></li>
<li><a href="#"><img src="images/thumbs/8.jpg" data-large="images/8.jpg" alt="image08" data-description="Storming her world with sorrow's wind and rain" /></a></li>
<li><a href="#"><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="image09" data-description="Upon her head a platted hive of straw" /></a></li>
<li><a href="#"><img src="images/thumbs/10.jpg" data-large="images/10.jpg" alt="image10" data-description="Which fortified her visage from the sun" /></a></li>
<li><a href="#"><img src="images/thumbs/11.jpg" data-large="images/11.jpg" alt="image11" data-description="Whereon the thought might think sometime it saw" /></a></li>
<li><a href="#"><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="image12" data-description="The carcass of beauty spent and done" /></a></li>
<li><a href="#"><img src="images/thumbs/13.jpg" data-large="images/13.jpg" alt="image13" data-description="Time had not scythed all that youth begun" /></a></li>
<li><a href="#"><img src="images/thumbs/14.jpg" data-large="images/14.jpg" alt="image14" data-description="Nor youth all quit; but, spite of heaven's fell rage" /></a></li>
<li><a href="#"><img src="images/thumbs/15.jpg" data-large="images/15.jpg" alt="image15" data-description="Some beauty peep'd through lattice of sear'd age" /></a></li>
<li><a href="#"><img src="images/thumbs/16.jpg" data-large="images/16.jpg" alt="image16" data-description="Oft did she heave her napkin to her eyne" /></a></li>
<li><a href="#"><img src="images/thumbs/17.jpg" data-large="images/17.jpg" alt="image17" data-description="Which on it had conceited characters" /></a></li>
<li><a href="#"><img src="images/thumbs/18.jpg" data-large="images/18.jpg" alt="image18" data-description="Laundering the silken figures in the brine" /></a></li>
<li><a href="#"><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="image19" data-description="That season'd woe had pelleted in tears" /></a></li>
<li><a href="#"><img src="images/thumbs/20.jpg" data-large="images/20.jpg" alt="image20" data-description="And often reading what contents it bears" /></a></li>
<li><a href="#"><img src="images/thumbs/21.jpg" data-large="images/21.jpg" alt="image21" data-description="As often shrieking undistinguish'd woe" /></a></li>
<li><a href="#"><img src="images/thumbs/22.jpg" data-large="images/22.jpg" alt="image22" data-description="In clamours of all size, both high and low" /></a></li>
<li><a href="#"><img src="images/thumbs/23.jpg" data-large="images/23.jpg" alt="image23" data-description="Sometimes her levell'd eyes their carriage ride" /></a></li>
<li><a href="#"><img src="images/thumbs/24.jpg" data-large="images/24.jpg" alt="image24" data-description="As they did battery to the spheres intend" /></a></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
</div><!-- content -->
</div><!-- container -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
</body>
</html>JS代码(gallery.js):
$(function(){
// ======================= imagesLoaded Plugin ===============================// https://github.com/desandro/imagesloaded// $('#my-container').imagesLoaded(myFunction)// execute a callback when all images have loaded.// needed because .load() doesn't work on cached images// callback function gets image collection as argument// this is the container// original:mit license. paul irish. 2010.// contributors:Oren Solomianik,David DeSandro,Yiannis Chatzikonstantinou$.fn.imagesLoaded= function( callback ){
var $images = this.find('img'),len= $images.length,_this= this,blank= 'data:image/gif;
base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback(){
callback.call( _this,$images );
}
function imgLoaded(){
if ( --len <= 0 && this.src !== blank ){
setTimeout( triggerCallback );
$images.off( 'load error',imgLoaded );
}
}
if ( !len ){
triggerCallback();
}
$images.on( 'load error',imgLoaded ).each( function(){
// cached images don't fire load sometimes,so we reset src.if (this.complete || this.complete === undefined){
var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f// data uri bypasses webkit log warning (thx doug jones)this.src = blank;
this.src = src;
}
}
);
return this;
}
;
// gallery containervar $rgGallery= $('#rg-gallery'),// carousel container$esCarousel= $rgGallery.find('div.es-carousel-wrapper'),// the carousel items$items= $esCarousel.find('ul > li'),// total number of itemsitemsCount= $items.length;
Gallery= (function(){
// index of the current itemvar current= 0,// mode:carousel || fullviewmode= 'carousel',// control if one image is being loadedanim= false,init= function(){
// (not necessary) preloading the images here...$items.add('<img src="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function(){
// add options_addViewModes();
// add large image wrapper_addImageWrapper();
// show first image_showImage( $items.eq( current ) );
}
);
// initialize the carouselif( mode === 'carousel' )_initCarousel();
}
,_initCarousel= function(){
// we are using the elastislide plugin:// http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/$esCarousel.show().elastislide({
imageW:65,onClick:function( $item ){
if( anim ) return false;
anim= true;
// on click show image_showImage($item);
// change currentcurrent= $item.index();
}
}
);
// set elastislide's current to current$esCarousel.elastislide( 'setCurrent',current );
}
,_addViewModes= function(){
// top right buttons:hide / show carouselvar $viewfull= $('<a href="#" class="rg-view-full"></a>'),$viewthumbs= $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');
$rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
$viewfull.on('click.rgGallery',function( event ){
if( mode === 'carousel' )$esCarousel.elastislide( 'destroy' );
$esCarousel.hide();
$viewfull.addClass('rg-view-selected');
$viewthumbs.removeClass('rg-view-selected');
mode= 'fullview';
return false;
}
);
$viewthumbs.on('click.rgGallery',function( event ){
_initCarousel();
$viewthumbs.addClass('rg-view-selected');
$viewfull.removeClass('rg-view-selected');
mode= 'carousel';
return false;
}
);
if( mode === 'fullview' )$viewfull.trigger('click');
}
,_addImageWrapper= function(){
// adds the structure for the large image and the navigation buttons (if total items > 1)// also initializes the navigation events$('#img-wrapper-tmpl').tmpl({
itemsCount:itemsCount}
).appendTo( $rgGallery );
if( itemsCount > 1 ){
// addNavigationvar $navPrev= $rgGallery.find('a.rg-image-nav-prev'),$navNext= $rgGallery.find('a.rg-image-nav-next'),$imgWrapper= $rgGallery.find('div.rg-image');
$navPrev.on('click.rgGallery',function( event ){
_navigate( 'left' );
return false;
}
);
$navNext.on('click.rgGallery',function( event ){
_navigate( 'right' );
return false;
}
);
// add touchwipe events on the large image wrapper$imgWrapper.touchwipe({
wipeLeft:function(){
_navigate( 'right' );
}
,wipeRight:function(){
_navigate( 'left' );
}
,preventDefaultEvents:false}
);
$(document).on('keyup.rgGallery',function( event ){
if (event.keyCode == 39)_navigate( 'right' );
else if (event.keyCode == 37)_navigate( 'left' );
}
);
}
}
,_navigate= function( dir ){
// navigate through the large imagesif( anim ) return false;
anim= true;
if( dir === 'right' ){
if( current + 1 >= itemsCount )current = 0;
else++current;
}
else if( dir === 'left' ){
if( current - 1 < 0 )current = itemsCount - 1;
else--current;
}
_showImage( $items.eq( current ) );
}
,_showImage= function( $item ){
// shows the large image that is associated to the $itemvar $loader= $rgGallery.find('div.rg-loading').show();
$items.removeClass('selected');
$item.addClass('selected');
var $thumb= $item.find('img'),largesrc= $thumb.data('large'),title= $thumb.data('description');
$('<img/>').load( function(){
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
$loader.hide();
if( mode === 'carousel' ){
$esCarousel.elastislide( 'reload' );
$esCarousel.elastislide( 'setCurrent',current );
}
anim= false;
}
).attr( 'src',largesrc );
}
,addItems= function( $new ){
$esCarousel.find('ul').append($new);
$items= $items.add( $($new) );
itemsCount= $items.length;
$esCarousel.elastislide( 'add',$new );
}
;
return{
init:init,addItems:addItems}
;
}
)();
Gallery.init();
/*Example to add more items to the gallery:var $new = $('<li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>');
Gallery.addItems( $new );
*/
}
);
CSS代码(demo.css):
@import url('reset.css');/* General Codrops Demo Style */
body{background:#1F1F1F url(../images/pattern.png) repeat top left;color:#fff;font-family:'PT Sans Narrow',Arial,sans-serif;font-size:14px;}
a{color:#ddd;text-decoration:none;}
a:hover{color:#00c6e3;}
p.sub{padding:25px 10px 10px 10px;text-align:left;color:#aaa;}
.clr{clear:both;}
h1{margin:5px;font-size:24px;text-align:center;color:#fff;font-family:"Pacifico",Georgia,"Times New Roman",serif;text-shadow:1px 1px 1px #000;padding-bottom:10px;line-height:40px;}
h1 span{font-size:10px;display:block;letter-spacing:2px;font-family:'Trebuchet MS','Myriad Pro',Arial,sans-serif;color:#00c6e3;line-height:14px;padding-top:10px;text-shadow:none;text-transform:uppercase;}
/* Header Style */
.header{font-size:13px;background:#000;opacity:0.9;text-transform:uppercase;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{line-height:18px;padding:0 4px;letter-spacing:1px;text-shadow:1px 1px 1px #000;color:#ddd;}
.header a:hover{color:#fff;}
.header a span{font-weight:bold;}
.header span.right_ab{float:right;}
.content{margin:0px 25px 30px 25px;}
@media screen and (max-width:640px){.header a{display:block;text-align:center;font-size:10px;text-shadow:none;}
.header span.right_ab{float:none;}
}
分享到QQ
分享到微博
微信扫一扫
