• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 995
  • Last Modified:

JQuery image turn over

I have two images which I want to switch between, using a link / button. The effect I am looking for is that of turning a card over - .e.g such as a playing card - so that you can switch between the front and back images.

There are lots of scripts available that will slide the images, but I would really like to give the impression that the "card" is being turned over.

The closest I have found is "QuickFlip 2" but it doesn't appear to have callback functions, which I need. I need to call my own functionality when the image flips over.

I would love to write it myself but my JQuery knowledge is not up to it ... I could probably build on from a good starting point though!
0
ascendinternet
Asked:
ascendinternet
1 Solution
 
designatedinitializerCommented:
You have this option here:

http://lab.smashup.it/flip/

It's got callbacks and its usage is pretty straightforward.
0
 
Ronak PatelCommented:
0
 
Steve KrileCommented:
This isn't 100% clean yet, but I think it demonstrates a reasonable approach.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TV with JQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var frontImage = "http://i777.photobucket.com/albums/yy57/Freethey/winter001.jpg";
        var backImage = "http://i261.photobucket.com/albums/ii41/Thumper460/WinterSnow.jpg";

        $(document).ready(function () {

            //set the original card image source
            $(".card").attr("src", frontImage);

            //wire up the click event on the card
            $(".card").click(function () {
                //start the jqueryUI animated transition between a normal card, and a collapsed card - set the speed to fast - add a callback
                $(this).addClass("collapse", "fast", function () {
                    //after the collapse has finished, swap the image

                    //get the current src that the user sees
                    var thisSrc = $(this).attr("src");

                    //swap the images
                    $(this).attr("src", (thisSrc == frontImage) ? backImage : frontImage);

                    //remove the collapsed style by invoking the jquerUI's style transition
                    $(this).removeClass("collapse", "fast");
                });
            })
        });


       

    </script>
    <style>
        /*basic style for the card - the important parts are the width, height, and margin settings*/
        .card {width: 280px;height:200px;box-shadow: 5px 5px 5px #ccc;border-radius:5px;margin: 10px auto;}

        /*squeeze the image by setting the left and right margins to exactly half the width of the image.  Explicitly set the width of the image to 
        something greater than zero so the card doesn't disappear completely.*/
        .collapse {margin: 10px 140px;width:4px}
    </style>
</head>
<body>
    
   <div style="padding: 10% 45%;">
        <img alt="winter" class="card" />
   </div>

</body>
</html>

Open in new window

0
 
ascendinternetAuthor Commented:
The client has decided to remove the "animation" - aarrgh!

However, the suggestion above was a good starting point.
0
 
ascendinternetAuthor Commented:
The solution was good because I could try it straight away, but it would need work to make it function correctly.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now