function()の定義に問題があると思うのすがご教授頂きたく。。
/* nav01
======================================== */
$(function () {
var num = 1;
$('#nav1 li')
//マウスオーバー画像を配置
.each(function roll(){
$(this).css('background', 'url(images/nav0'+num+'.gif) no-repeat 0px -47px')
num++;
})
.find('img').hover(
function (){
$(this).stop().animate({'opacity' : '0'}, 200);
},
function (){
$(this).stop().animate({'opacity' : '1'}, 1000);
}
);
});
/* zoom1
======================================== */
$(window).load(function() {
$('body').nivoZoom();
});
$(function(){
$('#top1 a').click(function(){
return false;
});
});
</script>
No.1
1504
493
100pt
http://jsfiddle.net/cherenkov/nHS5m/
こうとか。
参考にしたサイトのデモコードが良くない感じですかね。
<!DOCTYPE html> <html 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 href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://nivozoom.dev7studios.com/scripts/jquery.nivo.zoom.pack.js"></script> <script type="text/javascript"> /* nav01 ======================================== */ $(function() { $('#nav1 li').each(function(i){ $(this).css('background', 'url(images/nav0' + (i+1) + '.gif) no-repeat 0px -47px') }).find('img').hover( function() { $(this).stop().animate({'opacity' : 0}, 200); }, function() { $(this).stop().animate({'opacity' : 1}, 1000); } ); }); /* zoom1 ======================================== */ $(window).load(function() { $('body').nivoZoom(); }); </script> <style type="text/css"> #demo { margin:100px; } /* * jQuery Nivo Zoom v1.0 * http://nivozoom.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * April 2010 */ .nivoZoomHover { position:absolute; top:0px; left:0px; z-index:9; width:100%; height:100%; cursor:pointer; } .nivoCaption { display:none; position:absolute; z-index:110; text-align:center; background:#010101; color:#fff; padding:4px 0; overflow:hidden; } </style> </head> <body> <div style="margin:10px 0;text-align:center;"> <ul id="nav1"> <li><a href="#"><img src="images/nav01.gif" width="140" height="47" alt="01" /></a></li> <li><a href="#"><img src="images/nav02.gif" width="140" height="47" alt="02" /></a></li> <li><a href="#"><img src="images/nav03.gif" width="140" height="47" alt="03" /></a></li> </ul> <ul id="top1"> <li><a href="https://www.hatena.ne.jp/images/character/eps-image-cinnamon.gif" class="nivoZoom topLeft"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182114_m.jpg" alt=""></a></li> <li><a href="https://www.hatena.ne.jp/images/character/eps-image-papiyone.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182110_m.jpg"></a></li> <li><a href="https://www.hatena.ne.jp/images/character/eps-image-ikezun.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182054_m.jpg"></a></li> </ul> </body> </html>
No.1
1504493
ここでベストアンサー
100pt
http://jsfiddle.net/cherenkov/nHS5m/
こうとか。
参考にしたサイトのデモコードが良くない感じですかね。
<!DOCTYPE html> <html 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 href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://nivozoom.dev7studios.com/scripts/jquery.nivo.zoom.pack.js"></script> <script type="text/javascript"> /* nav01 ======================================== */ $(function() { $('#nav1 li').each(function(i){ $(this).css('background', 'url(images/nav0' + (i+1) + '.gif) no-repeat 0px -47px') }).find('img').hover( function() { $(this).stop().animate({'opacity' : 0}, 200); }, function() { $(this).stop().animate({'opacity' : 1}, 1000); } ); }); /* zoom1 ======================================== */ $(window).load(function() { $('body').nivoZoom(); }); </script> <style type="text/css"> #demo { margin:100px; } /* * jQuery Nivo Zoom v1.0 * http://nivozoom.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * April 2010 */ .nivoZoomHover { position:absolute; top:0px; left:0px; z-index:9; width:100%; height:100%; cursor:pointer; } .nivoCaption { display:none; position:absolute; z-index:110; text-align:center; background:#010101; color:#fff; padding:4px 0; overflow:hidden; } </style> </head> <body> <div style="margin:10px 0;text-align:center;"> <ul id="nav1"> <li><a href="#"><img src="images/nav01.gif" width="140" height="47" alt="01" /></a></li> <li><a href="#"><img src="images/nav02.gif" width="140" height="47" alt="02" /></a></li> <li><a href="#"><img src="images/nav03.gif" width="140" height="47" alt="03" /></a></li> </ul> <ul id="top1"> <li><a href="https://www.hatena.ne.jp/images/character/eps-image-cinnamon.gif" class="nivoZoom topLeft"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182114_m.jpg" alt=""></a></li> <li><a href="https://www.hatena.ne.jp/images/character/eps-image-papiyone.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182110_m.jpg"></a></li> <li><a href="https://www.hatena.ne.jp/images/character/eps-image-ikezun.gif" class="nivoZoom"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hatena/20080905/20080905182054_m.jpg"></a></li> </ul> </body> </html>
回答を更新しました
わざわざ更新してのご回答ありがとうございます、やはりロールオーバーが問題のようですが今回はそこがメインではないのでよしとします。
何度も丁寧なご指導、ありがとうございました。
失礼致します。
htmlのソースはこちらです。
<html 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 href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.nivo.zoom.js"></script>
<script type="text/javascript"></p> <p>/* nav01</p> <p>======================================== */</p> <p> $(function() {</p> <p> var num = 1;</p> <p> $('#nav1 li')</p> <p> //マウスオーバー画像を配置</p> <p> .each(function(){</p> <p> $(this).css('background', 'url(images/nav0'+num+'.gif) no-repeat 0px -47px')</p> <p> num++;</p> <p> })</p> <p> .find('img').hover(</p> <p> function(){ </p> <p> $(this).stop().animate({'opacity' : '0'}, 200); </p> <p> },</p> <p> function(){</p> <p> $(this).stop().animate({'opacity' : '1'}, 1000);</p> <p> }</p> <p> ); </p> <p>});</p> <p>/* zoom1</p> <p>======================================== */</p> <br> <p> $(window).load(function() {</p> <p> $('body').nivoZoom();</p> <p> });</p> <p> $(function(){</p> <p> $('#top1 a').click(function(){</p> <p> return false;</p> <p> });</p> <p> });</p> <p> </p> <p> </script>
<style type="text/css"></p> <p>#demo {</p> <p> margin:100px;</p> <p>}</p> <p>/*</p> <p> * jQuery Nivo Zoom v1.0</p> <p> * <a href="http://nivozoom.dev7studios.com" target="_blank">http://nivozoom.dev7studios.com</a></p> <p> *</p> <p> * Copyright 2010, Gilbert Pellegrom</p> <p> * Free to use and abuse under the MIT license.</p> <p> * <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">http://www.opensource.org/licenses/mit-license.php</a></p> <p> * </p> <p> * April 2010</p> <p> */</p> <p>.nivoZoomHover {</p> <p> position:absolute;</p> <p> top:0px;</p> <p> left:0px;</p> <p> z-index:9;</p> <p> width:100%;</p> <p> height:100%;</p> <p> cursor:pointer;</p> <p>}</p> <p>.nivoCaption {</p> <p> display:none;</p> <p> position:absolute;</p> <p> z-index:110;</p> <p> text-align:center;</p> <p> background:#010101;</p> <p> color:#fff;</p> <p> padding:4px 0;</p> <p> overflow:hidden;</p> <p>}</p> <p> </style>
</head>
<body>
</body>
</html>
No.2
1728320
10pt
この部分の関数の対象要素が指定されていないので、このままでは動きません。
9
8
function (){
$(this).stop().animate({'opacity' : '1'}, 1000);
}
処理前の画面です。
左のロールオーバーがおかしくなっています。
https://picasaweb.google.com/lh/photo/5STYNML4C5ACUVKMDd8KG9MTjN...
処理後の画面です。
３つ並んだ画像がクリックで拡大されています。
また、ロールオーバーでボタンの色が変わっています。
https://picasaweb.google.com/lh/photo/k1QSIZd9E8ZxD0NvQxcvTNMTjN...
Cherenkov
2012/09/29 22:11:13
門屋 徹郎
1
回答を更新しました
2012/09/29 23:30:07わざわざ更新してのご回答ありがとうございます、やはりロールオーバーが問題のようですが今回はそこがメインではないのでよしとします。
2012/09/30 01:05:38何度も丁寧なご指導、ありがとうございました。
失礼致します。