Fancybox Modified

[nikola]

I still use Fancybox 1.3.4 in my projects, Fancybox 2.x is nice but it's cluttered with options and weight.

So, I've made a modified version of Fancybox 1.3.4, stripped down IE6,7 support, removed bunch of sliced graphics that make shadows and such and made it use CSS3 instead.

It's a 1:1 copy except title position outside that resembles one used in Fancybox 2.

I've also used next, previous and close buttons from Fancybox (like the bigger buttons more )

It's only 25kb in weight, and consists of 4 files only.

You can try it by downloading from the link below.

Ryan, maybe you could substitute your version from the core with this one?

You can see the demo here.

-----------------------------------------------------------------------------------------------------------------------------

EDIT: It's done (see the post below)

Download: https://github.com/nvidoni/fancybox

[ryan]

Looks good to me! I will definitely use this for my next lightbox usage. Admittedly, I'm not sure I can swap out the one in PW with this one just yet because I know some people are using PW's FancyBox on the front-end of their site, and something like IE6/IE7 support might be needed there. So might want to wait for a larger release number to make a change like that. Though sooner or later we'll probably have to switch PW to use something more mobile friendly. Is this version of FancyBox more mobile friendly than the one we've got in place?

[nikola]

Ryan, I can implement back support for IE through the filters and there is a way to make it mobile friendly (iPhone, iPad, Android, ...). I'll make necessary changes and post it back here.

[nikola]

I've posted new version, it's mobile compatible (smartphones & tablets), it works on IE6-8 but without shadows and caption opacity (I think that those browser days are numbered anyway).

EDIT:

In IE8 everything works fine... (shadows etc.)

Don't forget to put meta tag in the head of your document to make it show correctly:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Preview link - same as in the first post.

[ryan]

Thanks Nikola! I will switch over to this one in the dev branch to test.

[nikola]

I'll post updates as soon as I fix them, I've noticed that preloader image is not always in the center of the screen, and when viewing images on the phone horizontally titles on the images look weird...

[nikola]

I've completed the plugin, you can see the demo here and download it here.

What's new compared to v1.3.4

• mobile & tablet support (iPhone, iPod, iPad, Android, BlackBerry)
  
• CSS3 optimizations
  
• iframe fix
  
• dropped IE6-7 support for shadows & opacity.
  

Usage

Check out the API at official site. There is a new option showIframeLoading (true/false; default:true) that shows loading indicator (spinner) while loading iframes.

You can use plugin as standalone, these optimizations are not tied to ProcessWire CMS (but are implemented for it).

Meta

Don't forget to put: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> in the HEAD of the document to make it work on mobiles & tablets.

[diogo]

Don't forget to put: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

People should be careful when doing this. Make sure that your website is truly responsive when you use something like this.

[nikola]

I've removed "user-scalable=0" from meta viewport, it's not necessary for fancybox to run optimized and you can scale your site if it isn't responsive.

[ryan]

Looks good, thanks Nikola!