Wijmo UI for the Web

Maintaining Aspect Ratio In Wijgallery

When large images are displayed in the wijgallery widget, the images get stretched (auto sized) to fit the display area. However, users may want to see the images in the same Aspect Ratio as the original ones. In this article we’ll discuss a simple approach on how to do just that.

Setting Up Wijgallery

Setting up the wijgallery widget is trivial. We just need to declare a ‘div‘ element which would act as the wijgallery widget and add a few ‘img‘ elements for displaying the images.

<div id="gallery">
   <ul>
      <li><a href="Images/Desert.jpg">
         <img title="Word Caption 1" src="Images/Desert.jpg" alt="1" />
      </a></li>
      <li><a href="Images/Tulips.jpg">
         <img title="Word Caption 2" src="Images/Tulips.jpg" alt="2" />
      </a></li>
   </ul>
</div>

The next step is to initialize the wijgallery widget and we’re good to go.

$(document).ready(function () {
   $("#gallery").wijgallery({
      thumbnailOrientation: "vertical",
      thumbnailDirection: "before"
   });
});

Now, when we run this sample, we’ll observe that the image is stretched horizontally to fit the width of the display area of wijgallery.

So, how so we deal with this issue? It’s simple. We need to find the aspect ratio of the original image and adjust the width of the displayed image according to this aspect ratio.

Calculating the Aspect Ratio

For calculating the aspect ratio, we must know the GCD(Greatest Common Divisor) of the height and width values of the original image. For this we’ll use a small recursive function called ‘GCD’.

function GCD(a, b) {
   return (b == 0) ? a : GCD(b, a % b);
}
var width = $("#gallery").data("wijgallery").ul[0].children[0].scrollWidth;
var height = $("#gallery").data("wijgallery").ul[0].children[0].scrollHeight;
var gcd = GCD(width, height);

Once we know the gcd, we can find the aspect ratio of the image in the following way :

var aspectRatio = width / gcd + ":" + height / gcd;

Resizing the Image

Now, all we need to do is to set the width of the image according to this aspect ratio.

galleryHeight = $(".wijmo-wijgallery-content").height();

var actualWidth = (galleryHeight * (width / gcd)) / (height / gcd);
$(".wijmo-wijgallery-content img:eq(0)").width(actualWidth);

Important

An important thing to note here is that the above code would resize only the first image because all images are not loaded into the DOM at document.ready(). To make sure that all the subsequent images are also resized according to the aspect ratio, we must run this code in the ‘beforeTransition‘ event of wijgallery as well with a slight modification.

$("#gallery").wijgallery({
   thumbnailOrientation: "vertical",
   thumbnailDirection: "before",
   beforeTransition: BeforeTransition
});

function BeforeTransition(e, args) {
   var index = args.to;
   var width = $("#gallery").data("wijgallery").ul[0].children[index].scrollWidth;
   var height = $("#gallery").data("wijgallery").ul[0].children[index].scrollHeight;
   var gcd = GCD(width, height);
   var aspectRatio = width / gcd + ":" + height / gcd;
   var actualWidth = (galleryHeight * (width / gcd)) / (height / gcd);
   $(".wijmo-wijgallery-current img").width(actualWidth);
}

After resizing the image, it’ll be displayed according to the aspect ratio as below :

Please take a look at the attached sample for complete implementation.

Download Sample