JavaScript - Fancybox Confirm Replacement Help

All,
I'm opening up a page using Fancybox:
Code:

$("#register_box").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'hideOnOverlayClick': false,
/*'type' : 'iframe',*/
'autoDimensions'	: true			
});

This works fine and opens up my registration page. However when I have the type commented it won't display my reCaptcha. If I uncomment this in my jQuery then it will display the reCaptcha. Any ideas to why this is? Thanks in advance for any ideas.

I did find this link:
http://www.warpturn.com/using-fancybox-with-recaptcha/

This doesn't help me though because I need it to load without the iFrame but could give some direction on what is going on.

Hey there,

I have a form which open in a jQuery Fancybox Window.

The fancybox window opens automatically when the page loads. When it loads, I would like it to set focus on the username field in the form in the Fancybox window.

I have found that this must be done when fancybox is envoked, thus I have tried the below code which does not work :

Code:

<script type="text/javascript">
   jQuery(document).ready(function() {
    $("#hidden_link").trigger('click');
	document.getElementById('login_form.username').focus(); 
});
</script>

The form name is "login_form" and the field name is "username".

Can anyone help????

Thanks a lot!!!

I am creating a site that has a link with sIFR text that links into inline content via Fancybox. I know it works properly withour sIFR on, so the two are battling. Is there any way to have both??

url: www.happydogwebproductions.com/cadillac

The contact link is supposed to pop up via fancybox. You can get it to load if you are quick enough to click it before sIFR kicks in.

I've tried asking elsewhere, got over 100 views and not one reply. Any help would be greatly appreciated

Hello!
I am not sure if I'm posting in the right place so if I'm not, tell me to gtfo (and please let me know where I should be instead)!

I want to create a gallery of images with a fancybox-esque style but incorporate the "folder functionality" that this site has: http://www.johannespescatore.com/

In other words: When I click on an image I want it to expand to "fullscreen". (This I can manage with fancybox.) What I can't work out how to do is display more images from the same photo-session at the bottom of the fullscreen.

ANY help would be much appreciated! I am at a loss as where to start...

Thank you
/Hout

Hey everyone,

I've got a section on my website where I have 2 images placed on top of each other when the user rollovers the image, the image ontop fades out revealing the image underneath. You can then click on this underneath image to open a fancybox window and scroll through pictures. My problem is that sometimes the fade out gets 'stuck' and after closing the fancybox window, the image reamins half faded out etc and the rollover doesn't work anymore.

here's my code:

Code:

<style type="text/css" media="screen">
   .js #animators { position: relative; height: 100px}
   .js #animators div.container { position: absolute; left: 0; top: 0

</style>

  <script type="text/javascript">

    document.documentElement.className += " js"; // Add js class to the HTML element
    $(function(){
      var $containers = $("#animators > div").hide();
	  
      $('#show').show();

      $('tr td a.c').each(function(i,el){
        var idx = i;
        $(this).click(function(e){
          var $target = $containers.filter(':eq(' + idx + ')');
          if($containers.filter(':visible').not($target).length){
            $containers.filter(':visible').fadeOut();
          }
          $target.not(':visible').fadeIn();
          e.preventDefault();
        })
      })
    });
</script>

<div class="thumbnail" style="margin-top:5%; margin-right:2%;">
	    			<div class="visible-image">
						<img src="images/illustrationslabel.jpg" />
					</div> 
        			<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
        			</div>
   				</div>

mc

Hello guys!
I have a jquery fancybox that pop's up on exit (using onbeforeunload), now i want it to show only once so i tried doing it with cookies but i just can get it to work. this is my script so far hope you can help me with this, Thanks!
Code:

<script type="text/javascript">
	function PopIt() 
	{
		if (document.cookie.length == 0)
		{
			var exdate=new Date();
			exdate.setDate(exdate.getDate()+7);
			document.cookie="cook=yes" + ";expires="+exdate.toUTCString();

			$("a#trigger").trigger('click');
			window.onbeforeunload = UnPopIt;
			return "Before you leave:\nPlease take a few seconds to answer 2 questions\nso we can better assist you and others in the future. \nThanks!"; 				
		}
	}
	
	function UnPopIt()  { /* nothing to return */ } 
 
	$(document).ready(function() {
		window.onbeforeunload = PopIt;
 
		$("a#trigger").fancybox({
			'hideOnContentClick': false,
			'showCloseButton': true
		});
 
		$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
	});	
</script>

