jquery循环后获取图像宽度?
我一直在尝试为 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我在这里看到几个问题:
1)“#slideshow img”不是离散的,因为#slideshow 中有多个图像。
2) 调整大小函数本身在窗口加载时调用;调整大小,但不在循环图像之后调整。
粗略调查表明该插件确实通过其“after”参数支持回调,因此请尝试以下操作:
我认为您可以通过扩展选择器来缓解问题 1),如下所示:
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:
I think you can mitigate problem 1) by extending the selector like so: