Image rotation

[m3Lith]

It might not be needed for most people, but I'd love to have the optional function to be able to rotate the picture.

I'm going to try doing that myself at the moment.

[MSchmidt]

Hey, do you have an idea already on how to implement this? My first thought is towards a CSS rotation which shouldn't be to hard to implement.

[m3Lith]

Yep, CSS transform option is the most lightweight IMO.

I'm not that good with JS/jQuery myself, so I haven't really reached anything working yet :/

[m3Lith]

Anyway, here's my try on implementing this. Added rotateButton option:

    if (options.rotateButton) {
      $image_holder.append('<a id="fullsized_rotate"></a>');
      $(document).on('click', '#fullsized_rotate', function(e) {
        e.preventDefault();
        e.stopPropagation();
        return rotateImage();
      });
    }

The main function:

rotateImage = function() {
    var image, degg;
    image = images[current_image];
    degg = getRotationDegrees(image) + 90;
    return $(image).css('transform', 'rotate('+ degg +'deg)');
  };

And the angle calculation function:

  getRotationDegrees = function (obj) {
    var matrix = $(obj).css("-webkit-transform") ||
    $(obj).css("-moz-transform")    ||
    $(obj).css("-ms-transform")     ||
    $(obj).css("-o-transform")      ||
    $(obj).css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }

    if(angle < 0) angle +=360;
    return angle;
  };