Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

JQuery image turn over

Posted on 2012-03-26
5
Medium Priority
?
981 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

636 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