loading an image 150% of its size within fancybox

问题

I am just creating a silly GIF gallery where there is a thumbnail displayed and when clicked the relevant GIF gets loaded and displayed in a fancybox.

The code for the fancybox I have is this:

$(".fancyGIF").fancybox({
        arrows: false,
        openEffect: 'elastic',
        openSpeed: 150,
        closeEffect: 'elastic',
        closeSpeed: 150,
        closeClick: true,
        onStart: function(){
            $("img").width("400");
        },
        helpers: {overlay : null}
    });

The onStart: is an attempt at getting the image to load bigger than it's original size, as alot of GIFs are very small, I want to load them 150% or 200% than their original size. How can I do this? I have tried many things :(

EDIT: After further investigation, It would seem that the onStart function is not working whatsoever, which would explain why I am not getting any results. I have put console.log('foobar'); in there and alert('whipcrackaway'); in there and no results whatsoever. I cannot work out why. There are no errors either whatsoever.

回答1:

First, you are using in your code fancybox v2.x API options so I assume that you are using that version, aren't you?

Second, if the first assumption is correct, then onStart is not a valid fancybox v2.x option but v1.3.x (fancybox v2.x options are new and not compatible with previous versions).

Third, you need to make some calculations and modify the size of two elements : the fancybox container AND the image inside of the fancybox container.

So imaging that we are linking to an image that is 150x150px with this link

<a class="fancyGIF" href="myGIFimage150x150.gif">open bigger size at 200% (300x300px)</a>

... and we want to show it in fancybox with a 200% of the original size for instance, then we will set this custom script with the beforeShow callback like :

$(".fancyGIF").fancybox({
  beforeShow: function () {
    // set new fancybox width
    var newWidth = this.width * 2;
    // apply new size to img
    $(".fancybox-image").css({
      "width": newWidth,
      "height": "auto"
    });
    // set new values for parent container
    this.width = newWidth;
    this.height = $(".fancybox-image").innerHeight();
  }
});

Change the value in var newWidth = this.width * 2; to set your wanted size.

See JSFIDDLE

NOTE : this is for fancybox v2.1.3+ (use at your own risk ;)

回答2:

onStart will run before the content is loaded, so the image is not "there" yet.

First off, I suggest you get the newest version Fancybox 2 (I saw that onStart is a fancybox 1.3 feature): http://fancyapps.com/fancybox/

Then use the afterLoad callback function:

$(".fancyGIF").fancybox({
    afterLoad: function(current, previous) {
        current.inner // points to the new content
            .find('img').css({width: '200%'});
    }
});

This should blow up all images to twice the size. You could also set a pixel value, so all images become the same size. Or point to another function to make it conditional:

$(".fancyGIF").fancybox({
    afterLoad: function(current, previous) {
        var $img = current.inner.find('img');
        $img.css({width: normaliseWidth($img)});
    }
});

function normaliseWidth($img) {
    var width = $img.width();
    if (width < 100) { // if smaller then 100px
        return (width * 2) +'px'; // blow up to twice the size
    } else {
        return width +'px';
    }
}

--edit--

Use this html

<a href="http://upload.wikimedia.org/wikipedia/commons/9/9d/Animalien-smiley.gif" class="fancyGIF">
    <img src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Animalien-smiley.gif" alt="alien" />
</a>

You can see it working here: http://jsfiddle.net/pT7jC/1/ Note that I added a console.log. If you open the developer console, you'll see the contents of "current" logged. This is an object with all kinds of usefull information

来源：https://stackoverflow.com/questions/14212840/loading-an-image-150-of-its-size-within-fancybox

标签

jquery

css

fancybox