Home/ Questions/Q 4595752
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T23:01:02+00:00

I’m making a small website using ajax, mainly by curiosity. I wan’t to use

  • 0

I’m making a small website using ajax, mainly by curiosity.

I wan’t to use Fancybox to display images in an ajax content.

The thing I’m currently doing is very simple, I have a main html page, and hyperlinks just change the content of a single div… for example :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="js/ajax.js"></script>

    <link rel="stylesheet" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  </head>

  <body>

    <div>
      <a href="javascript:void(0)" onclick="xml_doc('ajax', 'ajax.html')"> test </a>
    </div>

    <div id="ajax">
    </div>

  </body>

</html>

and the basic js code :

function xml_obj()
{
    var xmlhttp;

    // IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest)
    return new XMLHttpRequest();

    // IE6, IE5
    else
    return new ActiveXObject("Microsoft.XMLHTTP");
}

function xml_cfunc(div, xmlhttp)
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    div.innerHTML=xmlhttp.responseText;
}

function xml_doc(id, url)
{
    var xmlhttp = xml_obj();
    var div = document.getElementById(id);

    xmlhttp.onreadystatechange = function()
    {
    xml_cfunc(div, xmlhttp);
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

the content of the ajax.html would be a single href for example :

<a id="single_image" href="image.png"><img src="thumb.png" alt=""/></a>

Now i have to put the fancybox call somewhere :

$('a#single_image').fancybox();

But I just can’t find out where… If I put it in the html content it won’t be evaluated.

So when I click on the thumbnail, it will just send me to the full size image (with Uncaught TypeError: Cannot call method ‘appendChild’ of undefined, and Resource interpreted as document but transferred with MIME type image/png.).

All my research ended up on an opposite problem (call ajax content within fancybox).

Now my questions are:

  • Is this a correct way to use ajax?
  • How can I do so the ajax content can contain Fancybox links?

Thanks much,
Pierre-Luc

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Got it working by starting fancybox directly in the ajax callback :

    function xml_cfunc(div, xmlhttp)
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    div.innerHTML=xmlhttp.responseText;
    $("a#single_image").fancybox();
    }
}

    The drawback is that it will be proceed in each of ajax calls, but this certainly can be changed. The important is that the javascript has to be evaluated once the DOM is ready.

    Note that I know use JQuery.ajax, but the result is the same, for example :

    $.get(url,
  function(data) {
      $('#content_id').html(data);
      $("a#single_image").fancybox();
  });
    • 0