Using fancybox to view full sized image

问题

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

回答1:

Make sure you include jquery.fancybox-buttons.css and jquery.fancybox-buttons.js in your project. Then you can do something like this to add the buttons:

$(".fancybox").fancybox({
    helpers: {
        buttons: {}
    }
});

This will add the button toolbar to the top of the viewport. If you press on the resize button, the viewport will expand to show the user the full image. So if you upload an image, generate a thumbnail, and use fancybox on the thumbnail, the user can click the thumbnail to see the viewport and then they can click the button at the top of the viewport to expand the viewport so that it displays the full image. Some documentation can be found here:

http://fancyapps.com/fancybox/#instructions

Look at the section on extended functionality.

回答2:

One more variant as example (fancybox 2.1.5):

$('.fancybox').fancybox({
  afterShow: function() {
    $('<div class="fancybox-fullsize"></div>').appendTo(this.skin).click(function() {
      $.fancybox.toggle();
      $(this).toggleClass('fancybox-fullsize fancybox-fullsize-r');
    });
  }
});

And css:

.fancybox-fullsize, .fancybox-fullsize-r {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -18px;
  left: -18px;
  z-index: 99999;
  cursor: pointer;
}

.fancybox-fullsize {
  background-image: url(img/fancybox_fullsize.png);
}

.fancybox-fullsize-r {
  background-image: url(img/fancybox_fullsize-r.png);
}

回答3:

First of all upload all images of same size that you set in preferences->images->thickbox_default

then upload .jpg files.

change the below value in /js/jquery/plugins/fancybox/jquery.fancybox.js

fitToView:!0 to -> fitToView:!1

Try now.

来源：https://stackoverflow.com/questions/3919330/using-fancybox-to-view-full-sized-image

标签

jquery

fancybox