在我们对我们的图像画廊有了很多很棒的反馈之后，我们决定采纳一些建议并创建一个使用Flickr API的图库。其目的是建立一个可以很容易集成到网站的底层光杆。它最初是隐藏的，当点击手柄时就会滑出。首先，照片集被显示，当其中一个被选中时，所有的图像都可以被看作是缩略图。当单击缩略图时，一个完整的图像视图就会显示为一个叠加。
在我们的演示中，我们使用了tibchris的很棒的photostream。
为了熟悉Flickr API，您可以在Flickr服务网站上找到一些信息。
所以,让我们开始吧!
HTML包含整个photobar的一个主包装器。在这个内部，我们将有一个div用于完整的图像视图和div的photobar与相册缩略图和图像缩略图包装。除此之外，我们还会有我们的可视句柄和一个div用于叠加:
<!-- main wrapper: flickr_photobar --><div></span> </a> </div></div>正如您所看到的，许多元素将在开始时被隐藏。在JavaScript函数中，我们将控制这些元素的可见性和外观。
让我们看一下样式。
CSS由于我们希望这个画廊作为任何网站的集成部分，我们将给予大部分的元素一个固定的位置。这意味着，我们将把它们添加到网站的其他所有内容之上。如果你遇到一些问题关于其他物品在你网站上的这个画廊,你可能想要调整z-index。
好,让我们来定义一些通用样式:
.flickr_photobar{ font-family:Arial,Helvetica,sans-serif; text-transform:uppercase; font-size:11px;}.flickr_photobar a{ outline:none;}.flickr_photobar a:hover{ outline:none;}因为我们将会滥用很多链接元素，而不是链接(好吧，现在不要打我了，我会试着改掉这个习惯)，我们想删除这个大纲，这样难看的虚线就不会出现在Firefox中。
photobar div将有以下样式:
.photobar{ position:fixed; bottom:-96px; left:0px; width:100%; height:95px;}我们将把光杆的底部设置为负值。toggle(或句柄)仍然是可见的，因为我们将把它设置为负值，将其拉起。稍后我们将研究这个类。
拇指类将被应用于两个，专辑(或集)缩略图和图像缩略图的div属于各自的集合:
.thumbs{ position:absolute; bottom:0px; left:0px; width:100%; height:95px; border-top:1px solid #222; background-color:#3D3D3D;}前一个和下一个箭头的样式如下:
.thumbs a.prev,.thumbs a.next{ width:20px; height:83px; position:absolute; top:4px; margin:0px; z-index:10; border:1px solid #222; -moz-box-shadow:0px 0px 1px #777 inset; -webkit-box-shadow:0px 0px 1px #777 inset; box-shadow:0px 0px 1px #777 inset;}.thumbs a.prev:hover,.thumbs a.next:hover{ background-color:#404040;}.thumbs a.prev{ left:0px; background:#333 url(../prev.png) no-repeat center center;}.thumbs a.next{ right:0px; background:#333 url(../next.png) no-repeat center center;}在方框阴影中的inset属性中，我们可以创建一个不错的效果:如果您有一个黑色背景，并添加一个灯光的inset框阴影，那么元素将会有轻微的浮雕。
拇指的包装将会有以下的样式:
.thumbs .thumbsWrapper{ height:95px; left:22px; right:22px; overflow:hidden; position:absolute; top:0;}缩略图的无序列表将绝对定位，我们将隐藏任何溢出。它的宽度是动态计算的它取决于缩略图的数量。
.thumbs ul{ list-style:none; margin:0px; padding:0px; height:90px; overflow:hidden; position:absolute; left:0px; top:0px;}.thumbs ul li a{ position:relative; float:left; margin:6px 2px 0px 2px; color:#fff; text-shadow:1px 1px 1px #000; text-decoration:none; height:81px; width:81px;}我们将给相册/套缩略图一个黑暗边界，并且图像缩略图一个光的边界:
.albums ul li a img{ border:3px solid #111111; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000;}.images ul li a img{ border:3px solid #f9f9f9; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000;}对每个集合或图像的描述将出现在每个缩略图的顶部。我们将使其略微透明，不允许文本溢出。在webkit浏览器中，我们可以使用文本溢出:省略号(它减少了太长的单词，增加了两个点)，我们需要设置溢出:隐藏在其他浏览器中:
.thumbs a span{ position:absolute; bottom:3px; left:3px; right:3px; background-color:#333; font-size:9px; padding:2px 2px; border-top:1px solid #111; display:none; text-align:center; overflow:hidden; text-overflow:ellipsis; max-height:70px; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}这就是我们实际显示描述跨度的方式——当我们在图像链接上盘旋时:
.thumbs a:hover span{ display:block;}在右边出现的图像的句柄和photobar的主句柄将具有以下样式:
span.images_toggle{ position:absolute; top:-26px; right:20px; background-color:#3D3D3D; border:1px solid #222; color:#EEEEEE; font-size:10px; padding:0px 6px 0px 12px; height:24px; line-height:24px; text-transform:uppercase; text-shadow:1px 1px 2px #000; -moz-box-shadow:0px -1px 3px #ccc; -webkit-box-shadow:0px -1px 3px #ccc; box-shadow:0px -1px 3px #ccc; -moz-border-radius:5px 5px 0px 0px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px;}span.images_toggle a{ background-color:#222; border:1px solid #000; cursor:pointer; line-height:16px; padding:0px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}span.images_toggle a:hover{ background-color:#000;}.photobar a.toggle{ position:absolute; top:-26px; left:20px; background-color:#3D3D3D; border:1px solid #222; color:#EEEEEE; font-size:10px; padding:0px 36px 0px 36px; line-height:24px; height:24px; text-transform:uppercase; text-shadow:1px 1px 2px #000; -moz-box-shadow:0px -1px 3px #ccc; -webkit-box-shadow:0px -1px 3px #ccc; box-shadow:0px -1px 3px #ccc; -moz-border-radius:5px 5px 0px 0px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px; cursor:pointer;}span.loading_small{ background:transparent url(../loading_small.gif) no-repeat center center; position:absolute; right:10px; top:0px; width:16px; height:24px;}.photobar a.toggle:hover{ background-color:#111;}图像缩略图容器需要有一个更高的z索引，而不是一个集合:
.photobar .images{ z-index:20;}当我们显示一个完整的图像时出现的覆盖将有如下的样式:
.flickr_photobar .overlay{ z-index:90; background-color:#000; width:100%; height:100%; position:fixed; top:0px; left:0px; opacity:0.9; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);}我们使这个位置固定，这样当用户滚动页面时，它总是停留在页面的可见区域:
.photopreview{ text-align:center; position:fixed; width:100%; height:100%; top:0px; left:0px; z-index:91;}完整图像视图的以下包装器将需要以下样式，因为我们希望图像的中心是垂直和水平的:
.photopreview .preview_wrapper{ position:relative; text-align:center; margin:0 auto;}.photopreview .preview{ display:table-cell; text-align:center; width:0px; height:0px; padding-top:25px; vertical-align:middle;}.photopreview .preview img{ vertical-align:middle; background-color:#555; padding:1px; border:8px solid #f9f9f9; -moz-box-shadow:1px 1px 5px #222; -webkit-box-shadow:1px 1px 5px #222; box-shadow:1px 1px 5px #222;}图像的描述将被放入一个固定在页面顶部的跨度:
.photopreview .preview span{ background-color: #111111; color:#FFFFFF; height:20px; left:0; line-height:20px; position:fixed; text-align:center; text-shadow:1px 1px 1px #000000; top:0; width:100%; -moz-box-shadow:1px 1px 5px #000000; -webkit-box-shadow:1px 1px 5px #000000; box-shadow:1px 1px 5px #000000;}加载图像时出现的小加载div将具有以下样式:
.loading{ width:50px; height:50px; position:fixed; top:50%; left:50%; z-index:95; margin:-25px 0px 0px -25px; -moz-border-radius:10px; -webkit-border-radius:20px; border-radius:10px; background:#000 url(../loading.gif) no-repeat center center; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}我们将在右上角添加一个close元素，允许用户关闭图像预览:
.close{ background:#000 url(../close.png) no-repeat center center; cursor:pointer; height:20px; position:fixed; right:-11px; top:0; width:90px; z-index:1000; cursor:pointer; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}下一个和以前的控制将被设计为:
.photopreview a.img_next,.photopreview a.img_prev{ position:fixed; top:50%; height:60px; width:50px; margin-top:-30px; background-color:#000; background-repeat:no-repeat; background-position:center center;}.photopreview a.img_next{ background-image:url(../next.png); -moz-border-radius:20px 0px 0px 20px; -webkit-border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; border-top-left-radius:20px; border-bottom-left-radius:20px; right:0px;}.photopreview a.img_prev{ background-image:url(../prev.png); -moz-border-radius:0px 20px 20px 0px; -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; left:0px;}这就是所有的风格!
让我们添加一些JavaScript魔法!
JavaScript对于我们的脚本，我们将使用jQuery viewport脚本。
在下面我们将展示一些重要的脚本片段，因为它是一个非常大的脚本。下载ZIP文件时，可以查看完整的注释脚本。
让我们从脚本的开头开始，我们需要定义一些变量:
var api_key = [your API Key];var user_id = [your Flickr user ID];/*use:Square,Thumbnail,Small,Medium or Original forthe large image size you want to load!*/var large_image_size = 'Medium';/*the current Set id / the current Photo id*/var photo_set_id,photo_id;/*the current position of the image being viewed*/var current = -1;var continueNavigation = false;/*flickr API Call to get List of Sets*/var sets_service = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getList' + '&api_key=' + api_key;var sets_url = sets_service + '&user_id=' + user_id + '&format=json&jsoncallback=?';/*flickr API Call to get List of Photos from a Set*/var photos_service = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos' + '&api_key=' + api_key;/*flickr API Call to get List of Sizes of a Photo*/var large_photo_service = 'http://api.flickr.com/services/rest/?&method=flickr.photos.getSizes' + '&api_key=' + api_key;/*elements caching...*/var $setsContainer = $('#sets').find('ul');var $photosContainer = $('#images').find('ul');var $photopreview = $('#flickr_photopreview');var $flickrOverlay = $('#flickr_overlay');var $loadingStatus = $('#flickr_toggle').find('.loading_small');var ul_width,spacefit,fit;我们的第一步是加载相应用户的所有集合。下面的代码我们将这样做:
/* start: open Flickr Photostream */$('#flickr_toggle').toggle(function(){ $('#photobar').stop().animate({'bottom':'0px'},200,function(){ if($setsContainer.is(':empty')){ /* if sets not loaded, load them */ LoadSets(); } });},function(){ /* minimize the main bar, and minimize the photos bar. next time we maximize, the view will be on the sets */ $('#photobar').stop().animate({'bottom':'-96px'},200,function(){ $('#images').css('bottom','-125px'); });});/*Loads the User Photo Sets*/function LoadSets(){ $loadingStatus.css('visibility','visible'); $.getJSON(sets_url,function(data){ if(data.stat != 'fail') { var sets_count = data.photosets.photoset.length; /* adapt ul width based on number of results */ ul_width = sets_count * 85 + 85; $setsContainer.css('width',ul_width + 'px'); for(var i = 0; i < sets_count; ++i){ var photoset = data.photosets.photoset[i]; var primary = photoset.primary; var secret = photoset.secret; var server = photoset.server; var farm = photoset.farm; /* source for the small thumbnail */ var photoUrl = 'http://farm'+farm+'.static.flickr.com/'+server+'/'+primary+'_'+secret+'_s.jpg'; var $elem = $('<li />'); var $link = $('<a />').load(function(){ ++images_loaded; if(images_loaded == toLoad){ $loadingStatus.css('visibility','hidden'); $setsContainer.find('img').fadeIn(); } }).attr('src',$space.data('photoUrl')).attr('alt',$space.data('id')); var $set_name = $('<span />',{'html':$space.data('setName')}); $space.append($set_name).append($img).removeClass('toLoad'); });}下一个函数用于加载被单击的特定集合的照片:
/*Loads the Set's Photos*/function LoadPhotos(){ $photosContainer.empty(); $loadingStatus.css('visibility','visible'); var photos_url = photos_service + '&photoset_id=' + photo_set_id + '&media=photos&format=json&jsoncallback=?'; $.getJSON(photos_url,function(data){ if(data.stat != 'fail') { var photo_count = data.photoset.photo.length; /* adapt ul width based on number of results */ var photo_count_total = photo_count + $photosContainer.children('li').length; ul_width = photo_count_total * 85 + 85; $photosContainer.css('width',ul_width + 'px'); for(var i = 0; i < photo_count; ++i){ var photo = data.photoset.photo[i]; var photoid = photo.id; var secret = photo.secret; var server = photo.server; var farm = photo.farm; var photoUrl = 'http://farm'+farm+'.static.flickr.com/'+server+'/'+photoid+'_'+secret+'_s.jpg'; var $elem = $('<li />'); var $link = $('<a />').load(function(){ ++images_loaded; if(images_loaded == toLoad){ $loadingStatus.css('visibility','hidden'); $photosContainer.find('img').fadeIn(); /* if we were navigating through the large images set: */ if(continueNavigation){ continueNavigation = false; var $thumb = $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img'); photo_id = $thumb.attr('alt'); LoadLargePhoto(); } } }).attr('src',$space.data('photoUrl')) .attr('alt',$space.data('photoid')); var $photo_title = $('<span/>',{'html':$space.data('photo_title')}); $space.append($photo_title).append($img).removeClass('toLoad'); });}现在我们需要一个加载完整图像的函数:
/*loads the main image*/function LoadLargePhoto(){ removeLargeImage(); var $theThumb = $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img'); var photo_title = $theThumb.parent().data('photo_title'); var $loading = $photopreview.find('.loading'); $loading.show(); $photopreview.show(); $flickrOverlay.show(); $('#preview_close').show(); var large_photo_url = large_photo_service + '&photo_id=' + photo_id + '&format=json&jsoncallback=?'; $.getJSON(large_photo_url,function(data){ if(data.stat != 'fail') { var count_sizes = data.sizes.size.length; var largest_photo_src; for(var i = 0; i < count_sizes; ++i){ if(data.sizes.size[i].label == large_image_size) largest_photo_src = data.sizes.size[i].source; } $('<img />').load(function(){ var $this = $(this); /* resize the image to fit in the browser's window */ resize($this); $loading.hide(); /*just to make sure there's no image:*/ removeLargeImage(); $photopreview.find('.preview').append($this); $('#large_phototitle').empty().html(photo_title); }).attr('src',largest_photo_src); } });}接下来的功能和事件(我们将不再详细讨论)通过缩略图和预览图像来控制基本的导航。我们还添加了一个resize函数，它将图像的大小调整到当前的viewport。查看ZIP文件中的脚本，您可以在其中看到注释。
这是它!我希望你喜欢这个教程，觉得它有用!
