javascriptjquerymovabletype

Is my jQuery .load bloacked by the CMS?


I am using prettyPhoto inside a Movable Type CMS page. To make it work I have to use a

<p>
    <mt:setvarblock name="html_head" append="1">
        JS scripts here
    </mt:include>
</p>

section. To make a gallery with 30-40 pictures, I have to add a block for each picture that looks something like this:

<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
    <img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>

I want to generate these entries from a csv file using a (python) script and put into a separate file on the web server. Then I use this code to load these entries into the page:

<div id="divTestArea1"></div>
<script type="text/javascript">
    $(function() {
        $("#divTestArea1").load("output_en.txt");
    });
</script>

When I load the page the thumbnails show up, but when I click them the pathtoimage.jpg is loaded instead of prettyphoto.

My question: Am I doing something wrong or is movable type blocking the execution for security reasons? How to debug this? I have firebug but no idea what to look for.

P.S: When pasting the entries directly into the page it works as expected.

Edit: full working code

<p>
    <mt:setvarblock name="html_head" append="1">
        <script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
        <script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    </mt:setvarblock> 
    <mt:include name="include/header.tmpl"> 
        <div id="divTestArea1"></div>
        <script type="text/javascript">
            $(function() {
                <!--$("#divTestArea1").load("../gallery/output_en.txt");-->
                $("#divTestArea1").load("../gallery/output_en.txt", function() {
                    $("a[rel^='prettyPhoto']").prettyPhoto();
                });
            });
        </script>

        <script type="text/javascript" charset="utf-8">// <![CDATA[
            $(document).ready(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
            });
        // ]]></script>
    </mt:include>
</p>

Solution

  • Try including the prettyPhoto() call after the AJAX has finished loading, because at the moment the plugin is being executed on page load, before the element it is targeting is available in the DOM.

     <script type="text/javascript">
       $(function() {
         $("#divTestArea1").load("../gallery/output_en.txt", function() {
             $("a[rel^='prettyPhoto']").prettyPhoto();
         });
       });
    </script>