Extend Galleriffic buildImage

Question

我正在使用jQuery插件“Galleriffic”。我希望它调用它的buildImage方法后调整图像大小。我发现下面的代码here，它的工作原理，但在我看来，有一种方法可以做到这一点，而不会反刍方法中的所有代码。

有没有更干净的方式可以做到这一点？

var gallery = $('#thumbs').galleriffic({ 
delay:      2500, 
numThumbs:     15, 
......... 
buildImage: function(imageData, isSync) { 
       //REDEFINED BUILD IMAGE 
       var gallery = this; 
       var nextIndex = this.getNextIndex(imageData.index); 

       // Construct new hidden span for the image 
       var newSlide = this.$imageContainer 
        .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>') 
        .find('span.current').css('opacity', '0'); 

       newSlide.find('a') 
        .append(imageData.image) 
        .click(function(e) { 
         gallery.clickHandler(e, this); 
        }); 

       var newCaption = 0; 
       if (this.$captionContainer) { 
        // Construct new hidden caption for the image 
        newCaption = this.$captionContainer 
         .append('<span class="image-caption current"></span>') 
         .find('span.current').css('opacity', '0') 
         .append(imageData.caption); 
       } 

       // Hide the loading conatiner 
       if (this.$loadingContainer) { 
        this.$loadingContainer.hide(); 
       } 

       // Transition in the new image 
       if (this.onTransitionIn) { 
        this.onTransitionIn(newSlide, newCaption, isSync); 
       } else { 
        newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0); 
        if (newCaption) 
         newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0); 
       } 

       if (this.isSlideshowRunning) { 
        if (this.slideshowTimeout) 
         clearTimeout(this.slideshowTimeout); 

        this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay); 
       } 


           //THE CODE TO RESIZE 
       $('#slideshow img').addClass('slideshow_image') 

       return this; 
      } 
..... 
}); 

Answer 1

我无法找到一个非常干净的方式来做我想做的事。但我找到了一个解决方案。

var self = this, 
    style = $('<style>div.slideshow img { max-height: ' + self.imageHeight + 'px; max-width: ' + self.imageHeight + 'px; }</style>'); 
$('html > head').append(style); 

这增加了线的CSS页面的标题，因此它可以影响得到动态添加所有匹配的元素，还可以让我计算使用Javascript的高度和宽度值。

这仍然有点黑客，但它比我原来的问题中发布的替代品更清洁。