?
Solved

JQuery image turn over

Posted on 2012-03-26
5
Medium Priority
?
968 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

765 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