0

jQuery プラグイン「Gallerific」を使用しています。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 を使用して高さと幅の値を計算することもできます。

これはまだ少しハックですが、元の質問に投稿された代替案よりもはるかにクリーンです。

于 2013-03-26T13:10:33.887 に答える