0

我正在使用 jQuery 插件“Galleriffic”。我希望它在调用它的 buildImage 方法后调整图像大小。我在这里找到了以下代码并且它可以工作，但在我看来，有一种方法可以做到这一点，而无需反刍该方法中的所有代码。

有没有更清洁的方法可以做到这一点？

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;
            }
.....
 });
4

1 回答 1

0

我找不到一种非常干净的方式来做我想做的事。但我确实找到了解决方案。

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 计算高度和宽度值。

这仍然是一个 hack，但它比我原来的问题中发布的替代方案要干净得多。

于 2013-03-26T13:10:33.887 回答