CODEWITHSUNDEEP
javascripthtmlrotationimage-rotationflip
MariaT
MariaT

Reputation: 13

How is it that my image will only flip once?

4 images are displayed and it's suppose to flip the image horizontally on click and swap image with another by using the arrow indicator. The image swap is working, but the image will only flip once.

Below is my code, how is it not possible to flip the image multiple times?

I've tried several thing and I can't seem to get it working.. HELP!

<body>
    <h1>My Images Gallery</h1>


    <div class="polaroid">
        <img src="winter.jpg" alt="Winter view" style="width:100%">
        <div class="container">
            <p>Make the image just like this by clicking and moving the tiles</p>
        </div>
    </div>

    <table>
        <tr>
            <td id="a">
                <img id="imga" src="right-top.jpg" alt="Winter view" onclick="flip('imga')">
                <div id="texta">Right top tile</div>
            </td>
            <td id="pijlTop" class="pijl">
                <span onclick="swap('a', 'b')">&#8644</span>
            </td>
            <td id="b">
                <div>
                    <img id="imgb" src="left-top.jpg" alt="Winter view" onclick="flip('imgb')">
                </div>
                <div id="textb">Left top tile</div>
            </td>
        </tr>
        <tr>
            <td id="pijlLeft" class="pijl">
                <span onclick="swap('a', 'c')">&#8645</span>
            </td>
            <td/>
            <td id="pijlRight" class="pijl">
                <span onclick="swap('b', 'd')">&#8645</span>
            </td>
        </tr>
        <tr>
            <td id="c">
                <div>
                    <img id="imgc" src="right-down.jpg" alt="Winter view" onclick="flip('imgc')">
                </div>
                <div id="textc">Right bottom tile</div>
            </td>
            <td id="pijlBottom" class="pijl">
                <span onclick="swap('c', 'd')">&#8644</span>
            </td>
            <td id="d">
                <img id="imgd" src="left-down.jpg" alt="Winter view" onclick="flip('imgd')">
                <div id="textd">Left bottom tile</div>
            </td>
        </tr>
    </table>
    <script>
        function flip(a) {
            var img = document.getElementById(a);
            if (img.style === 'img'){ 
            img.style = "transform:rotate(180deg);";
            }
            else {
                img.style = "transform:rotate(180deg);";
            }
        }

        function swap(a, b) {
            var atext = document.getElementById("text" + a).innerHTML;
            var btext = document.getElementById("text" + b).innerHTML;
            var aimg = document.getElementById("img" + a).src;
            var bimg = document.getElementById("img" + b).src;

            document.getElementById("text" + a).innerHTML = btext;
            document.getElementById("text" + b).innerHTML = atext;
            document.getElementById("img" + a).src = bimg;
            document.getElementById("img" + b).src = aimg;
        }
    </script>
</body>

Upvotes: 0

Views: 284

Answers (3)

ivanibash
ivanibash

Reputation: 1491

transform:rotate(180deg) always sets rotation relative to the original image. This is why your code rotates an image only once. If you want to flip the image again you should check if it is flipped and if so, set it back to transform:rotate(0deg). Here is plain javascript implementation since I noticed you are not using jQuery.

HTML:

function flip(a) {
  var img = document.getElementById(a);
  if(img.classList.contains('flipped')){
    img.classList.remove('flipped');
  } else {
    img.classList.add('flipped');
  }
}

CSS:

.flipped {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

Award-winning fiddle.

Upvotes: 0

Felix Haeberle
Felix Haeberle

Reputation: 1606

Look at this snippet!

$('.container').click(function() { 
    $(this).toggleClass('active');
});
.container {
    width: 400px;
    height: 400px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
}
.active {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <img src="http://placehold.it/400x400"/>
</div>

Upvotes: 0

kennasoft
kennasoft

Reputation: 1593

Have you tried changing this line

else {
    img.style = "transform:rotate(0deg);";
}

That should fix it!

Upvotes: 0

Related Questions