By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,741 Members | 1,973 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,741 IT Pros & Developers. It's quick & easy.

getting a js fancybox script to work

P: 3
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
Expand|Select|Wrap|Line Numbers
  1. <script language="javascript">
  2.  
  3. function createRequestObject() {
  4. var req;
  5.  
  6. if(window.XMLHttpRequest){
  7. req = new XMLHttpRequest();
  8.  
  9. } else if(window.ActiveXObject) {
  10. req = new ActiveXObject("Microsoft.XMLHTTP");
  11.  
  12. } else {
  13. req = NULL;
  14. alert('Problem creating object hetXMLHttpRequest');
  15. }
  16. return req;
  17. }
  18. var http = createRequestObject();
  19.  
  20. function sendRequestSearch(iets) {
  21. http.open('get', 'ajaximage.php?search='+iets);
  22. http.onreadystatechange = handleResponseSearch;
  23. http.send(null);
  24. }
  25.  
  26. function handleResponseSearch() {
  27. if(http.readyState == 4 && http.status == 200){
  28. if(http.responseText) {
  29. document.getElementById("search_results").innerHTML = http.responseText;
  30.           } else {
  31.              document.getElementById("search_results").innerHTML = " &nbsp; ";
  32.           }
  33.        } else {
  34.           document.getElementById("search_results").innerHTML = " &nbsp; ";
  35.        }    }
  36. </script>
  37.  
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
Expand|Select|Wrap|Line Numbers
  1. <?php 
  2. require('includes/application_top.php');
  3. require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);
  4.  
  5. $id = $_GET['search'];
  6. $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 . "'");
  7. $options = tep_db_fetch_array($options_query);
  8.  
  9. if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
  10. {
  11. 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>";
  12. }
  13. if($options['products_options_values_thumbnail'] == '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'true')
  14. {
  15. echo TEXT_IMAGE_NOT_FOUND;
  16. }
  17. if($options['products_options_values_thumbnail'] != '' && OPTIONS_IMAGES_CLICK_ENLARGE == 'false')
  18. {
  19. echo "<img src=./images/options/".$options['products_options_values_thumbnail']." width=300>";
  20. }
  21. ?> 
  22. <?php require('includes/application_bottom.php'); ?>
  23.  
When the product info page is loaded I have an image already in the search_results div
Expand|Select|Wrap|Line Numbers
  1. <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
Expand|Select|Wrap|Line Numbers
  1. echo "<script type='text/javascript' src='./javascripts/jquery-1.3.2.min.js'></script>
  2. <script type='text/javascript' src='./fancybox/jquery.fancybox-1.3.1.pack.js'></script>
  3. <script type='text/javascript' src='./fancybox/jquery.easing-1.3.pack.js'></script>
  4. <link rel='stylesheet' href='./fancybox/jquery.fancybox-1.3.1.css' type='text/css' media='screen' />
  5. <script language='javascript'>
  6. $(document).ready(function() {
  7.  
  8.     /* This is basic - uses default settings */
  9.  
  10.     $('a#single_image').fancybox({
  11.     'transitionIn'    : 'elastic',
  12.                 'transitionOut'    : 'elastic',
  13.     'titlePosition'    : 'over'
  14.  
  15.     });
  16.  
  17.     /* Using custom settings */
  18.  
  19.     $('a#inline').fancybox({
  20.         'hideOnContentClick': true
  21.     });
  22.  
  23. });
  24. </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>";
  25.  
but still nothing happens, it just loads the image by itself in the page and doesn't zoom.

If I type ajaximage.php?search=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
Jul 19 '10 #1

✓ answered by 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:
Expand|Select|Wrap|Line Numbers
  1. $('a#single_image').fancybox({
  2.     'transitionIn'    : 'elastic',
  3.                 'transitionOut'    : 'elastic',
  4.     'titlePosition'    : 'over'
  5.  
  6.     });

Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Are you using this? Check the howto.
Jul 20 '10 #2

P: 3
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.
Jul 20 '10 #3

acoder
Expert Mod 15k+
P: 16,027
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:
Expand|Select|Wrap|Line Numbers
  1. $('a#single_image').fancybox({
  2.     'transitionIn'    : 'elastic',
  3.                 'transitionOut'    : 'elastic',
  4.     'titlePosition'    : 'over'
  5.  
  6.     });
Jul 21 '10 #4

P: 3
acoder you're a legend!

thank you very much!

learning new stuff (with a bit of help) is fun...
Jul 22 '10 #5

acoder
Expert Mod 15k+
P: 16,027
No problem, glad you got it working :)
Jul 22 '10 #6

Post your reply

Sign in to post your reply or Sign up for a free account.