Photo Sliderの画像にリンクを張りたい。

解決済

質問者：tissue_2010
質問日時：2010/07/19 21:22
回答数：3件

Photo Sliderの画像にリンクを張りたい。
元はリンクが張っていないのですが、出てくる写真をクリックしたら飛ぶようにしたいです。

【htmlソース】
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="photoslider.js"></script>
<title>Photo Slider Tutorialより</title>
</head>
<body>

<div><a href="http://opiefoto.com/articles/photoslider" target="_blank">Photo Slider Tutorial</a>より必要部分を抜き出したもの</div>
<h2>必要なもの</h2>

<p>
<ul>
<li><a href="jquery.js" target="_blank">jquery.js</a></li>
<li><a href="photoslider.js">photoslider.js</a></li>
<li><a href="photoslider.css">photoslider.css</a></li>
</ul>
</p>

<div class="photoslider" id="default"></div>

<div class="canvas">
<script type="text/javascript">
$(document).ready(function(){
//change the 'baseURL' to reflect the host and or path to your images
FOTO.Slider.baseURL = 'http://ryouchi.up.seesaa.net/photoslider/';

//set images by filling our bucket directly
FOTO.Slider.bucket = {
'default': {
0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'},
1: {'thumb': 't_1.jpg', 'main': '1.jpg'},
2: {'thumb': 't_2.jpg', 'main': '2.jpg', 'caption': 'Trash the Dress'},
3: {'thumb': 't_3.jpg', 'main': '3.jpg'}
}
};

//or set our images by the bucket importer
var ids = new Array(0,1,2,3);
FOTO.Slider.importBucketFromIds('default',ids);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var ids = new Array(0,1,2,3);
FOTO.Slider.importBucketFromIds('default',ids);
FOTO.Slider.reload('default');
FOTO.Slider.preloadImages('default');
FOTO.Slider.enableSlideshow('default');
});
</script>
</div>

</body>
</html>

【ページURL】
http://ryouchi.up.seesaa.net/photoslider/index.h …

html以外のjsとcssは上記URLから閲覧できます。

調べましたがどうしても分からなくて非常に困っております。
どうかご教授ください。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2010/07/20 11:50

　ざーっと見ただけですが、「Photo Slider」は、サブネイル画像と本画像を

渡して、画像を表示するスライドショー機能のみたいです。

　「Photo Slider」の改造に手出しするくらいなら、jQuery使ってるんだから、
別処理で、ターゲット画像クリック時の関数を別途加えた方が簡単だと思います。

画像はclass="photoslider_main"のDIVに生成するみたいだから

$(".photoslider_main").click(function(){
-----
})
の中で、$(this)の内容から、どの画像が表示されているか調べて、
対応するリンク先にlocation.hrefなりwindow.openするなりすれば
よろしかろうと．．．

それから、質問者様のコードは何かの間違いかと思いますが、
<div class="canvas">の中にわざわざ2つのスクリプトを分けて
入れて、それぞれに$(document).ready(function(){....});
があるのは、とっても変です。

いってる意味がわからないなら、他のライブラリーを探した方が
賢明でしょう。

この回答への補足

yyr446様

$(".photoslider_main").click(function(){
-----
})
の中身をひとつ埋めてみてくださいませんか？リンク先はダミーでもなんでも構いませんので。

2つのスクリプトの部分は直させていただきました。

どうぞよろしくお願いいたします。

補足日時：2010/07/20 12:41

通報する

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2010/07/20 22:22

方法は同じですが、とりあえずまとめて定義しておいたほうが使いやすいかと…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang=ja>
<head><title>test</title>
<link media=screen href="photoslider.css" type=text/css rel=stylesheet>
<script src="jquery.js" type=text/javascript></script>
<script src="photoslider.js" type=text/javascript></script>
</head>

<body>
<div class="photoslider" id="default"></div>
<div class="canvas">
<script type=text/javascript>

</script>
</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/07/20 17:31

べたべたですが、

$(".photoslider_main img").click(function(){
if($(this).attr("src")=="http://ryouchi.up.seesaa.net/photoslider/0.jpg")
location.href="hoge.html";
});

とか