jQuery Cycle + Flickr Call + Image Resize = Resize Not Working

Question

I'm playing with mashing together code for a Flickr JSON feed with jQuery cycle integrated, but need to resize the images to fit the container allowed.

I've been messing with this for some time now and I can't seem to wrap my head around what needs to go where to make the images resize before they show in the cycle slideshow. Help, please!

Here's the code (the richs-slides.js file):

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

And the 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>

In playing with this, I noticed that the options in cycle:

before: function (nextSlideElement, options, forwardFlag) {
                image_resize();
            },
            after: function (currSlideElement, nextSlideElement, options, forwardFlag) {
                image_resize();
            }

Those get the image to resize, but not until it has fulled loaded and cycle has faded it in for the first time. Subsequent cycles on the same page load remain resized. I know I'm missing something, what is it?

jQuery Cycle + Flickr Call + Image Resize = Resize Not Working

0 Answers0