boost for fancybox

[MarionRaven]

I like to share a few code snippets to accelerate the delivery of fancybox content.

Newer versions of fancybox might use css-sprites like ryan does for the images in the searchbox.

For the sake of simplicity I use url-data to put all images in the css-file.

(/wire/modules/Jquery/JqueryFancybox/JqueryFancybox.css)

Despite the greater total size (base64 encoding) this is already a gain.

With gzip compression the size will not even increase significant.

Then a .htaccess should be used:

<Files "*.css.gz">
ForceType text/css
</Files>
<Files "*.js.gz">
ForceType text/javascript
</Files>
<Files "*.gz">
AddEncoding gzip .gz
</Files>

Since IE less than IE8 don't support url-data I have a conditional comment in my template for them:

    <!--[if lt IE 8]>
       <style>
           #nav {
               height:38px;
           }
       </style>
       <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/urldata.css" />
   <![endif]-->

Of course I also changed the reference to the css-file:

<link type="text/css" href="<?php echo $config->urls->modules?>Jquery/JqueryFancybox/JqueryFancybox.css.gz" rel="stylesheet" />

A change in the init-function of ModuleJs.php let's even the PW backend benefit of the compression. But that is optional.

    public function init() {
       $class = $this->className();
       $info = $this->getModuleInfo();
       $version = (int) $info['version'];
       if (is_file($this->config->paths->$class . "$class.css"))
           $this->config->styles->add($this->config->urls->$class . "$class.css" . ((is_file($this->config->paths->$class . "$class.css.gz"))? ".gz" : "") . "?v=$version");
       if (is_file($this->config->paths->$class . "$class.js"))
           $this->config->scripts->add($this->config->urls->$class . "$class.js" . ((is_file($this->config->paths->$class . "$class.js.gz"))? ".gz" : "") . "?v=$version");
   }

urldata.css

JqueryFancybox.css.gz