javascript - Plone 的标题图片来源？

Question

我使用其中一个 jQuery 库，Fancybox , 使图像显示在文本顶部的模态弹出式样式中。然而，这对大多数情况都适用!当在 TinyMCE 中放置图像并选择“标题”然后将图像设为链接时，Plone 生成的代码最终有两个相同的链接，这导致同一图像的奇怪“Fancybox gallery slideshow”重复两次。这就是为什么 —

TinyMCE 中的 HTML:

<p><a class="internal-link" href="resolveuid/af2954f5af084d5aa359a480b33c5368" target="_self" title="Test test test"><img class="image-left captioned" src="resolveuid/af2954f5af084d5aa359a480b33c5368/@@images/image/med" /></a>

查看页面时生成的 HTML:

<dl class="image-left captioned" style="width:300px;">
<dt>
<a class="internal-link" target="_self" href="http://127.0.0.1:8081/CAES/images/alison-king.jpg" title="Test test test" rel="gallery"><img width="300" height="200" title="alison king" alt="alison king" src="http://127.0.0.1:8081/CAES/images/alison-king.jpg/@@images/98443898-0834-45ea-b724-8f40a0c92e0c.jpeg"></a>
</dt>
<a class="internal-link" target="_self" href="http://127.0.0.1:8081/CAES/images/alison-king.jpg" title="Test test test" rel="gallery"><dd class="image-caption" style="width:300px;">test</dd>

我明白为什么会发生这种情况，这很聪明，但对我的目的不起作用。有谁知道这段代码是在ZMI的什么地方生成的？或者，关于针对除第二个链接之外的所有链接的 jQuery 解决方案的任何想法？这是我现有的 Fancybox 代码:

<script type="text/javascript">
  $(document).ready(function() {
    /* Simple image gallery. Uses default settings */
    $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
  });
</script>

它将与下面的代码一起工作，但它只会将 Fancybox 应用于带标题图像的第一个图像链接，而不会应用于任何其他非带标题图像。

<script type="text/javascript">
  $(document).ready(function() {
    $("dl.captioned dt a").attr('rel', 'gallery').fancybox();
  });
</script>

最后，我尝试将 Fancybox 应用于所有内容，然后将其从第二个 dl.captioned 链接中删除，但无法完全理解，这仍然是结果:

<script type="text/javascript">
  $(document).ready(function() {
    $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif'],a[href$='/image']").attr('rel', 'gallery'); 
    $("dl.captioned > a").attr('rel', '');
    $("a[rel$='gallery']").fancybox();
  });
</script>

谢谢!

Answer 1

我无法完全重现您获得的输出，但可以重现图库中的双图像。

双倍的结果，因为当您启用字幕时，插入的图像将自动包装在指向图像文件的链接中(另一个 JS，假设由 TinyMCE 应用)。

因此，为了解决您的请求，无论如何使用字幕时，只要不手动将图像标记为链接就足够了。

注意:因为您正在使用 <script> -tag，看起来你将 JS 插入到模板中，但建议通过 JS 注册将其作为链接嵌入到标题中，特别是如果你希望它在全局范围内发生。或者在注册中添加一个表达式属性，以限制何时传递脚本。如果你有特殊原因只能在某个模板中使用它，建议使用 javascript-slot。通过 <script> 插入 JS - 标记在文档底部以便在加载 DOM 后执行它，不再需要，分别不鼓励，我们可以使用 document.ready(或 window.onload)代替。

我复制的步骤:创建一个站点，通过 TinyMCE 的控制面板启用字幕，安装 collective.fancybox，安装我自己的带有注册 Javascript 的产品并插入:

(function($) {
    $(document).ready(function() {
        // Look for all links in content-area, 
        // add rel-attribute to make it a gallery.
        // Skipped distinction of whether it's an image or not, 'cause I'm
        // louzy lazy and you know how to DIY anyway ;)
        $("#content-core a").attr('rel', 'gallery').fancybox();
    });
})(jQuery);