I used a template to build this site, and the pirobox script doesn't seem to be running. I've copied over the html exactly like it was on the template to my site:
http://www.nvamf.org/artmusic.html
Here is the template's site:
http://www.metamorphozis.com/free_template...lur/preview.php

When you're on the template's site, you click on an image and it pops up a window that shows the full image that one can rotate through the gallery of images. On my site you click on an image and nothing happens. I don't think it's the html on the page I'm using (but will include the code below). I'm wondering if I knocked something out of whack on the CSS page or something, so I'm including the html to that first below. I have not touched the script info.

Is it something else? There were definitly parts to the script that were missing, but the fact it works just fine for the template maker makes me wonder what the hell I did. Please help!!


CSS
_____________________________________________________________
/*Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*
{
border: 0;
margin: 0;
}

img
{
border: 0px;
}

body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(images/bg.jpg) center top repeat-x #000000;
line-height: 20px;
}

#main {
width: 1014px;
margin: 0px auto;
background:url(images/main.jpg) right top no-repeat;}

#header {
height: 250px;
}

#logo {
padding: 0px 0px 0px 0px;
text-align: center;
}


#logo a {
text-decoration: none;
text-transform: lowercase;
font-size: 14px;
font-weight:100;
color: #ffffff;
text-align: left;
}

#logo H3 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
text-align: left;
}

#buttons{
text-align:center;
height: 34px;
margin-left: 0px;
background: url(images/buttons.png) center top no-repeat;
width: 1015px;
padding-left: 3px;
padding-top: 8px;

}

#buttons a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
display: block;
float: left;
text-decoration: none;
color: #ffffff;
text-align: center;
padding-top: 2px;
height: 20px;
width: 160px;
}

.but {


}

.but_razd {
width: 3px;
height: 8px;
float:left;}


#buttons .but:hover {
text-decoration: none;
color: #990066;}

.top { height:340px;
background:url(images/top.png) left top no-repeat;}

.top_text {
width: 942px;
float:left;
background: url(images/content_text.png);
height:308px;
padding: 0px 32px 0px 0px;}

.top_img {
float:left;
padding: 15px 31px 0px 15px;
}
.top h1 {
color:#ffffff;
font-size:16px;
padding: 5px 0px 15px 8px;
font-weight: bold;
background: url(images/h1_top.png) left top no-repeat;
}


.top_left { width: 497px;
padding: 5px 0px 0px 5px;
float: left;
height: 335px;}

.top_right { width: 508px;
float: left;
background: url(images/img11.png) left 4px no-repeat;
height: 340px;}


.top_right2 { width: 508px;
float: left;
background: url(images/img11_2.png) left 4px no-repeat;
height: 340px;}

.top_right3 { width: 508px;
float: left;
background: url(images/img11_3.png) left 4px no-repeat;
height: 340px;}

.top_right4 { width: 508px;
float: left;
background: url(images/img11_4.png) left 4px no-repeat;
height: 340px;}

#content{

}


.circl { background: url(images/circl.gif) left top no-repeat;
height: 15px;
width: 17px;
margin: 0px 2px 0px 2px;
float:left; }
.circl:hover {
background:url(images/circl_hov.gif) left top no-repeat; }

.ram1_bg {
background: url(images/ram1_bg.png) left top no-repeat #cccccc;
padding: 0px 10px 0px 15px;

}
.ram1_bot {
background:url(images/ram1_bot.png) left bottom no-repeat;
height: 12px; }

.span_cont{
font-size:12px;
color:#55023C;
font-weight:bold;
}

.span_cont2 {
font-size:12px;
color:#55023C;
font-weight:bold;
padding-left: 30px;
padding-top: 5px;
}

.read_but {
float:right;
margin: 0px 40px 0px 0px;
background: url(images/but_read.gif) left top no-repeat;
width: 114px;
height: 23px;
padding: 5px 0px 0px 0px;
text-align: center;
vertical-align: middle;
}
.read_but a {
height: 28px;
color:#FFFFFF;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;}
.read_but a:hover { text-decoration:underline;}

.i_col_razd {}

.float_left {float:left;}

.i_col {
width: 318px;
float: left;
background: url(images/i_col.png) left top no-repeat;
padding: 5px 5px 0px 5px;
height: 214px;}

.i_col h1 {
background: url(images/i_col_h1.png) left top no-repeat;
padding: 5px 0px 15px 8px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;}

.ram2_bg {
background: url(images/ram2_bg.gif) left repeat-y;

}
.ram2_bot {
background:url(images/ram2_bot.gif) left bottom no-repeat;
height: 12px; }

.a_more {
height:32px;
padding: 11px 0px 0px 0px;
width: 156px;
float:right;
margin: 10px 0px 0px 10px;
background: url(images/a_more.png) ;
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
text-align:center;
font-size: 18px;
text-decoration:none;
}

.a_more:hover {
background: url(images/a_more_hover.png);

}


.left{
width: 671px;
float: left;
color:#000000;
margin-left: 0px;
padding: 0px 0px 0px 0px;
background: url(images/left.png) left top no-repeat #cccccc;
}

.left_bot {
background: url(images/left_bot.png) left bottom no-repeat;
padding: 0px 5px 10px 5px;

}

.left H1 {
background: url(images/h1_left.png) left top no-repeat;
color:#ffffff;
font-size:16px;
padding: 5px 0px 15px 8px;
font-weight: bold;}


.img_l {
float:left;
margin: 5px 15px 0px 0px;
}

.img_r { float: right;
margin: 0px 0px 0px 15px;
}


H1{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #000000;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}

H2{
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #55023c;
text-align: center;
padding: 0px 0px 0px 0px;
line-height: 20px;
}

.read{
display:block;
float:right;
height: 16px;
width: 79px;
text-align: center;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:11px;
color: #55023C;
background: url(images/read.gif) 0px 0px no-repeat;
line-height: 16px;
}



.read:hover {
font-size:11px;
text-decoration: underline;
}

#right{
float: right;
width: 328px;
margin-right: 0px;
}

.span_dat {
color: #002380;
text-decoration: underline;}


.bot_top {
height: 13px;
background: url(images/bot_top.gif) 0px 0px no-repeat;
}

.bot_bot {
height: 13px;
background: url(images/bot_bot.gif) 0px bottom no-repeat;
}

#bottom {
width: 100%;
background:url(images/bot_bg.gif) left repeat-y;
color:#FFFFFF;
padding: 0px 0px 0px 0px;
}

#bottom h2{
font-family: Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 0px;
font-size: 18px;
text-align: center;
color: #ffffff;
font-weight: 100;
line-height: 20px;
}

.razd_bot {
background:url(images/razd_bot.gif) repeat-x;
height: 1px;}

.b_col2 {
width: 254px;
float: left;
margin-left: 76px;
}

.box_us {
width: 245px;
background: url(images/box_us.gif) 0px bottom repeat-x;
padding-left: 10px;
}

.box_us_l {
width: 28px;
float: left;
padding-top:2px;
vertical-align: top;
text-align:left;}

.box_us_r {
width: 217px;
float: left;}





.b_col3 {
width: 253px;
float: left;
margin-left: 76px;
line-height: 25px;
}

.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 40px;}

.b_col3 li {
padding: 8px 0px 2px 0px;
background: none;
}

.b_col3 li a {
color:#FFFFFF;
text-decoration: none;

}
.b_col3 li a:hover {
text-decoration: underline;
}

.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}

.b_col1 {
width: 254px;
float: left;
margin-left: 50px;
text-align: left;
}

.b_col1 ul {
list-style:none;
padding: 0px 0px 0px 40px;}

.b_col1 li {
padding: 8px 0px 0px 20px;
background: url(images/fish2.gif) 0px 15px no-repeat;
}
.b_col1 ul a:hover {
text-decoration:underline;
}

.b_col1 ul a {
color:#ffffff;
text-decoration:none;
font-weight:bold;}

#footer{
height: 60px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 15px 0px 0px 0px;
background:url(images/razd_bot.gif) top repeat-x;
}

#footer a{
color: #ffffff;
font-size: 12px;
text-decoration: none;
}

#footer a:hover{
color: #ffffff;
font-size: 12px;
text-decoration: underline;
}

/* blog */

