JavaScript - Fancybox Popup On Page Load

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>

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.

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

This script displays a link to a registration/login form that loads in a light box for Joomla.
I've been goin nuts trying to figure out how to get this to load on page load with a delay.
Anyone know how to get this done?
PHP Code:
<?php
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/system/css/modal.css');
$document->addScript(JURI::base() . 'media/system/js/modal.js');
$document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});");
$user = & JFactory::getUser();

$uri = JFactory::getURI();
$url = $uri->toString();
$return = base64_encode($url);

?>
<div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden">
<a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a>
</div>
<?php if ($user->get('guest')) :?>
   <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" 
      onclick="SqueezeBox.fromElement(this); return false;"  
      rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a>
   <?php else: ?>
<?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?>
<br>
   <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a>
<?php endif; ?>
<script type="text/javascript">
function LB_onLogout() {
   var form = new Element('form');
   form.setProperty('method', 'POST');
   form.setProperty('target', '_self');
   form.setProperty('action', 'index.php');
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'option');
   input.setProperty('value', 'com_user');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'task');
   input.setProperty('value', 'logout');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'return');
   input.setProperty('value', '<?php echo $return; ?>');
   form.appendChild(input);
   
   $E('body').appendChild(form);
   form.submit();
}
</script>

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.