Update FancyBox Gallery

Dynamically update FancyBox gallery - press Enter while fancy box is open to load all images into the gallery.

by Mottie

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://mottie.github.com/Keyboard/js/jquery.mousewheel.js"></script>
<div id="examples">
<h1>Examples</h1>
Press ENTER while fancy box is open to add ALL images into the gallery.
<p>
    Different animations - 'fade', 'elastic' and 'none'<br />
    
    <a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
        <img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" />
    </a>
    
    <a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
        <img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" />
    </a>
    
    <a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">
        <img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" />
    </a>
</p>

<p>
    Different title positions - 'outside', 'inside' and 'over'<br />
    <a id="example4" title="Lorem ipsum dolor sit amet" href="http://farm3.static.flickr.com/2680/4305925199_dee66e6c4b.jpg">
        <img alt="example4" src="http://farm3.static.flickr.com/2680/4305925199_dee66e6c4b_m.jpg" />
    </a>

    <a id="example5" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="http://farm3.static.flickr.com/2775/4110967360_661cd9d99e.jpg">
        <img alt="example5" src="http://farm3.static.flickr.com/2775/4110967360_661cd9d99e_m.jpg" />
    </a>

    <a id="example6" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur." href="http://farm3.static.flickr.com/2779/4262915740_c631846165.jpg">
        <img alt="example6"...

CSS

body { background: #ddd url(); color: #000; }
#examples img { width: 150px; }


/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 * 
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
 * 
 * Version: 1.3.4 (11/11/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1104;
    display: none;
}

#fancybox-loading div {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 480px;
    background-image: url('http://i201.photobucket.com/albums/aa236/Mottie1/testsite/fancybox/fancybox.png');
}

#fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    display: none;
}

#fancybox-tmp {
    padding: 0;
    margin: 0;
    border: 0;
    overflow: auto;
    display: none;
}

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

#fancybox-outer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}

#fancybox-content {
    width: 0;
    height: 0;
    padding: 0;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1102;
    border: 0px solid #fff;
}

#fancybox-hide-sel-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1101;
}

#fancybox-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width:...

JavaScript

/* Modified and compressed verion of fancybox 1.3.4 
   more info 
   http://stackoverflow.com/questions/4999390/fancybox-ajax-image-gallery
*/
(function(b){var m,t,u,f,D,j,E,n,z,A,q=0,e={},o=[],p=0,d={},k=[],G=null,v=new Image,J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,W=/[^\.]\.(swf)\s*$/i,K,L=1,y=0,s="",r,i,h=false,B=b.extend(b("<div/>")[0],{prop:0}),M=b.browser.msie&&b.browser.version<7&&!window.XMLHttpRequest,N=function(){t.hide();v.onerror=v.onload=null;G&&G.abort();m.empty()},O=function(){if(false===e.onError(o,q,e)){t.hide();h=false}else{e.titleShow=false;e.width="auto";e.height="auto";m.html('<p  id="fancybox-error">The requested content cannot be loaded.<br  />Please try again later.</p>'); F()}},I=function(){var a=o[q],c,g,l,C,P,w;N();e=b.extend({},b.fn.fancybox.defaults,typeof b(a).data("fancybox")=="undefined"?e:b(a).data("fancybox"));w=e.onStart(o,q,e);if(w===false)h=false;else{if(typeof w=="object")e=b.extend(e,w);l=e.title||(a.nodeName?b(a).attr("title"):a.title)||"";if(a.nodeName&&!e.orig)e.orig=b(a).children("img:first").length?b(a).children("img:first"):b(a);if(l===""&&e.orig&&e.titleFromAlt)l=e.orig.attr("alt");c=e.href||(a.nodeName?b(a).attr("href"):a.href)||null;if(/^(?:javascript)/i.test(c)|| c=="#")c=null;if(e.type){g=e.type;if(!c)c=e.content}else if(e.content)g="html";else if(c)g=c.match(J)?"image":c.match(W)?"swf":b(a).hasClass("iframe")?"iframe":c.indexOf("#")===0?"inline":"ajax";if(g){if(g=="inline"){a=c.substr(c.indexOf("#"));g=b(a).length>0?"inline":"ajax"}e.type=g;e.href=c;e.title=l;if(e.autoDimensions)if(e.type=="html"||e.type=="inline"||e.type=="ajax"){e.width="auto";e.height="auto"}else e.autoDimensions=false;if(e.modal){e.overlayShow=true;e.hideOnOverlayClick=false;e.hideOnContentClick=...