Extend Galleriffic buildImage

Question

I am using the jQuery plugin "Galleriffic". I want it to resize the image after it calls it's buildImage method. I've found the following code here and it works but it seems to me like there is a way to do this without regurgitating the all of the code from the method.

Is there a cleaner way I can do this?

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

score 0 · Answer 1 · answered Mar 26 '13 at 13:10

I couldn't find an extremely clean way to do what I wanted. But I did find a solution.

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

This adds a line of css to the header of the page so it can affect all matching elements that get added dynamically but also allows me to calculate the height and width values using Javascript.

This is still a bit of a hack but it is much cleaner than the alternative posted in my original question.

Extend Galleriffic buildImage

1 Answers1