Question

我正在使用集成了jQuery循环的Flickr JSON提要的代码进行混搭，但是需要调整图像大小以适应允许的容器。

我一直在搞这个问题已经有一段时间了，我似乎无法绕过需要去的地方，让图片在周期幻灯片放映之前调整大小。求救！

这是代码（richs-slides.js文件）：

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：

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

那些让图像调整大小，但是直到它已经加载并且循环已经第一次淡化它。同一页面加载的后续周期仍会调整大小。我知道我错过了什么，是什么？

jQuery循环+ Flickr调用+图像调整大小=调整大小不起作用

0 个答案: