如何将jquery.html()用于fancybox内容
how to use jquery .html() for fancybox content
我的文件:
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
{% include "submission-form.html" with section="photos" %}
<div class="commentables">
{% load thumbnail %}
{% for story in objects %}
<div class="image {% if forloop.counter|add:"-1"|divisibleby:picsinrow %}left{% else %}{% if forloop.counter|divisibleby:picsinrow %}right{% else %}middle{% endif %}{% endif %}">
{% if story.image %}
{% thumbnail story.image size crop="center" as full_im %}
<a rel="gallery" href="{% url post slug=story.slug %}">
<img class="preview" {% if story.title %} alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}">
</a>
{% endthumbnail %}
{% else %}
{% if story.image_url %}
{% thumbnail story.image_url size crop="center" as full_im %}
<a rel="gallery" href="{% url post slug=story.slug %}">
<img class="preview" {% if story.title %} alt="{{ story.title }}" {% endif %} src="{{ full_im.url }}">
</a>
{% endthumbnail %}
{% endif %}
{% endif %}
</div>
</div>
<script>
$(document).ready(function(){
$(".image a").click(function(){
alert($(this).parent().html());
});
$(".image a").fancybox({
title: $(this).attr("alt"),
content: $(this).parent().html()
});
});
</script>
问题是,fancybox加载的是锚的href的html,而不是我为内容传递的html,这会正确地发出警报。
怎么了?
不幸的是,你不能在fancybox(v1.3.x)函数中使用$(this)
(这是一个设计问题),但在任何其他jQuery方法中都不能使用,所以试试这个
$(document).ready(function(){
$(".image a").bind("click",function (){
var data = $(this).parent().html();
var dataTitle = $(this).attr("alt");
function newTitle(){return "<span>"+dataTitle+"</span>";}
$.fancybox(data,{
"titlePosition": "inside",
"titleFormat": newTitle
}); // fancybox
return false;
}); // bind
}); //ready
我认为这个会起作用:
$(".image a").click(function (){
$.fancybox($(this).parent().html(),{
title: $(this).attr("alt")
});
});
相关文章:
- 将函数的上下文应用于javascript变量
- keyup事件处理程序更改焦点不适用于快速键入
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- PHP中的setcookie仅适用于localhost
- 包括用于facebook评论框的JavaScript SDK
- Fancybox是否将Click事件静音
- 如何检测用于WebGL的专用或集成显卡
- ng更改事件不适用于Dropdown
- 用于搜索的聚合物嵌套绑定
- jQuery表单添加不适用于下拉列表
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- JS编译器/包管理器,用于版本控制
- 将CSS应用于printWindow.print();在Javascript中
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 用于'魔术串'属性
- 用于检查数组中是否存在元素的javascript自定义方法
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 用于Soundcloud曲目的jQuery fancyBox
- 如何将jquery.html()用于fancybox内容