Hi,

I have a colorbox/lightbox script that I would like to reference in the head section. Now when I go to the advanced settings of the page and insert my script in the Page Header Tags section, the script seems to insert it just before the jquery script and hence the colorbox/lightbox doesn't work. Is there a way to put my scripts just after the jquery script within the head section?

Thanks
Wasim

Currently I don't think it's possible to put the script in the head section as I haven't had any positive response yet. So what I have done is to put the colorbox script within the body. To do that, all I did is put the script in the Text/HTML module's header tag in advanced settings and that works fine for me.

Hop this helps:

Page Settings - put in header tags section

<link type="text/css" media="screen" rel="stylesheet" href="/Resources/Shared/colorbox/colorbox.css" />
<!--[if IE 6]>
<link type="text/css" media="screen" rel="stylesheet" href="/Resources/Shared/colorbox/colorbox-ie6.css"/>
<![endif]-->

I just put ie6 as a seperate css file you can remove that statement if you want.

Module Settings - put in header

For Single Photo

<script type="text/javascript" src="/Resources/Shared/colorbox/jquery.colorbox-min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".photo").colorbox({overlayClose:false, photo:true});  
});
</script>

For Grouped Photos

<script type="text/javascript" src="/Resources/Shared/colorbox/jquery.colorbox-min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='photos']").colorbox({current:'Photo {current} of {total}', overlayClose:false, slideshow:true,

slideshowSpeed:4000, slideshowAuto:false, photo:true});  
});
</script>

I think the key here is photo:true and ofcourse in the html editor you will need to put the specific class or rel attribute.

Best regards,
Wasim