参照：Thumbnails Preview Slider with jQuery
Flickrに投稿した写真のサムネイルを表示してみました。●アイコンにマウスオーバーでサムネイルをツールチップ風に表示し、●アイコンをクリックすると、Flickrの写真ページに遷移します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/ThumbnailsPreviewSlider/thumbnail_slider.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
var url="http://api.flickr.com/services/feeds/photos_public.gne?id=22559849@N06&lang=en-us&format=json";
$.getJSON(url+"&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
var thumb=item.media.m;
var link=item.link;
var size_square=thumb.replace("_m.jpg","_s.jpg");
$("ul.ts_preview").append("<img src='"+size_square+"' />");
$("#demo1 ul.ts_container").prepend("<li><a href='"+link+"' target='_blank'>Image</a></li>");
});
$('#demo1').thumbnailSlider({
speed:1000,
easing:'easeOutExpo'
});
});
});
</script>
<script type="text/javascript">
(function($) {
$.fn.thumbnailSlider = function(options) {
var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
return this.each(function() {
var $this = $(this),
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
var $ts_container = $this.children('.ts_container'),
$ts_thumbnails = $ts_container.children('.ts_thumbnails'),
$nav_elems = $ts_container.children('li').not($ts_thumbnails),
total_elems = $nav_elems.length,
$ts_preview_wrapper = $ts_thumbnails.children('.ts_preview_wrapper'),
$arrow = $ts_thumbnails.children('span'),
$ts_preview = $ts_preview_wrapper.children('.ts_preview');
/*
calculate sizes for $ts_thumbnails:
width -> width thumbnail + border (2*5)
height -> height thumbnail + border + triangle height(6)
top -> -(height plus margin of 5)
left -> leftDot - 0.5*width + 0.5*widthNavDot
this will be set when hovering the nav,
and the default value will correspond to the first nav dot
*/
var w_ts_thumbnails = o.thumb_width + 2*5,
h_ts_thumbnails = o.thumb_height + 2*5 + 6,
t_ts_thumbnails = -(h_ts_thumbnails + 5),
$first_nav = $nav_elems.eq(0),
l_ts_thumbnails = $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width();
$ts_thumbnails.css({
width : w_ts_thumbnails + 'px',
height : h_ts_thumbnails + 'px',
top : t_ts_thumbnails + 'px',
left : l_ts_thumbnails + 'px'
});
/*
calculate the top and left for the arrow of the tooltip
top -> thumb height + border(2*5)
left -> (thumb width + border)/2 -width/2
*/
var t_arrow = o.thumb_height + 2*5,
l_arrow = (o.thumb_width + 2*5) / 2 - $arrow.width() / 2;
$arrow.css({
left : l_arrow + 'px',
top : t_arrow + 'px'
});
/*
calculate the $ts_preview width -> thumb width times number of thumbs
*/
$ts_preview.css('width' , total_elems*o.thumb_width + 'px');
/*
set the $ts_preview_wrapper width and height -> thumb width / thumb height
*/
$ts_preview_wrapper.css({
width : o.thumb_width + 'px',
height : o.thumb_height + 'px'
});
//hover the nav elems
$nav_elems.bind('mouseenter',function(){
var $nav_elem = $(this),
idx = $nav_elem.index();
/*
calculate the new left
for $ts_thumbnails
*/
var new_left = $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width();
$ts_thumbnails.stop(true)
.show()
.animate({
left : new_left + 'px'
},o.speed,o.easing);
/*
animate the left of the $ts_preview to show the right thumb
*/
$ts_preview.stop(true)
.animate({
left : -idx*o.thumb_width + 'px'
},o.speed,o.easing);
//zoom in the thumb image if zoom is true
if(o.zoom && o.zoomratio > 1){
var new_width = o.zoomratio * o.thumb_width,
new_height = o.zoomratio * o.thumb_height;
//increase the $ts_preview width in order to fit the zoomed image
var ts_preview_w = $ts_preview.width();
$ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width) + 'px');
$ts_preview.children().eq(idx).find('img').stop().animate({
width : new_width + 'px',
height : new_height + 'px'
},o.zoomspeed);
}
}).bind('mouseleave',function(){
//if zoom set the width and height to defaults
if(o.zoom && o.zoomratio > 1){
var $nav_elem = $(this),
idx = $nav_elem.index();
$ts_preview.children().eq(idx).find('img').stop().css({
width : o.thumb_width + 'px',
height : o.thumb_height + 'px'
});
}
$ts_thumbnails.stop(true)
.hide();
}).bind('click',function(){
var $nav_elem = $(this),
idx = $nav_elem.index();
o.onClick(idx);
});
});
};
$.fn.thumbnailSlider.defaults = {
speed : 100,//speed of each slide animation
easing : 'jswing',//easing effect for the slide animation
thumb_width : 75,//your photos width
thumb_height: 75,//your photos height
zoom : false,//zoom animation for the thumbs
zoomratio : 1.3,//multiplicator for zoom (must be > 1)
zoomspeed : 15000,//speed of zoom animation
onClick : function(){return false;}//click callback
};
})(jQuery);
</script>
<!-- CSS -->
<style media="screen,projection" type="text/css">
#demo1 { margin:100px 50px; }
/* over-write */
ul.ts_container { width:100%; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://tympanus.net/codrops/2011/01/27/thumbnails-preview-slider/'>Thumbnails Preview Slider with jQuery</a></p>
<p>Flickrに投稿した写真のサムネイルを表示してみました。●アイコンにマウスオーバーでサムネイルをツールチップ風に表示し、●アイコンをクリックすると、Flickrの写真ページに遷移します。</p>
<!-- CODE -->
<div id="demo1" class="demo">
<ul class="ts_container">
<li class="ts_thumbnails"><!-- animate to slide frame -->
<div class="ts_preview_wrapper">
<ul class="ts_preview"><!-- animate left to slide to the right thumb --></ul>
</div>
<span></span>
</li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>