Hi,
I'm new at this stuff, like, super new. Basically, I want to call Fancybox to open a youtube video in a scrolling gallery. I think it's pretty simple to do but so far I can only get it to open when it is specifically clicked on and not part of the scrolling gallery.
I think I need a different thing besides "click" to call the function but I have no idea what.
For you pros, this should be easy (I hope). Please help!
Code:

$(document).ready(function() {
			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'swf'                 : {'mode':'transparent'}
				});
				$("a#p20").click(function() {
                 $.fancybox({
                  'padding'             : 0,
                  'autoScale'   : false,
                  'transitionIn'        : 'none',
                  'transitionOut'       : 'none',
                  'title'               : this.title,
                  'width'               : 680,
                  'height'              : 495,
                  'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                  'type'                : 'swf',
                  'swf'                 : {'allowfullscreen':'true'} 
                  });
                 return false;

            }); 
			});

This is my HTML
Code:

 <a rel="example_group" href="images/portfolio/crapbooking.jpg"><img alt="" src="images/portfolio/crapbooking_thumb.jpg" /></a>
      <a rel="example_group" href="images/portfolio/acuppakoko.jpg"><img alt="" src="images/portfolio/acuppakoko_thumb.jpg" /></a>
      <a id="p20" rel="example_group" href="http://www.youtube.com/watch?v=GaidsWnSOz0"><img alt="" src="images/portfolio/hongkong_thumb.jpg" /></a>

Thoughts?

I'm using a simple PHP login script (this one: http://www.zubrag.com/scripts/password-protect.php) in tandem with Fancybox (he http://fancybox.net/). The Fancybox pop-ups on my pages use iframes, to hold written content and links.

When I log in once, I can access all the regular HTML pages inside the login script without having to log in again. But when I click Fancybox's pop-up links, the pop-up is logged OUT. How can I make all the iframe pop-ups stay logged in when the user is logged in?

Thanks for any help, much appreciated.

http://www.earthinke.co.uk/main_site/product.php

Hi

I'm trying to get something to work on the site URL'd above but failing miserably.

If you can please follow the link, hit the red rectangle on the RHS and then when the bigger image loads into the DIV above, click on it...

All I want is for this link to open in fancybox (using the class="earthInke") but it won't work from the image...just opens in a new page

Below it you will see a text link, this works as I want it to, but I cannot get it work from the image

Probably something completely wrong in what I am doing or I've missed something out, any help would be appreicated guys

Thanks

Pete

I have a page that loads a fancybox popup and it works perfectly with the cookie for setting ho many days to show. the problem i have is that i need it to show 1 every 24 hours over a 3 day period. once the 3rd day is over and the user sees the window for the 3rd day i need a cookie set to never show the window again. here is my code as it sits now. I have worked with this for a couple of days on and off and it is above my head for sure.

any help is appreciated.

$(function() {
if ($.cookie('moment_comm')) {
// it hasn't been 1 day yet
} else {


$("#autostart").fancybox({'overlayShow':true,frameWidth:
840,frameHeight:360}).trigger('click');
}
}
);

$('#autostart').live('click', function(e) {
e.preventDefault();
$.cookie("moment_comm", "true", { path: '/', expires: 1 });

$.fancybox.close()
});

All,
I've got the following bit of code:
Code:

$(function(){
		$(".facebook").fancybox({
			'width'				: '80%',
			'height'			: '80%',
        	'autoScale'     	: false,
        	'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'hideOnOverlayClick' : false,
			'hideOnContentClick' : false,
			'type'				: 'iframe'
		});
});

When I click on a link I'm trying to open up an iFrame to have my user have some facebook photos be displayed. If they aren't logged in I redirect them to facebook to login and then facebook redirects them back to my page. The return URL looks something like:
http://website.com/get_started.php?page=facebook

What I would like to do is open up the same iFrame now with their pictures. So I have the following code to do that:
Code:

function showFacebook(){
		alert("goes to show facebook");	
		$(".facebook").trigger('click');
}

function parseQS(str){
  		var ob={}, float="", key="", dc=decodeURIComponent;

		for( var i=0, mx=str.length; i<mx;i++){
		var it=str[i];
    	if(it==="="){ key=float; float=""; continue;}
    	if(!it.search(/^[?&]/)){ 
        if(it==="&" && str.slice(i+1,i+5)==="amp;"){ i=(i+4);float+="&"; continue;}
        if(key){ob[key]=dc(float);} key=""; float="";  continue;
    	}
    	float+=it;
		}
		ob[key]=dc(float);
		return ob;
}
		
		$(window).load(function(){
			var allParams=parseQS(location.href);
			if(allParams.page!=undefined){
			if(allParams.page=="facebook"){
			$(".facebook").fancybox({
			'width'				: '80%',
			'height'			: '80%',
        	'autoScale'     	: false,
        	'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'hideOnOverlayClick' : false,
			'hideOnContentClick' : false,
			'type'				: 'iframe'
			});
			showFacebook();
			}
			}
		});

