- 締切済み
Jqueryで画像タイトル表示させる
ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。 サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。 以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォト ギャラリー サンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div><!--wrapper--> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
titeがHTMLにないので、img要素のtitle属性の値として :after,:before擬似要素と、content:attr(title)でその要素の内容に、属性値を追加できますが、img要素は内容を持たない要素ですから、そもそも内容がない場合は表示できません。 <span title="テスト">これは</span> なら、span:before{content:attr(title);}で可能です。 これは、どうしようもない・・・javascriptで取得できるかもしれませんが・・ 画像とは別に書かれているタイトルや説明を表示したいのでしたら、HTMLをきちんと作成すれば良いでしょう。 <div class="album"> <ol> <li><a href="#a1"><img src="" width="" height="" alt=""></a></li> <li><a href="#a1"><img src="" width="" height="" alt=""></a></li> <li><a href="#a1"><img src="" width="" height="" alt=""></a></li> <li><a href="#a1"><img src="" width="" height="" alt=""></a></li> </ol> <ol class="photo"> <li><img src="" width="" height="" alt=""> <ol> <li>タイトル</li> <li>説明</li> <li></li> </ol> </li> <li><img src="" width="" height="" alt=""> <ol> <li>タイトル</li> <li>説明</li> <li></li> </ol> </li> ・・・【中略】・・・ </ol> </div> として、フェードアウトも含めスタイルシートで指定するほうが楽な気がします。
お礼
ご回答ありがとうございます。 そして細かくご説明していただきありがとうございます！ いただいたコードで動かしてみましたが、ちょっと求めていたのとは違う見栄えになってしまいました。 spanにそのようなことができるとは知りませんでした。 次回試してみようと思います。 ありがとうございました。