Jquery和galleriffic

这可能是一个很长的问题，但是，我正在使用Gallerific 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，因此任何更改的图像都不会显示在查看器中

你可以在这里看到效果

---

点击设计重点

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

因此，在更改图像属性之前，您必须销毁gallerific实例

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

注：非常旧的插件，但不管怎样

通过这个代码；将

此

替换为实例的名称；根据您的选择，脚本的一部分可能是不必要的

从

gallery.initializeThumbs（）开始仅此即可（但我认为不会触发预加载）

//初始化指尾
this.initializeThumbs（）；
if（this.maxPagesToShow<3）
this.maxPagesToShow=3；
this.displayedPage=-1；
this.currentImage=this.data[0]；
var gallery=这个；
//隐藏装载容器
如果（此.$loadingContainer）
这是。$loadingContainer.hide（）；
//设置控件
如果（此.controlsContainerSel）{
this.$controlsContainer=$（this.controlsContainerSel.empty（）；
if（this.rendersControl）{
if（this.autoStart）{
这是$controlsContainer
.附加（“”）；
}否则{
这是$controlsContainer
.附加（“”）；
}
此.$controlsContainer.find（'div.ss-controls a'）
。单击（功能（e）{
gallery.toggleSlideshow（）；
e、 预防默认值（）；
返回false；
});
}
如果（此.renderAVCONTROLS）{
这是$controlsContainer
.append（“
我如何销毁实例？API中没有任何要销毁实例的内容。您必须使用可用的；编辑我试图将gallerific实例设置为函数，并在每次更改链接时调用它，但这很快使库陷入困境。您知道我还可以做什么吗？请参阅编辑了解您可以做什么（但如果不先反实例化，您肯定无法重新实例化）
    // 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);