我的 jQuery .load 是否被 CMS 阻止了?
Is my jQuery .load bloacked by the CMS?
我在 Movable Type CMS 页面中使用 prettyPhoto。为了让它工作,我必须使用
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
节。要制作包含 30-40 张图片的画廊,我必须为每张看起来像这样的图片添加一个块:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
我想使用 (python) 脚本从 csv 文件生成这些条目,并将其放入 Web 服务器上的单独文件中。然后我使用此代码将这些条目加载到页面中:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
当我加载页面时,会显示缩略图,但当我单击它们时,会加载 pathtoimage.jpg 而不是漂亮的照片。
我的问题:是我做错了什么还是可移动类型出于安全原因阻止了执行?如何调试这个?我有 firebug 但不知道要找什么。
P.S:将条目直接粘贴到页面时,它按预期工作。
编辑:完整的工作代码
<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>
尝试在 AJAX 完成加载后包含 prettyPhoto() 调用,因为目前插件正在页面加载时执行,在 元素之前在 DOM.
中可以定位
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
我在 Movable Type CMS 页面中使用 prettyPhoto。为了让它工作,我必须使用
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
节。要制作包含 30-40 张图片的画廊,我必须为每张看起来像这样的图片添加一个块:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
我想使用 (python) 脚本从 csv 文件生成这些条目,并将其放入 Web 服务器上的单独文件中。然后我使用此代码将这些条目加载到页面中:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
当我加载页面时,会显示缩略图,但当我单击它们时,会加载 pathtoimage.jpg 而不是漂亮的照片。
我的问题:是我做错了什么还是可移动类型出于安全原因阻止了执行?如何调试这个?我有 firebug 但不知道要找什么。
P.S:将条目直接粘贴到页面时,它按预期工作。
编辑:完整的工作代码
<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>
尝试在 AJAX 完成加载后包含 prettyPhoto() 调用,因为目前插件正在页面加载时执行,在 元素之前在 DOM.
中可以定位 <script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>