Page Flip with jQuery – jFlip : Plugin of the week – May 12

12 May, 2009

Page Flip with jQuery – jFlip : Plugin of the week – May 12

Posted by: Mahbub In: Plugin of the week| Plugins

So it’s not flash after all to do all the magics! We have seen and still seeing flash doing wonders and magics. One of the cool things that was developed was pageflip. I saw that first when i was playing with flash in 2002-2003 i guess in flashkit and actionscripts.org. You can see a very good pro version of such thing here. But for us, who want most of the things done in jQuery – finally has an alternative to that page flip thing. It’s not a fully alternative of flash but not bad for minimal use page flip effect.

page_flip

That’s how it looks with a plugin called jFlip written by Renato Formato at http://www.jquery.info/scripts/jFlip/demo.html

The demos on that pages has different setups with some options. And i created one with some of my dream cars here

Hope you like the initiative by Renato.

Tags: flashpageflip, page flip, slideshow

22 Responses to "Page Flip with jQuery – jFlip : Plugin of the week – May 12"

1 | Jenitha

May 18th, 2009 at 2:47 am

Hi,

This does not work in IE is it? how to solve this issue. I tried to work on this but not able to. Please someone help me with this.

2 | Mahbub

May 20th, 2009 at 5:34 am

Hmm, yes, it seems IE is culprit again. As a developer i shouldn’t say this but join http://www.wedontsupportie.com/.

3 | Developer

July 26th, 2009 at 7:12 pm

If you say you shouldn’t say something, yet say it still, what does that tell me? Yes, it would be nice to trash IE, but real world developers understand the need to hit that market still, so that really isn’t an option for professional developers, now is it?

4 | Mahbub

July 26th, 2009 at 7:24 pm

@Developer :

If you look at http://www.w3schools.com/browsers/browsers_stats.asp you’d notice that Microsoft’s browsers have lost their market to a great extent. And if microsoft doesn’t provide capabilities to it’s browsers to support latest technologies, they will be automatically trash it. If we don’t push people stop using IE, visitors will not know it. It’s not an option for professional developers to put a BIG STOP using IE, but it’s the professional developers who have changed people and will change the people’s choice of browsers.

5 | Kaan

August 12th, 2009 at 8:24 am

Real world statistics please. Dont give us statistics about the pages where developers and designers browse. Tell us about NYtimes, MSN Yahoo or local equivalents.

6 | Mahbub

August 12th, 2009 at 9:09 am

@Kaan, So W3C statistics are unreal to you? W3C stats don’t mean the browser stats for people visiting the w3c site. It reflects the sample of the population who browse with different browsers/os etc on the WWW. Is MSN, Yahoo or NYTimes giving stats to public ? I’m sure they’ll be hell closer to w3c stats.

7 | Frank

October 24th, 2009 at 10:37 pm

It’s a surprisingly good script, but the IE problems are a showstopper for me. Even if it’s just a problem in IE6, it’s a major problem – you might loose up to one in five browsers. If it affects IE7, you may as well forget it.

I’d love for people to stop using IE too, and I spread the FireFox and Chrome love whenever I can, but the fact of the matter is that developers need to develop for the future of the web as well as the present. If I told my clients I had a great script that four of five visitors could see, they’d ask me what was going to use instead – the 20% of clients they stood to lose wouldn’t be tolerated.

So while it’s a pretty slick script, it can’t be considered a professional solution.

8 | mahbub

October 25th, 2009 at 1:40 am

It’s open source and free. Why don’t we tweak the script or find alternative solutions for IE? This is how it works. This is a decent script and a good inspiration of what can be done with javascript with advanced browsers. Take it, develop it have fun with it.

9 | Renato Formato

October 30th, 2009 at 3:52 pm

The script does work with IE, sorry not to have pointed out this before. It work thanks to the google made excanvas script, or better, a special modified version I wrote to support jFlip.

The demo mahbub shows here with its dream cars is missing the excanvas script, therefore it does not work with IE. Try here http://www.jquery.info/scripts/jFlip/demo.html

10 | Mahbub

October 30th, 2009 at 7:51 pm

Thanks Renato for stopping by here showing the latest updates. May be the excanvas wasn’t there when i blogged about this in May 12.

11 | Madan Gopal

October 31st, 2009 at 1:20 am

Can we show Content data with image
Please tell me
And how it is done with flipping image gallery
madangdhiman@gmail.com

Thanks

12 | Mahbub

October 31st, 2009 at 1:35 am

@madan

I don’t think it’s possible to animate text with jFlip plugin. Perhaps you can use Flip Plugin here http://lab.smashup.it/flip/

13 | Madan Gopal

October 31st, 2009 at 4:06 am

Mahbub as your given Flip pligin ’s Url

Can i fetch it with database table .
If i have more content fields then how i worked with it or also if i need only left to right flipping

Please tell me

14 | Mahbub

October 31st, 2009 at 4:20 am

The plugin has nothing to do with database. It’s upto you how you are bringing the content. If you can generate the list elements in the plugin dynamically from DB, why not?

15 | frank

January 13th, 2010 at 9:26 pm

didnt worked in IE7 for me

16 | Mahbub

January 13th, 2010 at 11:39 pm

Hey Frank,

The latest plugin in fact works with IE using excanvas. Take a look at here in the original project page. http://www.jquery.info/scripts/jFlip/demo.html

It’s a little slow, but works.

17 | sanjay

July 1st, 2010 at 12:27 am

hi! can i add a link when the user clicked the page, after it flipped? need to do this soon..thanks man! please contact me thru email.

18 | raloocka

July 11th, 2010 at 4:08 pm

Great plugin! But how can you put some content (texts or some divs) instead of images?

19 | raloocka

July 11th, 2010 at 4:25 pm

It is great, I like it very much ! I looked through the code hopeing that I will find a way to show the contend of my div (” just some text?) but with no success . If there is a way can you let me know?

20 | peter

August 12th, 2010 at 10:05 am

Looks quite good, but in firefox it doesn’t run as smoothly as one could wish for. Also, the page is distorted during flipping.

21 | Erik

August 12th, 2010 at 10:12 am

Take a look at this version: http://www.jpageflip.de
Note that there are several nice features.
* realistic flipping behavior (book style)
* front and back of a page are animated during flipping
* transparent images (variable alpha values can be set)

22 | Gregor

August 28th, 2010 at 1:31 pm

not bad but jpageFlip (http://www.jpageflip.de) looks quite better than this version.

Comment Form

Gregor: not bad but jpageFlip (http://www.jpageflip.de) looks quite better than this version.
Erik: Take a look at this version: http://www.jpageflip.de Note that there are several nice features. * realistic flipping behavior (book style) * front
peter: Looks quite good, but in firefox it doesn't run as smoothly as one could wish for. Also, the page is distorted during flipping.