Jquery和galleriffic

Question

这可能不太可能，但是，我使用的是galleriffic插件，并且我使用javascript通过附加和替换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以显示完整大小的图像，并且由于我在加载DOM之后更改了img src，因此任何更改的图像都不会显示在查看器中。

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

单击设计焦点。

Answer 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