.text{
padding: 0px 10px 0px 10px;
}

.span_munth {
color:#FFFFFF;
font-size:10px;}

.dat_img {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #ffffff;
float:left;
width: 67px;
height: 55px;
padding: 10px 0px 0px 0px;
margin-right: 15px;
background:url(images/dat_img.gif) 0px 0px no-repeat;
text-align:center;
}

.a_non {
text-decoration: none;
color: #ffffff;}
.a_non:hover {
text-decoration: underline;}

.a_und {
text-decoration: underline;
color: #ffffff;
font-weight: bold;}
.a_und:hover {
text-decoration: none;}

.datc_coment {
height: 20px;
width: 100%;
background: url(images/datc_coment.gif) top repeat-x;
padding: 0px 0px 0px 0px;}

.datc {
float: left;
width: 346px;}

.coment {
float: right;
width: 166px;
text-align: left;}


.ram_top {
background: url(images/ram_top.png) left top no-repeat #cccccc;
width: 318px;
padding: 0px 5px 0px 5px;
}
.ram_bg h1 {
background: url(images/h1_ram_bg.png) left top no-repeat;
padding: 5px 0px 10px 8px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;}

.ram_bot {
background:url(images/ram_bot.png) left bottom no-repeat;
height: 10px; }



.spis {
list-style:none;
padding: 0px 0px 0px 23px;}

.spis li {
padding: 6px 0px 0px 22px;
background: url(images/fish2.gif) 0px 12px no-repeat;
}
.spis a:hover {
text-decoration: none;
}

.spis a {
color:#55023c;
text-decoration: underline;
font-weight: bold;
display: block;}

.blog_l_razd {
background: url(images/blog_l_razd.gif) 12px repeat-x;
height:12px;}

/* gallery */

.gallery {
background:url(images/gallery.png) left top no-repeat #cccccc;}

.gallery_bot {
background: url(images/gallery_bot.png) left bottom no-repeat;
padding: 5px 5px 0px 5px;

}

.row {
padding: 0px 0px 0px 0px;
height: 284px;
}

.box_img2 {
width: 308px;
height: 274px;
background: url(images/box_img.png) left top no-repeat;
padding: 10px 10px 0px 10px;
float:left;
}

.gallery h3 {
padding: 5px 0px 5px 0px;
color: #55023C;
font-size: 16px;
text-align: left;
}

.box_razd {
width: 10px;
height: 50px;
float: left;
}

.gallery h1 {
padding: 5px 0px 15px 8px;
color: #FFFFFF;
font-size: 16px;
background: url(images/h1_gallery.png) left top no-repeat;}

.gal_num {
width:16px;
height:22px;
padding: 3px 0px 0px 9px;
display:block;
background: url(images/gal_number.png) left top no-repeat;
color: #FFFFFF;
font-size: 12px;
margin: 0px 10px 0px 0px;
text-decoration:none;
float: left;}

.gal_num:hover {
background:url(images/gal_number_hover.png) left top no-repeat;
text-decoration: none;}

.g_size
{
width: 308px;
height: 162px;
}

/* about us */

.about_img {
float: left;
margin: 5px 22px 0px 0px;}

.about_col {
float:left;
width: 210px;
padding: 0px 0px 0px 20px;}

.razd_v { height: 1px;
background: url(images/razd_v.gif) left top repeat-x;}

.fish3 {
float:left;
padding: 4px 10px 3px 0px;
}

/* contact us */

.contact {
width: 646px;
padding: 0px 0px 0px 0px;}

.input_txt2 {
width: 622px;
border: none;
background: url(images/input_txt2.jpg) left top repeat-x;
padding: 7px 12px 6px 12px;
color:#ffffff;

}

.text_area2 {
width: 622px;
height:168px;
font-size: 14px;
border: none;
background: url(images/text_area2.jpg) 0px 0px repeat-x;
padding: 8px 12px 8px 12px;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(images/read.gif) left top no-repeat;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
color: #55023C;
text-decoration: none;
padding: 0px 2px 0px 2px;
width: 79px;
height: 16px;
margin: 0px 0px 0px 0px;

}

.lh {
line-height: 22px;
}


/*
scroll styles here
*/

.item { width: 1014px; height: 340px; }
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}

.scrollable { position:relative; overflow:hidden; width: 1014px; height: 340px;}
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;}
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { width:auto; height:20px; float:right; margin:5px 0; padding-right: 20px;}
.navi a { width: 15px; cursor:pointer; height: 15px; float:left; margin:0 0 0 3px; background:url(images/circl.png) no-repeat scroll right top; display:block; font-size:1px;}
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px; background:url(images/circl_hov.png) no-repeat scroll right top}

