0

これはおそらくロングショットですが、私はgalleriffic Jqueryプラグインを使用しており、img srcの追加と置換を使用して、javascriptでその場で画像を変更しています:

   $.each(paths,function(index, value) {
       if(size > 0) {
    var src = $('.thumbs li:nth-child('+index+')').find('img').attr('src', value);
    var str = value; 
    var big_img=str.replace("_s","_b");
    var src = $('.thumbs li:nth-child('+index+')').find('a').attr('href', big_img);
     size -- ;    
        }

私が抱えている問題は、ハッシュ関数を使用して画像の URL を変換してフルサイズの画像を表示することです。DOM が読み込まれた後に img src を変更すると、変更された画像がビューアーに表示されません。

ここで効果を確認できます http://www.riskycode.com/wordpress/#

デザインフォーカスをクリックします。

4

1 に答える 1

1

これは、プラグインがイベントをバインドする方法によるものです

したがって、画像の属性を変更する前に、ギャラリーのインスタンスを破棄する必要があります。

画像属性の変更が完了したら、再度インスタンス化します

注意：非常に古いプラグインですが、何でも

このコードを実行します。thisをインスタンスの名前に置き換えます。オプションによっては、スクリプトの一部が不要になる場合があります。

で開始するgallery.initializeThumbs();だけで十分です（ただし、プリロードはトリガーされないと思います）

    // Initialize the thumbails
    this.initializeThumbs();

    if (this.maxPagesToShow < 3)
        this.maxPagesToShow = 3;

    this.displayedPage = -1;
    this.currentImage = this.data[0];
    var gallery = this;

    // Hide the loadingContainer
    if (this.$loadingContainer)
        this.$loadingContainer.hide();

    // Setup controls
    if (this.controlsContainerSel) {
        this.$controlsContainer = $(this.controlsContainerSel).empty();

        if (this.renderSSControls) {
            if (this.autoStart) {
                this.$controlsContainer
                    .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
            } else {
                this.$controlsContainer
                    .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
            }

            this.$controlsContainer.find('div.ss-controls a')
                .click(function(e) {
                    gallery.toggleSlideshow();
                    e.preventDefault();
                    return false;
                });
        }

        if (this.renderNavControls) {
            this.$controlsContainer
                .append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>')
                .find('div.nav-controls a')
                .click(function(e) {
                    gallery.clickHandler(e, this);
                });
        }
    }

    var initFirstImage = !this.enableHistory || !location.hash;
    if (this.enableHistory && location.hash) {
        var hash = $.galleriffic.normalizeHash(location.hash);
        var imageData = allImages[hash];
        if (!imageData)
            initFirstImage = true;
    }

    // Setup gallery to show the first image
    if (initFirstImage)
        this.gotoIndex(0, false, true);

    // Setup Keyboard Navigation
    if (this.enableKeyboardNavigation) {
        $(document).keydown(function(e) {
            var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
            switch(key) {
                case 32: // space
                    gallery.next();
                    e.preventDefault();
                    break;
                case 33: // Page Up
                    gallery.previousPage();
                    e.preventDefault();
                    break;
                case 34: // Page Down
                    gallery.nextPage();
                    e.preventDefault();
                    break;
                case 35: // End
                    gallery.gotoIndex(gallery.data.length-1);
                    e.preventDefault();
                    break;
                case 36: // Home
                    gallery.gotoIndex(0);
                    e.preventDefault();
                    break;
                case 37: // left arrow
                    gallery.previous();
                    e.preventDefault();
                    break;
                case 39: // right arrow
                    gallery.next();
                    e.preventDefault();
                    break;
            }
        });
    }

    // Auto start the slideshow
    if (this.autoStart)
        this.play();

    // Kickoff Image Preloader after 1 second
    setTimeout(function() { gallery.preloadInit(); }, 1000);

それ以外の場合は、そこに示されているように画像を追加/削除します: http://www.twospy.com/galleriffic/example-4.html

于 2013-02-08T08:42:16.863 に答える