如何使用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，而不是我传入的内容，警报正常。

problem is, fancybox is loading the anchor's href's html, not the html I pass in for content, which alerts properly.

发生什么？

推荐答案

不幸的是，在fancybox（v1.3.x）函数（这是一个设计问题）中使用 $（this），但是在任何其他jQuery方法中，所以尝试这个

Unfortunately you can't use $(this) inside the fancybox (v1.3.x) function (it's a design issue), but inside any other jQuery method so try this

$(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

这篇关于如何使用jquery .html（）作为fancybox内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！