?
Solved

JQuery image turn over

Posted on 2012-03-26
5
Medium Priority
?
999 Views
Last Modified: 2012-08-14
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
Comment
Question by:ascendinternet
5 Comments
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37765954
You have this option here:

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

It's got callbacks and its usage is pretty straightforward.
0
 
LVL 5

Expert Comment

by:Ronak Patel
ID: 37766017
0
 
LVL 16

Accepted Solution

by:
Steve Krile earned 1500 total points
ID: 37770833
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
 

Author Comment

by:ascendinternet
ID: 37849108
The client has decided to remove the "animation" - aarrgh!

However, the suggestion above was a good starting point.
0
 

Author Closing Comment

by:ascendinternet
ID: 37849117
The solution was good because I could try it straight away, but it would need work to make it function correctly.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question