0

サムネイル/大きな画像ブロックを組み合わせた素晴らしい画像ビューアを持っています...

次のようになります。

<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
    <ul class="holder">
    <li class="slide first"><img src="galleries/kids/01.jpg" data-large="galleries/kids/06.jpg" alt="1st image description" /></li>
    <li class="slide"><img src="galleries/kids/02.jpg" data-large="galleries/kids/07.jpg" alt="2nd image description" /></li>
    <li class="slide"><img src="galleries/kids/03.jpg" data-large="galleries/kids/08.jpg" alt="3rd image description" /></li>
    <li class="slide"><img src="galleries/kids/04.jpg" data-large="galleries/kids/09.jpg" alt="4th image description" /></li>
    <li class="slide"><img src="galleries/kids/05.jpg" data-large="galleries/kids/10.jpg" alt="5th image description" /></li>
</ul>
<div class="clear"></div>
</div>
<script>
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
</script>

ただし、これをカルーセルと組み合わせようとすると (ここで見つけた最も単純なもの - http://www.flintstudio.biz/stuff/sliders/1.html )

それは動作を停止します...

コードは次のようになります

<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
    <a class="button prev" ><img src="images/arrow_left.png"/></a>
    <a class="button next" ><img src="images/arrow_right.png"/></a>
        <ul class="holder">
            <li class="slide first"></li>
            <li class="slide"></li>
            <li class="slide"></li>
            <li class="slide"></li>
            <li class="slide"></li>
        </ul>
    <div class="clear"></div>
</div>  

<script>
$( window ).load(function(){
    var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];     

    $.preloadImages( images, init );

    function init() {
        $( '#gallery-scroller' ).imgSlider( images );
    }

$('.holder').delegate('img','click', function(){
    $('#largeImage').attr( 'src',$(this).attr('data-large') );
});
});
</script>

概念の観点からの唯一の違いは、ウィンドウが読み込まれた後にリストが作成されることです-私は変更を試みました

.delegate('img','click', function(){

に

.on( 'click', 'img', finction(){

しかし、それは役に立ちません..

OH - 1 つの重要なポイント - carousel.js の 1 行を変更しました - 背景画像の CSS の変更ではなく、画像を追加しています...

これを変更しました（37行目）

$( e ).find( '.holder > li' ).eq( i ).css( 'background', 'url('+images[i]+') no-repeat' );

に

$( e ).find( '.holder > li' ).eq( i ).html( '<img class="thumb" src="' + images[i] + '" />' );

何が足りないの...???

簡易サムネイルビューアのjsfiddle... http://jsfiddle.net/cBpvZ/

カルーセル版のjsfiddle... http://jsfiddle.net/ZJzLd/

4

2 に答える 2

0

間違ったDOMオブジェクトにイベントをバインドしていると思うので、IMGの代わりにLIにする必要があります。firebug を使用して HTML を調べると、UL.holder 内に IMG タグがないことがわかります。次のコードを試してください。

$('.holder').delegate('li','click', function(){
    var imgSrc = $(this).css('background-image').replace('url("','').replace('")','');
    $('#largeImage').attr( 'src',imgSrc);
});

理想的には、正規表現を使用して文字列を置き換える必要がありましたが、これは機能します。

于 2013-03-26T01:51:39.143 に答える
0

thxマヘシュ

木々を通る森...私はそれをいじったのでそれを見ることができませんでした... data-largeへの欠落した参照が実際に問題でした。

解決策は（私が定義した）2つの配列を持つことでした-1つは親指用で、もう1つは大きなものです..（画像名に接尾辞または接頭辞を追加して、それらをそのように関連付けることができます-しかし、私はそうしないことを選択しました- したがって、物事に名前を付ける柔軟性が必要です...これには2つの配列が必要です)

var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
var large = ['galleries/kids/06.jpg', 'galleries/kids/07.jpg', 'galleries/kids/08.jpg', 'galleries/kids/09.jpg', 'galleries/kids/10.jpg'];

$('#gallery-scroller').append('<img src="images/loader.gif" id="gallery-loader" style="position:absolute; top:45%; left:45%;"/>');

$.preloadImages( images, init );

function init() {
$( '#gallery-loader' ).remove();
$( '#gallery-scroller' ).imgSlider( images, large );
}

もちろん、これは追加の渡された配列を処理するように carousel.js を変更することを意味します - 問題はありません...

魅力のように機能します。これで、これにデータを入力して、必要な場所にカルーセルを配置し、必要な場所に大きな画像ビューアを配置できます...ブラボー-助けてくれてありがとう.

于 2013-03-26T04:07:49.820 に答える