- 2008-08-02 (土) 12:00
- jQuery
前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。
動作にはjQuery1.2.6が必要です。
HTML
HTML:
やってることはmootoolsの方とほぼ同じ。
サムネイルサイズに縮小倍率かけて拡大画像のサイズを設定してるので、比率違うのが混じるとサイズがおかしくなります。
javascript
JavaScript:
-
$(document).ready(function (){
-
-
if($('#change_image')){
-
-
var mag = 4; //imgsize magnification
-
var regrep = "_thumb"; // Replace name of thumbnail images
-
-
$('ul#thumbs img').each(function(i){
-
var myhref = $(this).attr('src').replace(regrep,"");
-
var myalt = $(this).attr('alt');
-
var myheight = $(this).height()*mag;
-
var mywidth = $(this).width()*mag;
-
var imgs = $("<img></img>").attr({
-
'src': myhref,
-
'title': myalt,
-
'class': 'change',
-
'alt': myalt,
-
'id': 'view-'+i,
-
'height':myheight,
-
'width':mywidth
-
});
-
imgs.css({
-
position:'absolute',
-
top:'0',
-
left:'0'
-
});
-
imgs.hide();
-
$('#view').append(imgs);
-
$(this).click(function(){
-
$('#view').css({
-
'width': mywidth,
-
'height': myheight
-
});
-
$('#view img').hide();
-
$('#view-'+i).fadeIn();
-
});
-
});
-
}
-
});
ダウンロード»Image change script02
