jQueryimagesloadedプラグイン
こんにちは、みんな
サムネイル付きのシンプルなスライドショーギャラリーを作成しようとしています。
スライドショーとサムネイルを作成するためにサイクルプラグインを使用しています
http://www.ttmt.org.uk/gallerytest/
サムネイルは、ウィンドウの下部に表示される粘着性のあるフッターにあります。
スライドショーの画像をウィンドウの残りの部分に塗りつぶし、ウィンドウのサイズが変更されたときに拡大縮小したい。
私はこの関数でこれをやっています
function resizeImg() {
$('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
}
現時点では、これはウィンドウのサイズが変更されたときに機能しますが、画像が最初に読み込まれたときには機能しません。
画像が読み込まれたときに関数を呼び出す必要があります。
動作するように見えるimagesloadedプラグインを見つけました-https ://github.com/desandro/imagesloaded
私の問題は、コードでプラグインを使用する方法がわからないことです。
imagesloadedプラグインを使用してresizeImg関数を呼び出す方法を誰かが説明できますか？
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!--jQuery-->
<script type="text/javascript" src="js/jquery1.7.2.js"></script>
<script type="text/javascript" src="js/cycle.js"></script>
<!--CSS-->
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
/**/
html, body {
height:100%;
text-align:center;
}
#wrap {
margin:auto;
min-height:100%;
margin-top:-100px;
text-align:left;
}
* html #wrap {
height:100%
}
#header {
background:red;
border-top:100px solid #fff;
}
#footer {
background:#eee;
margin:auto;
height:100px;
clear:both;
}
/**/
#slideshow img{
margin:0 0 0 55px;
height:100%;
}
div#thumbWrap {
position: relative;
height: 100px;
width: 500px;
overflow: auto;
margin:0 0 0 50px;
}
ul#thumbs {
display: block;
width: 2000px;
padding: 15px 0 0 15px;
}
ul#thumbs li {
display: block;
float: left;
padding: 0 4px;
}
ul#thumbs a {
display: block;
text-decoration: none;
}
ul#thumbs img {
border: 3px #fff solid;
}
ul#thumbs a:hover img {
opacity: 0.5;
}
#slideshow img { display: none }
#slideshow img.first { display: block }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
</div><!-- #header -->
<div id="slideshow">
<img src="images/plane01.jpg" alt="" class="first"/>
<img src="images/plane02.jpg" alt="" />
<img src="images/plane03.jpg" alt="" />
<img src="images/plane04.jpg" alt="" />
<img src="images/plane05.jpg" alt="" />
<img src="images/plane06.jpg" alt="" />
<img src="images/plane07.jpg" alt="" />
<img src="images/plane08.jpg" alt="" />
<img src="images/plane09.jpg" alt="" />
<img src="images/plane10.jpg" alt="" />
</div><!-- #content -->
</div><!-- #wrap -->
<div id="footer">
<div id="thumbWrap">
<ul id="thumbs">
</ul>
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
resizeImg();
/*-cycle
*/
$('#slideshow').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#thumbs',
before: resizeImg(),
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="auto" height="50" /></a></li>';
}
});
/*-thumbnailScroll
*/
var div = $('div#thumbWrap'), ul = $('ul#thumbs'), ulPadding = 15;
var divWidth = div.width();
div.css('overflow','hidden');
var lastLi = ul.find('li:last-child');
div.mousemove(function(e){
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
var footerHeight = $('#footer').height();
function resizeImg() {
$('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
}
$(window)
.scroll(resizeImg)
.resize(resizeImg)
.onload(resizeImg)
});
</script>
</body>
</html>
- - - - アップデート - - - - -
もうすぐ動作します。
http://www.ttmt.org.uk/gallerytest/
imagesLoadedプラグインは、ロード時に最初の画像のサイズを変更してから、
after: resizeImg
サイクル関数で、画像が読み込まれた後にサイズ変更関数を呼び出します。
私が残している問題は、画像の読み込み後にresizeImg関数が呼び出されたときに画像サイズが急増することです。
誰もがこのサイズのジャンプを回避する方法を見ることができますか