Shane,
I printed the output from the successful Thickbox page and the troublesome Fancybox page. I caught one msitake on my part. The path to the jquery.fancybox.js was wrong. I had the folder in the path as /js/ when it should have been /jq/
I fixed that but the Fancybox eye candy is still not working. Clicking a thumbnail will present the full size image in its own window.
Here is the relevant output: I snipped out the top, right column, footer etc. The site functions just fine otherwise. The MaxiGallery "Manage Photographs" works on both the Thickbox and the Fancybox gallery pages.
<![endif]-->
<script src="assets/templates/phototest/jq/jquery-1.2.6.js" type="text/javascript"></script>
<! nav javascript starts here! >
<script>
jQuery(function() {
// set opacity to nill on page load
jQuery("ul#topnav span").css("opacity","0");
// on mouse over
jQuery("ul#topnav span").hover(function () {
// animate opacity to full
jQuery(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
jQuery(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
<! nav javascript ends !>
<script type="text/javascript" src="assets/templates/phototest/jq/jquery.fancybox.js"></script>
<script type="text/javascript" src="assets/templates/phototest/jq/jquery.pngFix.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$(document).pngFix();
$("li.image_gallery a").fancybox({ 'hideOnContentClick': true });
});
</script>
<link rel="stylesheet" href="/seattlerealestate/assets/snippets/maxigallery/css/default.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<ul id="topnav">
<li><a href="index.php?id=1" class="home"><span></span></a></li>
<li><a href="index.php?id=2" class="portfolio"><span></span></a></li>
<li><a href="index.php?id=3" class="services"><span></span></a></li>
<li><a href="index.php?id=4" class="about"><span></span></a></li>
<li><a href="index.php?id=5" class="contact"><span></span></a></li>
</ul>
<div id="content">
<div id="left_column"><!-- left column begins -->
<h1><a href="index.php?id=1"</a></h1>
<div class="post">
<h3 id="post-">Bedrooms </h3>
<p> </p>
<p>Click any thumbnail to activate gallery.<br />Click the right side of the image to advance to the next photo.<br />Click the left side of the image to return to previous photo.</p>
<p>
<center><form action="/seattlerealestate/index.php?id=9" method="post" name="activateadminform">
<input type="hidden" name="mode" value="admin" />
<input type="submit" value="Manage pictures" />
</form></center>
<br />
<div class="thumbscontainer">
<ul class="thumbs">
<li class="image_gallery">
<a href="/seattlerealestate/assets/galleries/9/mojo_guarddog.jpg" class="fancybox" rel="gallery">
<img src="/seattlerealestate/assets/galleries/9/tn_mojo_guarddog.jpg" class="thumbnail" title="Dog
» Click to zoom ->" alt="Dog » Click to zoom ->" />
</a>
<p style="width: 126px;">
Dog
</p>
</li><li class="image_gallery">
<a href="/seattlerealestate/assets/galleries/9/smudge_rokkor1.jpg" class="fancybox" rel="gallery">
<img src="/seattlerealestate/assets/galleries/9/tn_smudge_rokkor1.jpg" class="thumbnail" title="Cat
» Click to zoom ->" alt="Cat » Click to zoom ->" />
</a>
<p style="width: 126px;">
Cat
</p>
</li>
</ul>
</div>
</p>
<p> </p>
</div><!-- post closes(left_column content) -->
</div><!-- left column ends -->
The main difference I see between this page and the Thickbox page is the "jQuery" vs "$" usage in the nav script call and the call code for the Fancybox script...
