設置サンプル

参照：jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

▼サムネイル画像にマウスオーバーすると、サムネイル画像をキャプション付きでズームアップ表示します。

明太子とろろごはん

鴨ネギの溶岩焼き

大根の豆乳煮

アスパラ

すき焼き

卵かけごはん

海老フライ

ぐつぐつ湯豆腐

牛肉の煮物

設置サンプルのソース

<!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" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> $(function(){ //move the image in pixel var move = -15; //zoom percentage, 1.2 =120% var zoom = 1.3; //On mouse over those thumbnail $('.zitem').hover(function() { //Set the width and height according to the zoom percentage width = $('.zitem').width() * zoom; height = $('.zitem').height() * zoom; //Move and zoom the image $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); //Display the caption $(this).find('div.caption').stop(false,true).fadeIn(200); }, function() { //Reset the image $(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100}); //Hide the caption $(this).find('div.caption').stop(false,true).fadeOut(200); }); }); </script> <style type="text/css"> .zitem { width:180px; height:180px; border:4px solid #222; margin:5px 5px 5px 0; /* required to hide the image after resized */ overflow:hidden; /* for child absolute position */ position:relative; /* display div in line */ float:left; } .zitem .caption { width:180px; height:30px; background:#000; color:#fff; font-weight:bold; /* fix it at the bottom */ position:absolute; bottom:-1px; /* fix IE issue */ left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=70); /* ie */ -moz-opacity:0.7; /* old mozilla browser like netscape */ -khtml-opacity: 0.7; /* for really really old safari */ opacity: 0.7; /* css standard, currently it works in most modern browsers like firefox, */ } .zitem .caption a { text-decoration:none; color:#fff; font-size:12px; /* add spacing and make the whole row clickable*/ padding:5px; display:block; } .zitem img { border:0; /* allow javascript moves the img position*/ position:absolute; } .clear { clear:both; } </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://www.queness.com/post/590/jquery-thumbnail-with-zooming-image-and-fading-caption-tutorial' target='_blank'>jQuery Thumbnail with Zooming Image and Fading Caption Tutorial</a></p> <p>▼サムネイル画像にマウスオーバーすると、サムネイル画像をキャプション付きでズームアップ表示します。</p>  <div class="zitem"> <a href="#"><img src="http://farm5.static.flickr.com/4012/5150664727_b8f80eda81_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">明太子とろろごはん</a> </div> </div> <div class="zitem"> <a href="#"><img src="http://farm5.static.flickr.com/4037/5150863795_4712c20d63_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">鴨ネギの溶岩焼き</a> </div> </div> <div class="zitem"> <a href="#"><img src="http://farm5.static.flickr.com/4145/5151480248_6a4d8ff97c_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">大根の豆乳煮</a> </div> </div> <div class="clear"></div> <div class="zitem"> <a href="#"><img src="http://farm5.static.flickr.com/4011/5150873793_5e3e89ab18_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">アスパラ</a> </div> </div> <div class="zitem"> <a href="#"><img src="http://farm2.static.flickr.com/1261/5154145734_dd6d41721d_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">すき焼き</a> </div> </div> <div class="zitem"> <a href="#"><img src="http://farm2.static.flickr.com/1088/5142076100_d7d66bdb26_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">卵かけごはん</a> </div> </div> <div class="clear"></div> <div class="zitem"> <a href="#"><img src="http://farm2.static.flickr.com/1202/5142092074_761703bec3_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">海老フライ</a> </div> </div> <div class="zitem"> <a href="#"><img src="http://farm2.static.flickr.com/1332/5118048078_c57afb18af_m.jpg" alt="" title="" width="180" height="180"/></a> <div class="caption"> <a href="">ぐつぐつ湯豆腐</a> </div> </div> <div class="zitem"> <a href="#"><img src="http://farm2.static.flickr.com/1120/5117428215_9d5b33553a_m.jpg" alt=" " title="" width="180" height="180"/></a> <div class="caption"> <a href="">牛肉の煮物</a> </div> </div> <div class="clear"></div>  </div> </body> </html>