getting a js fancybox script to work

[nicksull]

I have been developing an oscommerce store and everything is fine except for a few little ajax/javascript commands that I cant get to work, so I thought I would post here for some answers.

On my product info page I have a drop down box with this script attached to it

<script language="javascript">
 
function createRequestObject() {
var req;
 
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
 
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
 
} else {
req = NULL;
alert('Problem creating object hetXMLHttpRequest');
}
return req;
}
var http = createRequestObject();
 
function sendRequestSearch(iets) {
http.open('get', 'ajaximage.php?search='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
 
function handleResponseSearch() {
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
document.getElementById("search_results").innerHTML = http.responseText;
          } else {
             document.getElementById("search_results").innerHTML = " &nbsp; ";
          }
       } else {
          document.getElementById("search_results").innerHTML = " &nbsp; ";
       }    }
</script>
 

I then have a <div> called search_results which the above loads the ajaximage.php page into. (I think thats what it does??)

ajaximage.php

<?php 
require('includes/application_top.php');
require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);
 
$id = $_GET['search'];
$options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_thumbnail from " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pov.products_options_values_id = '" .$id . "'");
$options = tep_db_fetch_array($options_query);
 
if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
{
echo "<a id='single_image' href='./images/options/".$options['products_options_values_thumbnail'] ."'>" . "<img src=./images/options/".$options['products_options_values_thumbnail']." width=300 class='noBorder'></a>";
}
if($options['products_options_values_thumbnail'] == '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
{
echo TEXT_IMAGE_NOT_FOUND;
}
if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'false')
{
echo "<img src=./images/options/".$options['products_options_values_thumbnail']." width=300>";
}
?> 
<?php require('includes/application_bottom.php'); ?>
 

When the product info page is loaded I have an image already in the search_results div

<div id="search_results"><?php echo "<a id='single_image' href='./images/options/".$options['products_options_values_thumbnail'] ."'>" . "<img src=./images/options/".$options['products_options_values_thumbnail']." width=300 class='noBorder'></a>"; ?></div>

and when a user changes the drop down box the image changes to the relevant one. My fancybox zoom javascript works on the initial image that loads but when the script runs to change the image in the search_results div, fancybox zoom doesn't work.

I have tried entering the javascript into the php echo on the ajaximage.php page like so

echo "<script type='text/javascript' src='./javascripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='./fancybox/jquery.fancybox-1.3.1.pack.js'></script>
<script type='text/javascript' src='./fancybox/jquery.easing-1.3.pack.js'></script>
<link rel='stylesheet' href='./fancybox/jquery.fancybox-1.3.1.css' type='text/css' media='screen' />
<script language='javascript'>
$(document).ready(function() {
 
    /* This is basic - uses default settings */
 
    $('a#single_image').fancybox({
    'transitionIn'    : 'elastic',
                'transitionOut'    : 'elastic',
    'titlePosition'    : 'over'
 
    });
 
    /* Using custom settings */
 
    $('a#inline').fancybox({
        'hideOnContentClick': true
    });
 
});
</script> <a id='single_image' href='./images/options/".$options['products_options_values_thumbnail'] ."'>" . "<img src=./images/options/".$options['products_options_values_thumbnail']." width=300 class='noBorder'></a>";
 

but still nothing happens, it just loads the image by itself in the page and doesn't zoom.

If I type ajaximage.php?s earch=24 into my browser it loads the image and the fancybox works... So I'm guessing it has something to do with the onstatechange loading the first script that doesn't process the html? I don't actually know??

If anyone could help that would be great, I've been trying to solve this for the last 2 days.

Cheers

Nick

[acoder]

Are you using this? Check the howto.

[nicksull]

Hi acoder,

Thanks for your reply.

I've already installed fancybox using the howto and it works fine when the page ajaximage.php is loaded in a browser by itself.

The problem is I have an ajax script attached to a drop down to load that ajaximage.php as an external page into a div, that's when the javascript doesn't work.

I have done some research and been reading that the scripts on the called in page needs to be evaled explicitly, but I have no idea how to do that. Sorry only have a tiny little bit of knowledge about javascript/ajax.

[acoder]

Yes, eval is one way to run scripts from the called page, or you can include it on the parent page.

However, you already have the fancy box code in the parent page. All you need to do is call it appropriately, e.g. call this in your call back function after the images have been loaded:

$('a#single_image').fancybox({
    'transitionIn'    : 'elastic',
                'transitionOut'    : 'elastic',
    'titlePosition'    : 'over'
 
    });

[nicksull]

acoder you're a legend!

thank you very much!

learning new stuff (with a bit of help) is fun...

[acoder]

No problem, glad you got it working :)