Question

这可能是一个远景，但是，我正在使用galleriffic Jquery插件，我正在通过使用追加和替换img src来动态更改图像：

   $.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以显示fullsize图像，并且因为我在加载DOM后更改了img src，所以在查看器中没有显示任何更改的图像

你可以在这里看到效果 http://www.riskycode.com/wordpress/#

点击设计重点。

Answer 1

这是因为你的插件绑定事件的方式

所以在更改图像属性之前，你必须销毁这个画廊实例;

然后在完成图像更改属性后重新实例化

nb：非常老的插件，但无论

仔细阅读此代码;用您的实例名称替换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

Jquery和galleriffic

1 个答案: