Scheme worked in php alone, but not in fancybox

[smordue]

A little background, you guys helped me out earlier with an image switcher. basically I had a list of images and a dropdown where a user could select another image like so:

 

My picture-switcher.php:

 

<?php
$picture = $_GET['picture'];
setcookie("picture", $picture, time()+604800);
if(isset($_GET['js'])) {
	echo $picture; 
} else {
	header("Location: ".$_SERVER['HTTP_REFERER']);
}
?>

 

The head section in my page:

 

<?php 
if(!empty($_COOKIE['picture'])) $picture = $_COOKIE['picture'];
else $picture = 'Business-Worldwide';
?>

 

The picture section:

 

<div id="banner"><img class="resize" src="../images/siteimgs/<?php echo $picture ?>.jpg" name="pictures"/>   </div>

 

The dropdown select code:

 

<?php
$cur_group = '';
$files = scandir('images/siteimgs');
sort($files);
$thelist .= '<option selected="selected"';
$thelist .= '>Select Site Image</option>';
foreach($files as $file) {
if ($file == '.' || $file == '..') { continue; }
   $file_x = substr($file, 0, -4);
   $file_y = explode("-", $file_x);
   $group = substr($file, 0, strpos($file, '-'));
   if(empty($cur_group)) {
      $thelist .= '<optgroup label="'.$group.'">';
      $cur_group = $group;
   }
   if($group != $cur_group) {
      $thelist .= '</optgroup>';
      $thelist .= '<optgroup label="'.$group.'">';
      $cur_group = $group;
   }
   $thelist .= '<option value="picture-switcher.php?picture='.$file_x.'">'.$file_y[1].'</option>';
}
?><select onchange="window.location.href=this.options[this.selectedIndex].value">
<?php echo $thelist; ?>
</select>

 

This worked fine until I had too many images, my users complained that they had to click each one to see what they looked like and that was not very efficient. So I am trying to make a popup box with thumbnails where when a thumbnail is clicked it does the same thing as selecting an item from the dropdown did before, which is to immediately change the image without a reload. Oh, and close the popup.

 

I am fiddling around with jquery and fancybox. Here is where I am now:

 

My picture-switcher.php is unchanged from above

 

My head now has:

 

<?php 
if(!empty($_COOKIE['picture'])) $picture = $_COOKIE['picture'];
else $picture = 'Business-Worldwide';
?>
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.2.6.css" media="screen"/>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.pop_up").fancybox({
	'hideOnOverlayClick':true
});
});
</script>

 

Note: I have also tried 'hideOnContentClick" above with the same result.

 

My picture section is unchanged from above.

 

I created this new file imagepick.php for the popup:

 

<?php
$files = scandir('../images/siteimgs');
sort($files);
foreach($files as $file) {
if ($file == '.' || $file == '..') { continue; }
   $file_x = substr($file, 0, -4);
   $file_y = explode("_", $file_x);
   $file_z = explode("-", $file_y);
   $thelist .= '<li class="picks"><a href="picture-switcher.php?picture='.$file_x.'"><img src="/images/tn/tn_'.$file_x.'.jpg"/></a><br/>'.$file_y[1].'</li>';
}
?>
<ul onclick="window.location.href=this.options[this.selectedIndex].value" style="width:415px">
<?php echo $thelist; ?>
</ul>

 

Note: I have tried moving the "onclick" to the <li> instead of the <ul>, no difference.

 

 

And this is the link to call the fancybox popup:

 

<a class="pop_up iframe" href="pickimage.php">Image Picker</a>

 

This almost works... but there are two problems, this displays a listing of thumbnails. When clicking a thumbnail it changes the picture but requires a reload to display it, also the popup does not close when you select an image, you have to x-out.

 

Any ideas, again the first code above functioned correctly with the dropdown.

 

Sorry if this is in the wrong forum... was not sure where is should go.

 

Steve

 

 

 

 

[smordue]

I figured it out