Issue

This Content is from Stack Overflow. Question asked by Kaxsp

I am trying to display a gallery with multiple images, and i would like that each image would have a button to rotate each image.

So, following the idea of the answer of this question, I created below code:

<style>
  img {
    width: auto;
    height: auto;
    image-rendering: pixelated;
  }
  :root {
    --turn : 0deg;
    }

#theImage {
  -webkit-transform:rotate( var(--turn) );
  -moz-transform: rotate( var(--turn) );
  -ms-transform: rotate( var(--turn) );
  -o-transform: rotate( var(--turn) );
  transform: rotate( var(--turn) );
}
</style>


<script>
    const Root     = document.documentElement
, gRoot    = getComputedStyle(Root)

var RotateDeg = parseInt(gRoot.getPropertyValue('--turn'))

function rotate90()
{
RotateDeg = (RotateDeg+90) % 360
Root.style.setProperty('--turn', RotateDeg + "deg")
}
</script>

<div class="card shadow-sm">
        <img id="theImage" alt="text of my image 1" class="img-thumbnail card-img-top" property="contentUrl"
     src="myimage1.png"/><br/>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="rotate90()">Rotar</button>
        </div>
    </div>
</div>

<div class="card shadow-sm">
        <img id="theImage" alt="text of my image 2" class="img-thumbnail card-img-top" property="contentUrl"
     src="myimage2.png"/><br/>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="rotate90()">Rotar</button>
        </div>
    </div>
</div>

So, it works partialy, the main problem I have is that when i click one button, it not only rotates its image but ALL images. I think the main reason is because it is using the same ID. The problem i have is that it is a gallery with thousand of images and i wouldn’t like to create an ID for each image.

Is there any solution i could use here to rotate just 1 image without creating thousand of IDs?

Thank you!

Solution

Firstly, you will have to use $('#theImage') since you are referencing by id. Try the below code.

let angle = [0, 90, 180, 270];
let current = 0;

function rotate90() {
  current++;
  if (current == 4)
    current = 0;
  $('#theImage').css('transform', 'rotate(' + angle[current] + 'deg)');
}

.btn-floating-container {
  top: 50px;
  left: 50px;
  position: fixed;
  z-index: 1;
}

.btn-floating {
  width: 150px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  padding: 0px;
  font-size: 24px;
}

.rotateimg90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-floating-container">
  <button class="btn-floating btn btn-primary btn-medium" onclick="rotate90()">ROTATE</button>
</div>

<img id="theImage" src="https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />

This Question was asked in StackOverflow by JavaSheriff and Answered by Nidhin Joseph It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.