.header1
{
width: 1014px; height: 340px;
}

.header2
{
width: 1014px; height: 340px;
}

.header3
{
width: 1014px; height: 340px;
}

.header4
{
width: 1014px; height: 340px;
}

/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */


div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}






MY PAGE:
___________________________________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
<script type="text/javascript" src="lib/jquery.custom.js"></script>

<!-- Pirobox setup and styles -->
<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().piroBox({
my_speed: 400, //animation speed
bg_alpha: 0.1, //background opacity
slideShow : false, // true == slideshow on, false == slideshow off
slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

});
});
</script>

<link href="images/style.css" rel="stylesheet" type="text/css" />


<!-- Pirobox setup and styles end-->

</head>
<body>


<div id="main">
<!-- header begins -->
<div id="header">

<div id="buttons">
<a href="index.html" class="but" title="">Home</a><div class="but_razd"></div>
<a href="blog.html" class="but" title="">Blog</a><div class="but_razd"></div>
<a href="gallery.html" class="but" title="">Gallery</a><div class="but_razd"></div>
<a href="about_us.html" class="but" title="">About us</a><div class="but_razd"></div>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>

<div id="logo">
<a href="#">metamorph_shinyblur</a>
<h3><a href="#"><small>Company Slogan Goes Here</small></a></h3>
</div>

