Note: ID's are single use and are only applied to one element.
Galleries are created from elements who have the same "rel" tag value.
fancyBox will try to guess content type from href attribute but you can specify it directly by adding classname (fancybox.image, fancybox.iframe, etc).
Example: <a class="fancybox.iframe" href="http://jquery.com">Open iframe</a>
<ul class="list">
<li>
<a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a>
</li>
<li>
<a class="various fancybox.iframe" href="http://jquery.com/">Iframe</a>
</li>
<li>
<a class="various" href="#inline">Inline</a>
</li>
<li>
<a class="various" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SWF</a>
</li>
</ul>
<ul class="list">
<li>
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
</li>
<li>
<a class="various fancybox.iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
</li>
<li>
<a class="various" href="/data/non_existing_image.jpg">Non-existing url</a>
</li>
</ul>
Extended functionality