Home/ Questions/Q 6933999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:54:15+00:00

i shall state my problem here.. I have an index.html page which has a

  • 0

i shall state my problem here.. I have an index.html page which has a prettyPhoto.js script in it. i have some menu links on my index.html. say one of these is “video gallery” now i load video gallery through Ajax and it loads fine. but the problem is i cannot get prettyPhoto.js to work in the external loaded file. Does anyone know how to do this?

Index.html looks like this (please note i have removed unnecessary code to make it readable)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>The Footy Lounge</title>
    <!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>           <script type="text/javascript" language="javascript">
            function loadXMLDoc(url,containerid){
                var xmlhttp;
                    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                    xmlhttp.onreadystatechange=function(){
                      if (xmlhttp.readyState==4 && xmlhttp.status==200|| window.location.href.indexOf("http")==-1)
                        {
                        document.getElementById(containerid).innerHTML=xmlhttp.responseText;
                        }
                      }
                xmlhttp.open('GET',url,true);
                xmlhttp.send();
            }

            </script>
           <!-- End Scripts -->
           <!--Stylesheets-->
           <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
           <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
           <link rel="stylesheet" href="css/articles.css" type="text/css" media="all" />
    <!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]-->
    <!-- End Stylesheets-->
</head>
<body>
<div id="navigation">
            <div class="cl">&nbsp;</div>
          <p align="right"><ul>
              <li><a href="#">news &amp; events</a></li>
              <li><a href="#">photo gallery</a></li>
              <li><a href="javascript:loadXMLDoc('ajaxfiles/video_gallery.html','mainPage')">video gallery</a></li>
              <li><a href="#">community</a></li>
              <li><a href="#">schedules</a></li>
          </ul></p>
</div>
<div id="mainPage">
</div> 
<!-- this is required for prettyPhoto to work -->
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
</body>

video_gallery.html looks like this

<!-- tried adding this, didn't work -->
<!-- <script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script> -->
<div class="article-box">
<a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
</div>
<!-- I tried adding this, it didnt work -->
<!-- <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script> -->

I am obviously doing something wrong here. And i can’t find any answers on Google because i don’t have a clue as to what to search for. i tried searching for “loading JavaScript in ajax page” and all the possible variants i could think of.

EDIT:
Ok i got it working. thanks to the people who answered.
here is code.

<script type="text/javascript" language="javascript">
   $(document).ready(function(){
    $("#video_gallery").click(function(){
      $("#mainPage").load('ajaxfiles/video_gallery.html',function (text, statusText){
        if (statusText === "success")
              {
           $("a[rel^='prettyPhoto']").prettyPhoto();
            <!-- target.find("a[rel^='prettyPhoto']").prettyPhoto(); --> //this didnt work for me so i used the above one. firebug gave me some error about target.find
               }
        });
    });
});
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As haynar mentioned, the content is loaded after prettyPhoto has been initialised. To work around this problem, you need to call the prettyPhoto initialisation function after loading the new content.

    To make your life a whole lot easier (and your code a whole lot neater), change your loadXMLDoc function to take advantage of jQuery’s built-in AJAX utilities, namely load():

    function loadContent (url, container) {  // remember, you're not loading XML
    var target = $(container);
    target.load(url, function (text, statusText) {
        if (statusText === "success") {
            target.find("a[rel^='prettyPhoto']").prettyPhoto();
        }
    });
}

    load automatically inserts the HTML into the container for you, and the callback function in the code runs and initializes prettyPhoto for any new elements that have been added to the document.

    Don’t forget to change references to loadXMLDoc to loadContent, the latter is a better name since you’re not actually loading an XML document.

    • 0