Clever Geek Handbook

Continuous rotation of the image when the button is pressed

To display the image, I used a colorbox..and that I added rotate-left and rotate-right to rotate the image. Code:

var rotate_right = document.getElementById('cboxRight');
$(rotate_right).on('click', function () {
    var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
    cboxphoto.setAttribute('-ms-transform', 'rotate(90deg)');
});

var rotate_left = document.getElementById('cboxLeft');
$(rotate_left).on('click', function () {
    var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
    cboxphoto.setAttribute('-ms-transform', 'rotate(270deg)');
});

It rotates 90deg, if I press rightrotate button again then it won't work. I want to rotate it again when we press the button

+3


source to share


1 answer


You only rotate up to 90 or 270 degrees. When you click again, it does not move as it has already been rotated that angle.

Track your current rotation and set this attribute to plus or minus 90deg - you can probably clean up the code a bit, but something like this fiddle: http://jsfiddle.net/w6ho689e/



    var degrees = 0;
$("#cboxRight").on('click', function () {
    var $cboxphoto = $('.cboxPhoto');
    degrees += 90;
    $cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});

$("#cboxLeft").on('click', function () {
    var $cboxphoto = $('.cboxPhoto');
    degrees -= 90;
    $cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});
+6


source






More articles:


All Articles