0

wordpress サイトhttp://cambridgeuplighting.com/scale-testで jquery Infinite Carousel のカスタム実装を作成しています。クライアントに任意の解像度の写真を追加し、それに合わせてコンテナー要素のサイズを変更するオプションを提供したいと考えています。Lightbox/Slimbox または SimpleViewer と同じアニメーション化されたサイズ変更効果を使用します。

順調にスタートしましたが、コードにいくつかの欠陥があります。これは、infinitecarousel.js` の「thumbClick」関数の変更です。 

//Get the rel attribute of the thumbnail (this is set to the index # of the thumbnail)
var activeLi = $(this).attr('rel');
//Find the Li elemement whose rel attribute (set to the initial index # of the li element onLoad) matches that of the thumbnail, so we can know which image is active
var whichLi = $('#singleSlide ul li[rel='+activeLi+']');
var whichLiImg = $('#singleSlide ul li[rel='+activeLi+'] img');
//Get the width and margin necessary to resize and center the container element
var activeImgWidth = whichLi.width();
var activeImgMargin = 628-activeImgWidth;
//Set the Width attribute of the Li element equal to that of the image it contains
whichLi.css( { 'width' : activeImgWidth } );
//Animate the width of the container element (the div with the gray border)
$('div#singleSlide').animate( { 
     width: activeImgWidth, 
     marginLeft: activeImgMargin/2
     },300);

これは、li 要素の rel 属性をインデックス値に設定するために、独自の init.js に追加したコードです。

jQuery(function( $ ){
 $("#singleSlide ul").each(function() {
     $(this).children("li").each(function(i) {
         $(this).attr("rel", i);
     });
 });

 $('#singleSlide ul li a').attr('rel', 'lightbox-gallery');
});

テスト ページ (cambridgeuplighting.com/scale-test) でわかるように、このコードは、サイズ変更する正しい幅の正しい画像を選択していません。修正が必要な問題の 1 つは、onClick で Li の幅を設定するのではなく、ページの読み込み時に正しく設定する必要があることです。

ご協力いただきありがとうございます！

4

1 に答える 1

-2

私の意見では、画像のサイズを読み取る変数と、画像のサイズに応じてコンテナーのサイズを変更するクラスを作成する必要があります:D

于 2010-04-27T22:34:17.127 に答える