views:

18

answers:

0

I'm trying to develop some code where a jquery takes images and resizes them to fit the parent div, with an option to click on the image to view it in full size with fancybox. I'm trying to do it all images with class "expand", and don't anticipate having more than on image with that class per page.

Below is what I've come up with so far. The image resizes just fine, and I can click on the image to bring up the fancybox, but it is at the resized size, not the original. I have fwidth and fheight as vars for the original dimensions, but specifying them doesn't work, since its inline. So, I need to use an iframe I've figured out, and have tried to .wrap a link around it and specify the link as an iframe with the dimensions specified, grabbing .attr("src") for the link. But no matter what I do, it goes to the 404 page within the fancybox. Below is what I have, not sure how to proceed, or am I thinking about this issue in the wrong way?

if($('img.expand').length){ 
        var parentClass = $('img.expand').parent().attr("class");           
        var fwidth = $('img.expand').attr("width");
        var fheight = $('img.expand').attr("height");                   
        if($('img.expand').parents().is('.grid_10')){
                $('img.expand').each(function() {
                var maxwidth = 590;
                var obj = $('img.expand');
                var width = obj.width();
                var height = obj.height();
                if (width > maxwidth) {
                    //Set variables for manipulation
                    var ratio = (height / width );
                    var new_width = maxwidth;
                    var new_height = (new_width * ratio);

                    //Shrink the image and add link to full-sized image
                    obj.height(new_height).width(new_width);

                }
            });
        }
        $('img.expand').fancybox({
            'transitionIn'  :   'fade',
            'transitionOut' :   'fade',
            'speedIn'       :   600, 
            'speedOut'      :   200, 
            'overlayShow'   :   false,
            'titlePosition' :   'inside'
        });
}