Using fancybox to view full size image

Question

I am trying to develop code in which jquery accepts images and resizes them to fit the parent div, with the ability to click on the image to view it in full size with fancybox. I try to make all the images using the "expand" class and do not expect that you will have more than the image with this class on the page.

Below I guess. The image is very easy to change, and I can click on the image to raise the fancybox, but it has a size that has not been resized, not the original. I have fwidth and fheight as vars for the original measurements, but specifying them does not work, since its built-in. So, I need to use an iframe, which I found out, and tried a .wrap link around it and specify the link as an iframe with the specified dimensions, capturing .attr ("src") for the link. But no matter what I do, it goes to 404 page in fancybox. Below I have, I'm not sure how to proceed further, or am I thinking about this problem wrong?

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

Answer 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 buttons:

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

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

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

See the advanced functionality section.

Answer 2

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

Answer 3

First of all, download all the images of the same size that you set in preferences->images->thickbox_default

then download the .jpg files.

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

fitToView:!0 to → fitToView:!1

Try now.