Solved

JQuery image turn over

Posted on 2012-03-26
5
949 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 500 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Help with Javascript to round decimal points to 2 13 33
Wordpress and Wufoo 1 39
Rotate images for Web Page 11 26
Problem in javascript 17 22
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

749 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