</div>
<!-- header ends -->

<!-- content begins -->
<div class="gallery">
<div class="gallery_bot">
<h1>Our Photo Gallery</h1>
<div class="row">
<div class="box_img2">
<div class="g_size"><a href="images/gallery_big1.jpg" class="pirobox_gal1" title="1st Project Image"><img src="images/img31.jpg" alt="" /></a></div>
<h3>New Title</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit </div>
<div class="box_razd"></div>
<div class="box_img2">
<div class="g_size"><a href="images/gallery_big2.jpg" class="pirobox_gal1" title="2nd Project Image"><img src="images/img32.jpg" alt="" /></a></div>
<h3>New Title</h3>
Proin quam diam, vulputate et cursus at, elementum pharetra eros. Proin a fringilla mi. Nulla sit amet ante enim, eget ultricies lectus. Sed id sem urna, ac </div>
<div class="box_razd"></div>
<div class="box_img2">
<div class="g_size"><a href="images/gallery_big3.jpg" class="pirobox_gal1" title="3rd Project Image"><img src="images/img33.jpg" alt="" /></a></div>
<h3>New Title</h3>
Nulla viverra, nisi ac ornare commodo, tellus dolor porta diam, ac sollicitudin odio odio vel libero. Cras in consectetur justo. In hac habitasse platea </div>
</div>
<div style="height:13px"></div>
<div class="row">
<div class="box_img2">
<div class="g_size"><a href="images/gallery_big4.jpg" class="pirobox_gal1" title="4th Project Image"><img src="images/img34.jpg" alt="" /></a></div>
<h3>New Title</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis arcu, aliquet ac rhoncus quis, congue sed erat. Mauris augue magna, auctor sit </div>
<div class="box_razd"></div>
<div class="box_img2">
<div class="g_size"><a href="images/gallery_big5.jpg" class="pirobox_gal1" title="5th Project Image"><img src="images/img35.jpg" alt="" /></a></div>

<h3>New Title</h3>
Proin quam diam, vulputate et cursus at, elementum pharetra eros. Proin a fringilla mi. Nulla sit amet ante enim, eget ultricies lectus. Sed id sem urna, ac </div>
<div class="box_razd"></div>
<div class="box_img2">
<div class="g_size"><a href="images/gallery_big6.jpg" class="pirobox_gal1" title="6th Project Image"><img src="images/img36.jpg" alt="" /></a></div>

