Flipping Card effect help

whizynix02

New Member
Messages
95
Reaction score
0
Points
0
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

Banned
Messages
1,389
Reaction score
12
Points
0
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

New Member
Messages
23
Reaction score
0
Points
0
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.
 

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
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

New Member
Messages
185
Reaction score
0
Points
0
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!).
HTML:
<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! :)
 
Last edited:

whizynix02

New Member
Messages
95
Reaction score
0
Points
0
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!).
HTML:
<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... :)
 
Last edited:

nexhunter

New Member
Messages
239
Reaction score
1
Points
0
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.
 
Last edited:

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
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

New Member
Messages
95
Reaction score
0
Points
0
ok ... i will ... when i uploaded it.. i will let you know... thanks for the help... :)
 
Top