Photo Sliderの画像にリンクを張りたい。
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.html
html以外のjsとcssは上記URLから閲覧できます。
調べましたがどうしても分からなくて非常に困っております。
どうかご教授ください。
よろしくお願いいたします。
お礼
回答ありがとうございました～。 やはり、普通のファスナーと違ってカラーなども少なく、 どこの店舗でも常備されているものとは違うのですね。 普段は、予め長さが決まっている物を購入していたのですが、 長い物を購入して、自分でカットする事も考えていたのでとても参考になりました～。