2

我正在将 Flickr JSON 提要的代码与 jQuery 循环集成在一起，但需要调整图像大小以适应允许的容器。

我已经搞砸了一段时间了，我似乎无法理解在循环幻灯片中显示图像之前需要去哪里调整图像大小。请帮忙！

这是代码（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();
            }

那些让图像调整大小，但直到它完全加载并且循环第一次将其淡入。相同页面加载的后续周期保持调整大小。我知道我错过了什么，那是什么？

4

0 回答 0