- 締切済み
galleryviewのjavascriptについ
下記の画像の部分にどうしてもリンクを貼りたいのですが上手くいきません。ご教授願います。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>GalleryView - Default Demo</title> <!-- First, add jQuery (and jQuery UI if using custom easing or animation --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- Second, add the Timer and Easing plugins --> <script type="text/javascript" src="../js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script> <!-- Third, add the GalleryView Javascript and CSS files --> <script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script> <link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" /> <!-- Lastly, call the galleryView() function on your unordered list(s) --> <script type="text/javascript"> $(function(){ $('#myGallery').galleryView(); }); </script> </head> <body> <ul id="myGallery"> <li><a href="http://ariacompany-since2010.com/shop/products/list.php?category_id=47"><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" /></a> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" alt="Is He Still There?!" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" alt="Noni Nectar For Green Gecko" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg" alt="Flight of an Eagle Owl" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp14.jpg" alt="Winter Lollipops" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp26.jpg" alt="Day of Youth" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp27.jpg" alt="Sunbathing Underwater" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp28.jpg" alt="Untitled" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp41.jpg" alt="New Orleans Streetcar" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp49.jpg" alt="By The Wind of Chance" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" alt="Fishing on the Cloud" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" alt="Blue Lagoon" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" alt="Time" /> </ul> <p>Please view the source of this page if you are having difficulties setting up GalleryView.</p> </body> </html>
- faruace
- お礼率100% (4/4)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- tracer
- ベストアンサー率41% (255/621)
プラグインの本家サイトを見てみました。 <ul>に指定した画像リストのhtml部は、実際の表示とは何ら関係なく、単にjavascriptが読み込む画像ファイルリストに使用しているだけのようです。従って、HTMLをどうこうしてもリンクは貼れません。端的に言うと、このプラグインにはそのような機能は想定されていないということです。jQueryのプラグインは、JavaScriptを知らない人でも簡単に扱えるものですが、逆に言うと、提供されている機能以上のことは出来ないと思って問題ないですよ。そこからはjavascriptを書ける人の領域です。質問でヒントを得られるかもしれませんが、根本的なことをご存知でないとすれば、改変するのは難しいでしょう。
- tracer
- ベストアンサー率41% (255/621)
何が問題なのかさっぱりわかりませんが、とりあえずhtmlの文法が間違っています。 xhtmlで書かれているので、すべてのタグは閉じてください。 <ul>に対しては</ul>が必要です、<a>は</a>で閉じる、<li>は</li>で閉じる。明確に分かるのはそれだけです。 何が問題か分からないので、それが原因かどうかもわかりません。
お礼
ご回答いただきありがとうございます。 <li><a href=" "><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" /></a></li> のように閉じるとAタグが邪魔してサイト上に表示されなくなります。 元々imgしか読み込まないような仕組みなのか、それともaタグの記述の仕方を変更すれば良いのかが分かりません。
お礼
ご回答ありがとうございます。 ヒントでも良いのでなにかご教授いただけませんでしょうか？ 大きな画像の部分にリンクを張れるだけで良いので。 すみませんが宜しく御願い致します。