I can't get the iFrame to load again. In my window.load function I'm basically trying to reinitialize the fancybox iframe code and then based on the link he
http://fancybox.net/blog

I'm trying to trigger it again. The alert appears so I know it's getting to the function but it's not opening up the iFrame. Any ideas on how to make this happen? Thanks very much in advance!

Hello, I am building a charirty website and having a great deal of trouble with a page that has a Piecemaker slideshow and a fancybox modal window.

When you click on the modal window it launches correctly, but it is also displaying the Piecemaker slideshow over the top of it.

What I want is for the Piecemaker slideshow to flow as it is on the page and when you click on the link for the Modal window, for just the modal window to open (hope that makes sense)

the web page is : www.imovecornwall.org/index.htm

the html for the page is:

<title>imove estate agents cornwall, not for profit low cost online estate
agents</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.css" />
<link rel="stylesheet" href="fancybox_multiple/fancybox/style.css" />

<script type="text/javascript">
$(document).ready(function() {

$("a.pop").fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.8
});

$("a.pop2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-10061181-2']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();


function FP_changePropRestore() {//v1.0
var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i];
if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; }
}

function FP_changeProp() {//v1.0
var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o";
ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
</script>
</head>

<body background="images/bg.gif" onload="FP_preloadImgs(/*url*/'images/redbadge.png')">

<div style="position: absolute; width: 1001px; height: 606px; z-index: 2; left: 92px; top: 190px" id="layer2">
<div style="position: absolute; width: 566px; height: 44px; z-index: 1; left: 414px; top: 676px" id="layer9" align="right">
<font face="Trebuchet MS" size="1">Copyright 2011 . imove cornwall . not
for profit estate agents in cornwall . a community lead social
enterprise</font><p><font face="Trebuchet MS" size="1">
imove estate agents cornwall, cornwall estate agents, imove cornwall,
imove, i move, not for profit estate agents, estate agents in cornwall,
houses for sale in cornwall, sell privately, private house sales
cornwall, i move cornwall, i move estate agents</font></div>
<img border="0" src="images/c-head.png" width="980" height="40"><div style="position: absolute; width: 420px; height: 415px; z-index: 2; left: 0px; top: 40px; border-left: 1px solid #DEDBD2; border-right: 1px solid #DEDBD2" id="layer10" align="left">
<div style="position: absolute; width: 1001px; height: 100px; z-index: 1; left: -2px; top: 495px" id="layer11">
<a title="click here for information about imove estate agents" href="about/index.htm">
<img border="0" src="images/_front-small_2.png" width="327" height="135" alt="imove estate agents cornwall"></a><a href="search.htm"><img border="0" src="images/_front-small2_blank3.png" width="324" height="135"></a><a href="sell.htm"><img border="0" src="images/_front-smallr_blank.png" width="330" height="135"></a></div>
<p align="center">
<object classid="clsid27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="978" height="495">
<param name="movie" value="piecemaker.swf">
<param name="quality" value="High">
<embed src="piecemaker.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="978" height="495"></object>
</div>
<address>
<a href="sell.htm">
<img border="0" src="resized_png_images/head_new_template.png" width="980" height="416"></a></address>
<address>
&nbsp;</address>
<address>
&nbsp;</address>
</div>
<div style="position: absolute; width: 191px; height: 227px; z-index: 1; left: 93px; top: 11px" id="layer1">
<p align="center">
</p>
<address align="left">
<img border="0" src="images/logo_2_72dpi_small.png" width="177" height="176"></address>
<address align="center">
&nbsp;</address>
<p align="left">
&nbsp;</p>
<p align="center">&nbsp;</div>

<div style="position: absolute; width: 116px; height: 121px; z-index: 4; left: 1020px; top: 34px" id="layer36">
<a title="Click here to sell with imove" href="sell.htm">
<img border="0" src="images/bluebadge.png" width="133" height="133" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/redbadge.png')"></a></div>




<p align="center">&nbsp;</p>




<div style="position: absolute; width: 171px; height: 58px; z-index: 3; left: 327px; top: 61px" id="layer33">

<a class="pop" href="resized_png_images/modal1.png" rel="group1">
<img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a><address>
<span style="font-style: normal"><font face="Myriad Pro" size="1">&nbsp;</font></span></address>
<address>
<span style="font-style: normal"><font face="Myriad Pro">Not for
profit</font></span></address>
</div>




<div style="position: absolute; width: 225px; height: 58px; z-index: 3; left: 522px; top: 61px" id="layer34">

<address>
<span style="font-style: normal">

<a class="pop" href="resized_png_images/modal2.png" rel="group1">
<img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address>
<address>
<font size="1"><span style="font-style: normal">&nbsp;</span></font></address>
<address>
<span style="font-style: normal"><font face="Myriad Pro">Cost
effective</font></span></address>
</div>




<div style="position: absolute; width: 282px; height: 58px; z-index: 3; left: 721px; top: 61px" id="layer35">

<address>
<span style="font-style: normal">

<a class="pop" href="resized_png_images/modal3.png" rel="group1">
<img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address>
<address>
<font size="1"><span style="font-style: normal">&nbsp;</span></font></address>
<address>
<span style="font-style: normal"><font face="Myriad Pro">Supporting
local good causes</font></span></address>
</div>




<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<div style="position: absolute; width: 657px; height: 50px; z-index: 3; left: 262px; top: 194px" id="layer13">
<div style="position: absolute; width: 130px; height: 44px; z-index: 1; left: 679px; top: 1px" id="layer14">
<a title="Join us on Facebook" href="http://www.facebook.com/pages/Truro-United-Kingdom/Imove-cornwall/121184304626633">
<img border="0" src="FaceBook-icon.png" width="33" height="33"></a>&nbsp;&nbsp;
<img border="0" src="Twitter-icon.png" width="33" height="33">&nbsp;&nbsp;
<img border="0" src="Feed-icon.png" width="33" height="33"></div>
<p><font face="Myriad Pro">
<a title="Back to the Homepage" href="index.htm" style="text-decoration: none">
<font color="#000000" id="id1" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id1',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
home</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a title="About imove" style="text-decoration: none" href="about/index.htm">
<font color="#000000" id="id2" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id2',1,'style.textDecoration','underline','style.color','#000000','style.fontFamily','Myriad Pro','style.fontSize','12pt')">
about</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a title="Property for sale with imove" href="search.htm" style="text-decoration: none">
<font color="#000000" id="id3" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id3',1,'style.textDecoration','underline','style.color','#000000','style.fontSize','12pt','style.fo ntFamily','Myriad Pro')">
property search</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a title="Sell your property with imove" href="sell.htm" style="text-decoration: none">
<font color="#000000" id="id4" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id4',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
sell your property</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a title="Support for existing customers of imove" href="support.htm" style="text-decoration: none">
<font color="#000000" id="id5" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id5',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
support</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a title="Contact imove cornwall" href="contact.htm" style="text-decoration: none">
<font color="#000000" id="id6" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id6',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')">
contact us</font></a></font></div>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>

