fancybox 134
The fancybox 1.3.4 is no longer supported - the new one is fancybox 3. I create this page just for demonstration and show some of my scripts the I used before. The important thing is to edit the css to point to the correct files for the icon images.
Create a script to for all the class when we use them.
<'link rel="stylesheet" type="text/css" media="all" href="/idogjs/fancybox134/fancybox134.css" />
<'script src="/idogjs/fancybox134/jquery.min.js" type="text/javascript">
<'script src="/idogjs/fancybox134/fancybox134.js" type="text/javascript">
<'script src="/idogjs/fancybox134/easing134.js" type="text/javascript">
<'script src="/idogjs/fancybox134/mousewheel134.js" type="text/javascript">
<'script type="text/javascript"> var $jQ=jQuery.noConflict(); $jQ(document).ready(function(){ }); <'script src="/idogjs/fancybox134/i134.js" type="text/javascript">
i134.js
jQuery(document).ready(function() { $jQ("a.idogw").fancybox({ 'hideOnContentClick': true, 'padding':0, 'overlayColor': '#fff', 'overlayOpacity':0.9, 'titleShow' : true, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'easingIn' : 'easeOutBack', 'easingOut' : 'easeInBack' }); })
Images
in the href put these tags for gallery next-back
title="front suspension low" rel="images" class="idogw"
Iframe Websites
$jQ("a.iframeb").fancybox({ 'padding':0, 'overlayOpacity':0.9, 'overlayColor': '#000', 'speedIn': 200, 'speedOut': 200, 'width' : '95%', 'height' : '95%', 'autoScale' : true, 'type' : 'iframe' });
title="techs11" rel="images" class="iframeb"
Youtube
$jQ(".youtubeb").click(function() { $jQ.fancybox({ 'overlayOpacity':0.9, 'overlayColor': '#000', 'padding' : 0, 'autoScale' : false, 'title' : this.title, 'width' : 560, 'height' : 315, 'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type' : 'swf', 'swf' : { 'wmode' : 'opaque', 'allowfullscreen' : 'true' } }); return false; });
title="youtube" rel="images" class="youtubeb"
Vimeo Videos
$jQ("a.vimeob").click(function() { $jQ.fancybox({ 'overlayOpacity':0.9, 'overlayColor': '#000', 'padding' : 0, 'autoScale' : false, 'transitionIn': 'elastic', 'transitionOut' :'elastic', 'speedIn' : 200, 'speedOut' : 200, 'title' : this.title, 'width' : 560, 'height' : 315, 'href' : this.href.replace(new RegExp("[0-9]", "i"), 'moogaloop.swf?clip_id=1'), 'type' : 'iframe', 'scrolling' : 'no' }); return false; });
title="Vimeo Video" rel="images" class="vimeob"