Flipping Card effect help

[whizynix02]

hello.. i need some help for my coding..

i need a flipping card effect like, when a user click on my card it will show its back content and vise verse..

eg. like in postcards... the front shows the photo then when clicked it shows the content of the back...

anyone?? please help.. thanks... :happysad:

 

[Twinkie]

Your going to want to do that in flash. I would recommend to create a thread in the Marketplace forums to ask someone to code that for you. Or alternatively, you could do it in Java or Silverlight, but they are not as good or supported.

 

[Chrisisrad]

Your going to want to do that in flash. I would recommend to create a thread in the Marketplace forums to ask someone to code that for you. Or alternatively, you could do it in Java or Silverlight, but they are not as good or supported.

Not true at all.
Ive done just this in jQuery.
while i will admit. its more work (image) wise.

But ive done it.

I use it for a dashboard like mac's osx that i made.
When you press info it does the flip.

 

[whizynix02]

can i have a link or sample?

 

[Twinkie]

Chrisisrad: Yeah I thought about doing it in JavaScript, but that would be more work than it is worth in my opinion.

whizynix02: jQuery is a JavaScript library which has built in effects for you. You can get examples of how to work it at jquery.com

 

[Scoochi2]

This is something that is easy to achieve without jQuery, or flash.
JavaScript alone could do it. (html alone would be too messy)
When clicked, use JS to switch the image (if showing front, change the source to the image for the back of the card else change the source to the image for the front).

If desirable, you could alternatively use the mouseover and mouseout events to show the front and back of the cards without any clicking necessary. Fully working example follows (assuming image names are correct!).

<img src="card1_front.png" alt="Card 1"
onmouseover="src='card1_back.png'" onmouseout="src='card1_front.png'">

If you want a fancy card-turning over effect as a transition, consider making the card images animated, without a loop. Simple!

 

[whizynix02]

whizynix02: jQuery is a JavaScript library which has built in effects for you. You can get examples of how to work it at jquery.com

thanks for this info... i will browse on that link...
Edit:

This is something that is easy to achieve without jQuery, or flash.
JavaScript alone could do it. (html alone would be too messy)
When clicked, use JS to switch the image (if showing front, change the source to the image for the back of the card else change the source to the image for the front).

If desirable, you could alternatively use the mouseover and mouseout events to show the front and back of the cards without any clicking necessary. Fully working example follows (assuming image names are correct!).

<img src="card1_front.png" alt="Card 1"
onmouseover="src='card1_back.png'" onmouseout="src='card1_front.png'">

If you want a fancy card-turning over effect as a transition, consider making the card images animated, without a loop. Simple!

thanks for this info... i can use this to some of my effects... but i need on the back side is an info from a variable... like in post cards... a user can write his/her message...

 

[nexhunter]

You could do dynamic images and use sql to store the information and use a unique identifier to select from the table the specific field from where then the image would be generated with that data.

 

[whizynix02]

i foud this link http://jonraasch.com/blog/quickflip-2-jquery-plugin but i can't together the codes... i've download the jquery.quickflip.js ... but things doesn't work... maybe i put the code in the wrong place.. hmmm help please...

 

[Twinkie]

Nice find whizynix02, you are going to have to send us a link to the page you are trying to integrate so we can check out whats wrong.

 

[whizynix02]

ok ... i will ... when i uploaded it.. i will let you know... thanks for the help...

 

[whizynix02]

still my flipping card didn't work...