</body>

</html>

PLease bear with me as I am a total newb to HTML and Jquery.

If someone could very kindly tell me where the problem is, I would very very much appreciate it.

Thank you for your time.

I am now able to list the folders and files in a directory.
However, when I try to pass the values into another function to open the folder/file, I encounter an error saying object expected.
I'm guessing that its the \ in the file paths that is causing the error.

so my solution is to find the \ and replace it with a \\ before passing it to the function to open the file.
but the str.replace("\\","\\\\") does not seem to work.

any ideas?

thanks!

I moved this to a more appropriate place...

http://www.codingforums.com/showthread.php?t=184432

Hi there,
I can;t figure out where to change the code/add in code
I have installed Fancybox using jQuery and done all the neccessary steps to ensure it works as popup. However I can't find where to add in code/edit code to make my title left for instance or bold type etc.

This is the code that calls the fancybox website is: http://www.soltoro.com/NEW/projects/elrayo.html

Code:

<script> $(document).ready(function() {

	/* This is basic - uses default settings */
	
	$("a#single_image").fancybox({
	'titlePosition': 'inside'


	});
	
	/* Using custom settings */
	
	$("a#inline").fancybox({
		'hideOnContentClick': true});
		

	

	/* Apply fancybox to multiple items */
	
	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		  'titlePosition'         : 'inside',
		'overlayShow'	:	false
	});
	
});</script>