получить ширину изображения после цикла jquery? - PullRequest
1 голос
/ 17 декабря 2010

Я пытался реализовать изменение размера javascript для цикла jquery, но когда я перехожу к следующему слайду и изменяю размер окна браузера, я теряю ширину изображений, и все становится бананом. Не уверен, что делать дальше ...

Вот код JavaScript:

jQuery(function($) {
function resizeImage() {
var slideImageHeight = $(window).height()-110,
    slideImageWidth = $('#slideshow img').width(),
    slideShowImageHeight = $(window).height()-123;

    $('.gallery_item').css('height', slideImageHeight);
    $('#slideshow img').attr('height', slideImageHeight);

    $('#slideshow').css('height', slideShowImageHeight);
    $('#slideshow img').attr('height', slideShowImageHeight);

    $('.pgwrap').css('width',slideImageWidth);
};
$(window).resize(function(){
     resizeImage();
}).trigger('resize');

$(window).load(function(){
     resizeImage();
});

$('#slideshow').cycle({
    fx:     'scrollHorz', 
    speed: 200, 
    prev:   '#prev', 
    next:   '#next', 
    timeout: 0 
});

});

Вы также можете увидеть это здесь работает. http://stoorage.com/index2.html

1 Ответ

1 голос
/ 10 января 2011

Я вижу здесь несколько проблем:

1) '#slideshow img' не является дискретным, поскольку в #slideshow есть несколько изображений. 2) сама функция изменения размера вызывается при загрузке и изменении размера окна, но не после циклического изменения изображений.

Беглое расследование показывает, что плагин поддерживает обратные вызовы через свой параметр after, поэтому попробуйте это:

$('#slideshow').cycle({
  fx:     'scrollHorz', 
  speed: 200, 
  prev:   '#prev', 
  next:   '#next', 
  timeout: 0,
  after: resizeImage 
});

Я думаю, что вы можете смягчить проблему 1), расширив селектор следующим образом:

slideImageWidth = $('#slideshow img:visible').width()
...