Question

I was wondering if there was a simple way to scale smaller images inside a fancyBox (2.0.6) container.

Right now my page works fine when I have high-res images, the fancybox scales to the viewport.

What I want to do is if there’s a small image (say 200x300px), I want to resize that image to fit the viewport. I’m aware it will degrade in quality, but I still want it to scale up.

Can this be done? I coundn’t find anything in the fancyBox API to do this, and no plugins.

Thanks!

Answer 1

It’s feasible BUT the transition will look really weird (because is not the normal way to work but forcing the upscale)

Assuming you have this html:

<a class="fancy" href="images/01.jpg">open small image and upscale</a>

you can try this script:

$(document).ready(function(){
 $(".fancy").fancybox({
  afterShow: function(){
   this.height = $(window).height();
   this.width = 'auto'
  }
 }); // fancybox
});//ready

PS. use at your own risk