I have a page on my site that I cannot get to work via fancybox. Now, I am not sure if this is in the right forum, so could use help on where it should be AND what is wrong.
If you go to http://www.saccc567.com/MembersPix.php this same routine works as expected
Here is my problem page: http://www.saccc567.com/2009Pictures2.php and my code for this page is below:
<?php
session_start(); // always use this, just in case
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2009 SACCC Show Picture Page</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.Pictures1 a").fancybox();
});
$(document).ready(function() {
$("div.Pictures2 a").fancybox();
});
function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="gallery-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
}
$(".gallery").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$(".gallery2").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$(".gallery3").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
</script>
<link href="AllPages.css" rel="stylesheet" type="text/css">
<style type="text/css">
@charset "utf-8";
/* CSS Document */
#header {
/* background-color: #FF3; */
color:#000;
margin: -5px 0px 0px -10px;
/* height: 150px; */
font-size: 1.1em;
padding: 10px 10px;
border: solid 1px green;
text-align: center;
vertical-align:middle;
background-color:#0C3;
}
#mainContent {
padding-left: 10px;
padding-top: 2px;
/* background-color: #567; */
/* border: solid 1px green; */
margin: 0 175px;
position: relative;
}
.clear {
clear: both;
}
.SACCCMission p {margin-bottom: 10px; }
p.info {padding-bottom: 10px; text-align:center;}
h2, h3 {text-align:center; padding-top: 5px;}
#gallery-title { text-align: left; color:#000;}
#gallery-title b { display: block; margin-right: 80px; }
#gallery-title span { float: right; }
a {
margin: 10px 10px 10px 10px;
padding: 10px 10px;
}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body id="2009ShowPixPage" >
<div id="Wrapper" class="Container">
<div id="leftcol">
<?php include_once('inc/MainNav.php'); ?>
<p></p><p></p><p></p> <p></p>
<p style="margin-top: 50px;"><center>
<?php
echo "Page last modified: <br>" . date ("F d Y", getlastmod());
?>
</p></center>
</div>
<!-- end left column -->
<!-- end right column -->
<div id="center-col">
<div id="header">
<h1 class="SACCCWelcome">2009 SACCC Open Car Show Pictures - Millwood Park </h1>
<div class="SACCCMission">
<p>Here are some pictures from the 2009 SACCC Open Show. Hope you enjoy!!</p>
<p></p>
<p style="text-align:left; font-size:.8em;">Click on an image to see it in larger form. While large image is showing, click on the left or right edge to go to the next or previous image. Press ESCape key to close large image display.</p>
</div>
</div>
<div class="Pictures1">
<br><br><br>
<h2></h2>
<p></p>
<?php
$image_display_height = 100; // standard thumbnail display height
$image_display_width = 130; // standard thumbnail display width
$image_count = 1; // counter to keep track of images displayed
$pathToImages = "Shows/2009/SACCC_Show/";
$pathToThumbs = "Shows/2009/SACCC_Show/Thumbs/";
$dir = opendir( $pathToThumbs );
echo '<p align="center" style:"margin-top: .5em; margin-bottom: .5em;">';
$switch = 0;
while (false !== ($fname = readdir($dir)))
{
$r = 1;
if ($switch == 0)
{
$q = 4;
$switch = 1;
}
else
{
$q = 5;
$switch = 0;
}
while (($r <= $q) && (false !== ($fname = readdir($dir))))
{
// strip the . and .. entries out
if ($fname != '.' && $fname != '..')
{
echo '<a href='.$pathToImages.$fname.'" class="link2" rel="gallery" title="2009 SACCC Show">';
echo '<img src="'.$pathToThumbs.$fname.'" width="130" height="100"></a>';
$image_count++ ;
$r++ ;
}
}
echo '</p>';
echo '<p align="center" style:"margin-top: .5em; margin-bottom: .5em;">';
}
echo '</p>';
?>
</div>
<!-- end of Pictures1 area-->
<!-- oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo -->
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
</div>
<!-- end center column -->
</div>
<!-- Container / Wrapper -->
</body>
</html>