TYPO3 7.6 none 灯箱扩展有效

Question

我试图让它工作灯箱样式的图像弹出窗口，但没有任何效果 - 所有扩展都不起作用。 typo3 配置或其他问题似乎有问题。 E.e。 "Perfect Lightbox" - 已安装，已添加模板，已选中关联图像复选框 "click enlarge" 和 "lightbox"。但是没有任何反应。在浏览器控制台中没有 JS 错误，加载了 Perfect Lightbox 的 JS 文件。在页面源代码中，围绕图像的一段代码如下所示：

<a href="http://.../index.php?eID=tx_cms_showpic&amp;file=17&amp;md5=14b002d6aa25f9dd945e2a4e6c21ea4347298d11&amp;parameters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw&amp;parameters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi&amp;parameters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2&amp;parameters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D" onclick="openPic('http:\/\/...\/index.php?eID=tx_cms_showpic\u0026file=17\u0026md5=14b002d6aa25f9dd945e2a4e6c21ea4347298d11\u0026parameters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw\u0026parameters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi\u0026parameters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2\u0026parameters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D','thePicture','width=800,height=600,status=0,menubar=0'); return false;" target="thePicture">
  <img src="http://.../fileadmin/_processed_/csm_room_05_3bd2eeb267.jpg" width="150" height="112" alt="" />
</a>

没有任何类灯箱生成（应该有？）

Answer 1

从 TYPO3 7 开始，您可以使用 CSC (css_styled_content) 或 FSC (fluid_styled_content) 来呈现您的页面内容。这两个扩展使用不同的方法来呈现内容元素。你用什么？

也许您查看的扩展 enhances/modified 只是其他呈现扩展？
您尝试过哪些扩展程序？
您是否包含了他们的静态模板？

如果您对所有这些都不满意，您也可以使用任何 javascript-gallery/-picture-viewer 并且几乎不需要插入特殊标记和少量 JS 来初始化查看器：

在 http://lokeshdhakar.com/projects/lightbox2/ 上找到了一个示例灯箱库除了包含 jquery 和 JS 库之外，您还需要包含一些 JS 以及基于 HTML 标记的初始化。这个库似乎适用于所有具有相同数据属性的图像 data-lightbox:

设置选项：

lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
})

并且对于您的图像，请务必使用以下数据属性增强渲染效果，例如：

<a href="images/image-2.jpg" data-lightbox="my_lightbox">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="my_lightbox">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="my_lightbox">Image #4</a>

您可能会使在一个页面上提供多个灯箱或仅包括选定的图像变得更加复杂

Answer 2

您的代码段中的 Link 仍在使用默认呈现打开弹出窗口 window。

正如 Bernd 提到的，您可能忘记添加 静态模板 。

也许你可以尝试添加以下内容

# turn of the popup window
tt_content.image.20.1.imageLinkWrap.JSwindow = 0

# create a link to a bigger verion of the image
tt_content.image.20.1.imageLinkWrap.directImageLink = 1

如果 js 和 css 就位，那么它可能会起作用。

编辑：由于您使用 fluid_styled_content:

styles {
    content {
        textmedia {
            linkWrap.lightboxEnabled = 1
            linkWrap.lightboxCssClass = fluidbox
            linkWrap.lightboxRelAttribute >
        }
    }
}

根据您的需要修改 lightboxCssClass 和 lightboxRelAttribute。使用 JS 和 CSS，您不需要任何扩展。

Answer 3

今天也偶然发现了这个问题！

这将在您的 ts-setup 中工作：

# deactivate fsc popup, lightbox wrap
lib.fluidContent.settings.media.popup {
    directImageLink = 1
    JSwindow = 0
    linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lb{field:uid}"
}

您必须根据您的灯箱插件更改 "dataWrap"-属性，给定的示例适用于 fancybox。

（最初发现于此：https://forum.typo3.org/index.php/t/213375/）

TYPO3 7.6 none 灯箱扩展有效

TYPO3 7.6 none lightbox extensions work

javascript

jquery

typo3

lightbox

typo3-7.6.x