Question

How do I fully stretch an image to a window via Fancybox? (Fancybox 2)
The fancybox stretches as big as the image size, but no further.

I noticed a number of CSS limits stuck in the fancybox css, like:

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

Taking the max-width/height out and setting let’s say width/height to 200% does stretch the image, but the containing rectangle itself (ie: the fancybox) is the same size, and it is no longer centered.

I am using the inline method with eg: jQuery(".fancybox").fancybox()

Answer 1

The i-pretty-much-gives-up-except-for-some-cool-but-useless-stuff approach:

.fancybox({
 afterLoad  : function () {
  function gcd (x, y) {while (y != 0) {var z = x % y; x = y; y = z;} return x}
  var body = $(document.body)
  if (this.width/this.height > 1) {
   // Max size is document body width.
   var body_width = body.width()
   var current_multiplier = gcd (this.width, body_width)
   if (current_multiplier == 1) current_multiplier = body_width
  } else {
   // Max size is document body height.
   var body_height = body.height()
   var current_multiplier = gcd (this.height, body_height)
   if (current_multiplier == 1) current_multiplier = body_height
  }
  this.width  = this.width  * current_multiplier
  this.height = this.height * current_multiplier
 }
})