Fancybox 不适用于 HTML/java 驱动的内容答案

【问题标题】：Fancybox not working with HTML/java Driven ContentFancybox 不适用于 HTML/java 驱动的内容
【发布时间】：2012-10-07 09:08:17
【问题描述】：

我有一个问题困扰了我大约 2 天，并且似乎在其他地方得到的响应很少。我正在将 XML 的字符串沿着数据运行到 AJAX 选项卡中。

然后使用 Javascript 来中断并仅在我想要的位置显示 XML 数据，然后我希望一些数据通过 Lightbox 出现，而不是通过“阅读更多”超链接出现在 AJAX 选项卡上。

一些数据正常显示，但灯箱根本无法正常工作，脚本已正确加载和链接，但我似乎无法弄清楚为什么它无法正常工作。每个灯箱都是通过脚本生成的，但没有灯箱或链接正常工作。

由于某些 Lightbox 的工作使用与 div 锚点类似的东西，因此它似乎改为锚定。

有关实时版本，请参阅：

http://universitycompare.com/university-guide/london-metropolitan-university/

或者，我所做的脚本如下：

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://universitycompare.com/wp-content/themes/blue-and-grey/XML/<?php echo the_field('university_xml_courses'); ?>",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='0'>");
var x=xmlDoc.getElementsByTagName("KISCOURSE");
for (i=0;i<x.length;i++)

  { 
  document.write("<tr id='CourseArea'><td><h3 id='CourseTitle'>");

  // TITLE
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</h3>");
  document.write("<p class='ForP'>-&nbsp;&nbsp;");
  document.write(x[i].getElementsByTagName("MODE")[0].childNodes[0].nodeValue); 
  document.write("</p><div class='clear'></div>");

  // UCAS CODE
  document.write("<p id='ucascode'>");
  document.write("<b>UCAS CODE</b>&nbsp;&nbsp;&nbsp;");
  document.write(x[i].getElementsByTagName("UCASCOURSEID")[0].childNodes[0].nodeValue);
  document.write("</p>"); 

  // READ MORE LIGHTBOX
  document.write("<img src='http://universitycompare.com/wp-content/themes/blue-and-grey/images/info-icon.png' width='15' style='margin:0px 2px 0px -4px;'>");
  document.write("<a id='various' href='#inline'>Read More</a>&nbsp;&nbsp;&nbsp;");

  // VISIT COURSE LINK
  document.write("<a class='courselink' href='");
  document.write(x[i].getElementsByTagName("CRSEURL")[0].childNodes[0].nodeValue);
  document.write("' target='_blank'>Visit course website</a>");
  document.write("</td></tr>");

  // LIGHTBOX INFO
  document.write("<div class='inline' style='display:none; width:500px; height:500px;'>"); 
  document.write(x[i].getElementsByTagName("CRSEURL")[0].childNodes[0].nodeValue); 
  document.write("</div>");
  }

document.write("</table>");

</script>

【问题讨论】：

标签： java html ajax fancybox

【解决方案1】：

据我所知，您正在将 fancybox 绑定到选择器 .various（带有 class="various" 的元素）：

$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

...但是您的内容中没有任何元素具有这样的 class 但是

<a id='various' href='#inline'>Read More</a>

也许你的意思是

<a class='various' href='#inline'>Read More</a>

其他建议：修复一些 html 语法不一致的问题，例如

您的<head> 开始标记丢失。
将所有脚本放在 <head> 或 <body> 部分中，但不要放在两者之间......这个：
```
<head>
.
</head>
<script> ....</script>
<body>
.
</body>
```
...不推荐

其他 javascript 错误可能会影响其他 jQuery 插件的行为。你的页面抛出这个 js 错误：

Timestamp: 06/10/2012 5:48:24 PM
Error: TypeError: $(this).get(0) is undefined
Source File: http://universitycompare.com/wp-content/themes/blue-and-grey/jquery.ticker.js
Line: 25

【讨论】：

开始进行这些更改，但仍然没有，这可能是一个问题，即它们全部生成的地方灯箱将无法工作，因为它们都将具有相同的 div id - 如果这有意义吗？我将如何制作它，以便它会为每个人重新生成一个新的 div'id？