jquery循环后获取图像宽度?

发布于 2024-10-07 16:42:17 字数 1006 浏览 11 评论 0原文

我一直在尝试为 jquery 周期实现 javascript 调整大小,但是当我转到下一张幻灯片并调整浏览器窗口大小时,我失去了图像的宽度,一切都变得混乱。不知道下一步该做什么...

这是 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

I've been trying to implement javascript resize for jquery cycle but when I go to the next slide and resize the browser window I loose the width of the images and everything goes bananas. Not sure what to do next...

Here is the 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 
});

});

You can also see it here running. http://stoorage.com/index2.html

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

聆听风音 2024-10-14 16:42:17

我在这里看到几个问题:

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()

I see several problems here:

1) '#slideshow img' is not discrete, as there are multiple images in #slideshow.
2) the resize function itself is called on window load & resize, but not after cycling images.

Cursory investigation indicates that the plugin does support callbacks through its 'after' parameter, so try this:

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

I think you can mitigate problem 1) by extending the selector like so:

slideImageWidth = $('#slideshow img:visible').width()
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文