jQuery循环+；Flickr呼叫+；图像调整大小=调整大小不起作用
我正在使用集成了jQuery循环的Flickr JSON提要的混搭代码，但需要调整图像大小以适应允许的容器 我已经搞乱这个有一段时间了，我似乎无法在循环幻灯片中显示图像之前将我的头脑集中在需要去哪里调整图像大小上。救命啊 下面是代码（richs-slides.js文件）： 它们可以调整图像的大小，但要等到图像已满并首次淡入循环后才能调整。同一页面加载上的后续循环保持大小调整。我知道我错过了什么，是什么jQuery循环+；Flickr呼叫+；图像调整大小=调整大小不起作用,jquery,image-resizing,jquery-cycle,flickr,Jquery,Image Resizing,Jquery Cycle,Flickr,我正在使用集成了jQuery循环的Flickr JSON提要的混搭代码，但需要调整图像大小以适应允许的容器 我已经搞乱这个有一段时间了，我似乎无法在循环幻灯片中显示图像之前将我的头脑集中在需要去哪里调整图像大小上。救命啊 下面是代码（richs-slides.js文件）： 它们可以调整图像的大小，但要等到图像已满并首次淡入循环后才能调整。同一页面加载上的后续循环保持大小调整。我知道我错过了什么，是什么 function image_resize() { $(".slides img").
function image_resize() {
$(".slides img").each(function () {
/* Max width for the image */
var maxWidth = 330;
/* Max hieght for the image */
var maxHeight = 388;
/*Used for aspect ratio*/
var ratio = 0;
/*Current image width*/
var width = $(this).width();
/*Current image height */
var height = $(this).height();
/*Check if the current width is larger than the max*/
if (width > maxWidth) {
/*get ratio for scaling image*/
ratio = (maxWidth / width);
/* Set New hieght and width of Image*/
$(this).attr({
width : maxWidth,
height : (height * ratio),
alt : "your-alt-text-you-can-remove-this"
});
/* Reset height to match scaled image */
height = (height * ratio);
/* Reset width to match scaled image */
width = (width * ratio);
/*Check if current height is larger than max*/
if (height > maxHeight) {
/*get ratio for scaling image*/
ratio = (maxHeight / height);
/*Set new height and width*/
$(this).attr({
height : maxHeight,
width : (width * ratio),
alt : "your-alt-text-you-can-remove-this"
});
}
}
});
}
$(document).ready(function() {
$('<div class="slideshow"/>').prependTo('#flkr');
$.getJSON('http://api.flickr.com/services/feeds/photoset.gne?set=72157624117859653&nsid=31704706@N05&lang=en-us&format=json&jsoncallback=?', function(data) {
$.each(data.items, function(i,item) {
var squares = (item.media.m).replace('_m.jpg', '_z.jpg');
if(i <= 20){
$('<img/>').attr({
alt: item.title,
title: item.title,
src: squares,
class: 'slidey'
}).appendTo('.slideshow').wrap('<div class="slides"></div>');
$('.slideshow').cycle({
fx: 'fade',
speed: 2500,
timeout: 4000, // choose your transition type, ex: fade, scrollUp, shuffle, etc...
width: 330,
containerResize: false,
before: function (nextSlideElement, options, forwardFlag) {
image_resize();
},
after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
image_resize();
}
});
}
});
});
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.cycle.min.js"></script>
<script src="richs-slides.js"></script>
<style>
#flkr {
display: block;
width: 330px;
height: 388px;
overflow: hidden;
}
.slideshow {
width: 330px;
height: 388px;
}
.slides {
width: 330px;
height: 388px;
}
.slides img{
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="flkr"></div>
</body>
<script type="text/javascript">
$(window).load(function () {
image_resize();
});
</script>
</html>
before: function (nextSlideElement, options, forwardFlag) {
image_resize();
},
after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
image_resize();
}