Rotate image on lightbox2 load

Question

I would like to detect EXIF rotation information when lightbox shows an image and apply CSS for rotation.

I use thumbnails with img src attribute value of base64 encoded image data (I use no href attribute for link to original image)

I do not have the option to use server-side code.

It would be best if it happened just before render. Are there any events in lightbox2 like onPreShow or onLoad ?

Answer 1

I had to modify the preloader.onload handler inside the Lightbox.prototype.changeImage function.

I added the orientation detection code before this code:

$image.width(preloader.width);
$image.height(preloader.height);

imgHeight and imgWidth are swapped and css is added in my code if image orientation is landscape.

      $preloader = $(preloader);
      var imgHeight = preloader.height;
      var imgWidth = preloader.width;

      EXIF.getData(preloader, function() {

          var rotation = EXIF.getTag(this, "Orientation");
          if (rotation == 6 || rotation == 8) {
              var css = exif2css(rotation);
              if (css.transform) {
                  $image[0].style.transform = css.transform;
              }
              if (css['transform-origin']) {
                  $image[0].style['transform-origin'] = css['transform-origin'];
              }
              console.log("rotate");
              var tmp = imgHeight;
              imgHeight = imgWidth;
              imgWidth = tmp;
          } else {
              //clear css
              $image[0].style.transform = "";
              $image[0].style['transform-origin'] = "";
          }


          $image.width(imgWidth);
          $image.height(imgHeight);

          if (self.options.fitImagesInViewport) {
             ...
       });