Cannot get fancybox to work

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>

I haven’t looked at your code yet, but on the page that doesn’t work, I see a double-quote " after the url as in

Shows/2009/SACCC_Show/100_3423.jpg"

Something is placing a quote at the end of the url.

I believe your problem is in this line:

echo '<a href='.$pathToImages.$fname.'" class="link2" rel="gallery" title="2009 SACCC Show">';

This code creates the HTML output

<a href=Shows/2009/SACCC_Show/100_3423.jpg" class="link2" rel="gallery" title="100_3423.jpg">

The resultant HTML output should contain a double-qoute after href=

OK, I think I fixed the problem with the HREF. BUT it still does not do the fancybox “popup”.

Oh, the title was changed to the filename so I could see that they were coming in correctly. That should not affect the fancybox stuff should it???

FilWebDev, not sure what you mean. Can you give me an example??

Thanks

Replace

http://www.saccc567.com/Shows/2009/SACCC_Show/100_3458.jpg

with

http://www.saccc567.com/Shows/2009/SACCC_Show/100_3458.JPG

and everything will be OK. The file name is in error. The filename is case sensitive.

Thank SteveS1951 for pointing out things my feeble eyes could not see. I also did not know that the php would be so picky for the file extension case.

Got it working now… kind of in Firefox but Chrome and IE are not playing well. That is in another thread.

I’m glad to hear you have got it kinda working. Actually it is not PHP that is “picky for the file extension case”, it is the operating system, linux or unix. If you had apache installed on a Microsoft operating system, it would not care about the case.