Reverse Multiple Image under the same Class using RotateImg

HI,I am using this to reverse or flip an image. However, it seems it will only take the first image because of the querySelector. I have several images under the same class, “floor-plan-map”
May I know how to implement the script on all images having that same class? Thank you.

<script>
let rotation = 0;
function rotateImg() {
rotation += 180; // add 90 degrees, you can change this as you want
if (rotation === 360) {
// 360 means rotate back to 0
rotation = 0;
}
document.querySelector(".floor-plan-map").style.transform = rotateY(${rotation}deg);
}
</script>

Hey, @brodneil welcome to the forums.

You are able to use a different method to select the elements. The method needs to be .getElementsBy.... A thing to note ElementS plural.

1 Like

you could use .querySelectorAll
and then loop through all the elements you get
to rotate one at a time.

let floorPlanMapIterable = document.querySelectorAll(".floor-plan-map");
for (let element of floorMapPlanIterable) { 
  element.style.transform = `rotateY(${rotation}deg)`;
}

Thank you so much for the help. I will try this out.

Thank you for this as well. I really appreciate the script you left.

I am clearly a newbie to JS.

Will this do?

var floorPlanMapIterable = [
	'.floor-plan-map'
];

floorPlanMapIterable.forEach(function rotateImg() {
      rotation += 180; // you can change this as you want
      if (rotation === 360) { 
        // 360 means rotate back to 0
        rotation = 0;
      }

So what I have are the following including the script you suggested above:

HTML

<span style="background-color: #000000;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;" onClick="rotateImg()">View Reverse Plan</spam>

JS

<script>
    let floorPlanMapIterable = document.querySelectorAll(".floor-plan-map");
for (let element of floorMapPlanIterable) { 
  element.style.transform = `rotateY(${rotation}deg)`;
}

var floorPlanMapIterable = [
	'.floor-plan-map'
];

floorPlanMapIterable.forEach(function rotateImg() {
      rotation += 180; // you can change this as you want
      if (rotation === 360) { 
        // 360 means rotate back to 0
        rotation = 0;
      }
  </script>

you have a bunch of overlapping variables there …
floorPlanMapIterable seems to be an array that contains one string in that code, which overwrites what was previously in that variable. So it does not contain the iterable of elements of that floor-plan-map class anymore.

.forEach is an array method.
So you’d use only either .forEach or the for-loop to iterate through all the elements in the iterable or array, not both.

and it could all be inside the function rotateImg() if you’d like the rotations to happen when that function is called.

const rotation = 90; // 90 degree rotation

function rotateImg() {
  let floorPlanMapArray = Array.from( document.querySelectorAll(".floor-plan-map") );
  floorPlanMapArray.forEach( function rotateByDeg(element) {
      element.style.transform = `rotate(${rotation}deg)`;
    } // end of function to be applied to each element in the array
  ); //end of .forEach 
}

Notice that Array.from creates an array from that iterable collection.

Also, you have </spam> instead of </span>

1 Like

Thank you so much. Now it is reversing all images. Hurray.

Is there a way for me to reverse it back to the original once the button is clicked again? At this point, clicking the button again somehow does not put back the image to the original?

This one worked earlier with the first match

if (rotation === 360) { 
        // 360 means rotate back to 0
        rotation = 0;
      }

This somehow did it. Not sure if this is the proper script.

add_action( 'wp_head', function () { ?>

<script>
let rotation = 0; // you can change the degree rotation

function rotateImg() {
	rotation += 180; // you can change this as you want
      if (rotation === 360) { 
        // 360 means rotate back to 0
        rotation = 0;
      }
  let floorPlanMapArray = Array.from( document.querySelectorAll(".floor-plan-map") );
  floorPlanMapArray.forEach( function rotateByDeg(element) {
      element.style.transform = `rotateY(${rotation}deg)`;
    } // end of function to be applied to each element in the array
  ); //end of .forEach 
}
</script>
<?php } );

You could check the .transform to see whether it has been rotated or not, I guess;
and reset the .transform if there is a rotation.

const rotation = 180; // 180 degree rotation

function rotateImg() {
  let floorPlanMapArray = Array.from( document.querySelectorAll(".floor-plan-map") );
  floorPlanMapArray.forEach( function rotateByDeg(element) {
      if (element.style.transform.includes("rotate")) { 
        element.style.transform = '';
      } 
      else {
        element.style.transform = `rotate(${rotation}deg)`;
      }
    } // end of function to be applied to each element in the array
  ); //end of .forEach 
}
1 Like

This somehow did it. Not sure if this is a proper script.

add_action( 'wp_head', function () { ?>

<script>
let rotation = 0; // you can change the degree rotation

function rotateImg() {
	rotation += 180; // you can change this as you want
      if (rotation === 360) { 
        // 360 means rotate back to 0
        rotation = 0;
      }
  let floorPlanMapArray = Array.from( document.querySelectorAll(".floor-plan-map") );
  floorPlanMapArray.forEach( function rotateByDeg(element) {
      element.style.transform = `rotateY(${rotation}deg)`;
    } // end of function to be applied to each element in the array
  ); //end of .forEach 
}
</script>
<?php } );