<h3>New Title</h3>
Nulla viverra, nisi ac ornare commodo, tellus dolor porta diam, ac sollicitudin odio odio vel libero. Cras in consectetur justo. In hac habitasse platea </div>
</div>
<div style="height:10px"></div>
<div style=" height:35px">
<a class="gal_num" href="#">1</a>
<a class="gal_num" href="#">2</a>
<a class="gal_num" href="#">3</a>
</div>
</div>



</div>


<!-- content ends -->
<!-- bottom begin -->
<div style="height:20px"></div>
<div id="bottom">
<div class="b_col1">
<h2>Services</h2>
<div style="height:5px"></div>
<div class="razd_bot"></div>
<div style="height:10px"></div>
<ul>
<li><a href="#"><strong>Lorem ipsum dolor</strong></a></li>
<li><a href="#">Maecenas in turpis </a></li>
<li><a href="#">Morbi fringilla libero</a></li>
<li><a href="#">In venenatis metus vel </a></li>
<li><a href="#">Donec cursus quam ac </a></li>
</ul>
</div>
<div class="b_col2">
<h2>Recent Posts</h2>
<div style="height:5px"></div>
<div class="razd_bot"></div>
<div style="height:20px"></div>
<div class="box_us">
<div class="box_us_l">
<img src="images/fish_us1.gif" alt="" />
</div>
<div class="box_us_r">
<strong>1234 Some Street, Brooklyn, NY 11201</strong>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="images/fish_us2.gif" alt="" />
</div>
<div class="box_us_r">
<strong>Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910</strong>
</div>
<div style="clear: both; height:10px;"></div>
</div>
<div class="box_us">
<div class="box_us_l">
<img src="images/fish_us3.gif" alt="" />
</div>
<div class="box_us_r">
<strong>E-mail: companyname@yahoo.com</strong>
</div>
<div style="clear: both; height:10px;"></div>
</div>
</div>
<div class="b_col3">
<h2>Follow Us</h2>
<div style="height:5px"></div>
<div class="razd_bot"></div>
<div style="height:10px"></div>
<ul>
<li><img src="images/fu_i1.gif" class=" fu_i" alt="" /><a href="#"><strong>Subscribe to Blog</strong></a></li>
<li><img src="images/fu_i2.gif" class=" fu_i" alt="" /><a href="#"><strong>Be a fan on Facebook</strong></a></li>
<li><img src="images/fu_i3.gif" class=" fu_i" alt="" /><a href="#"><strong>RSS Feed</strong></a></li>
<li><img src="images/fu_i4.gif" class=" fu_i" alt="" /><a href="#"><strong>Follow us on Twitter</strong></a></li>
</ul>
</div>
<div style="clear: both; height: 20px;"></div>
</div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer">
Copyright 2011. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a><br />
<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a>
</div>
<!-- footer ends -->
</div>

<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>

The online tools report markup and CSS errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

This one is especially interesting:

And the JavaScript console reports 404 Not Found for:
style.css
main.jpg
gallery_bot.png
bot_bg.gif
box_us.gif

The errors that come up in those tools aren't errors, they're mostly where & is noted as text. images/style.css was never a file with this template. All image style stuff is located within the main style.css page. I'll definitly look at those again after I eat something.

And yeah, I've already noted the missing images that are referenced on the css page, I've left the references in there to see if I can ever figure out where they were supposed to go. But there was never an image like "main.jpg" with the images within the template. At this time I have no idea where they would live or how they'd look. And if the template had these missing to begin with, then they shouldn't matter because the template's site works without them.

But Pirobox makes use of a CSS file called style.css, unless you copied its content in your own styles.css.

You use Pirobox 1.2.2 (http://www.pirolab.it/pirobox_v_1_2/) which apparently is made to work with jQuery 1.4.2, but you use jQuery 1.3.2. Upgrading your jQuery .js might fix the problem.

And the missing images really are used in your own css:
- images/main.jpg is used by #main.
- images/bot_bg.gif is used by #bottom.
- images/box_us.gif is used by .box_us.
gallery_bot.png is no longer missing.

References (paths) to images from within a css file, start from where the css file is located. Since your styles.css file is in the same folder as the page itself, the relative paths are the same as inline images in your page. Are you sure you haven't forgotten to upload the missing images?