参照: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> <h2 class='h'>設置サンプル</h2> <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>