Расширить Galleriffic buildImage

Question

Я использую плагин 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;
            }
.....
 });

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.

Это все еще немного хак, но это намного чище, чем альтернатива, опубликованная в моем первоначальном вопросе.