I'm currently working on an image slider that has some interactive features. Here's how it functions:
- When a user clicks on an image, it slides and comes to the front.
- On the next click, the image is flipped and enlarged.
- Then, on another click, the image returns to its original size and position.
If I select a new image while one is already enlarged, I want to create a function that will bring back the first image to its original state before enlarging the new one.
How can this be achieved?
var status = 1;
function flipIt(obj) {
console.log("value before Function status " + status);
if (status == 1) {
alert("I am From JS IF part");
$(obj).animate({ "left": "-=30px", "opacity": "0.65" }, "slow");
$(obj).animate({ "height": "400px", "width": "350px" }, 30);
// Code for flipping the image
// Additional CSS changes
status = 0;
console.log("after if value set status " + status);
} else {
alert("I am From JS Else part");
$(obj).animate({ "left": "+=30px", "opacity": "0.99" }, "slow");
$(obj).animate({ "height": "354px", "width": "295px" }, 30);
// Code for bringing image back to original state
// Additional CSS changes
status = 1;
Removecss();
console.log("ater else value set status " + status);
}
}