Question

我使用其中一个jQuery库Fancybox，使图像以文本顶部的模式弹出式方式显示。但是，这适用于大多数情况！当在TinyMCE中放置图像并选择“标题”然后使图像成为链接时，代码Plone生成最终具有两个相同的链接，这导致相同图像重复两次的奇怪的“Fancybox图库幻灯片放映”。这就是为什么 -

来自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应用于所有内容，然后将其从jQuery的第二个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应用）。

因此，要解决您的请求，在使用字幕时，不要手动将图像标记为链接。

Nota：当您使用<script> - 标签时，似乎您在模板中插入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);

Plone的标题图片来源？

1 个答案: