TYPO3 7.6無燈箱擴展名

Question

我正在嘗試使其能工作於燈箱樣式的圖片彈出窗口，但沒有任何效果-所有擴展都無法使用。 typo3 config或whatelse似乎有問題。 EE“ Perfect Lightbox”-已安裝，已添加模板，在對映圖像復選框中已選中“單擊放大”和“ 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

今天也偶然發現了這個問題！

這將在您的ts設置中起作用：

# 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}"
}

您必須根據您的lightbox-plugin更改“ dataWrap”-屬性，給定的示例適用於fancybox。

（最初在這里找到： https : //forum.typo3.org/index.php/t/213375/ ）

Answer 2

從TYPO3 7開始，您可以使用CSC（css_styled_content）或FSC（fluid_styled_content）呈現頁面內容。 兩種擴展都使用不同的方法來呈現內容元素。 你用什么？

也許您查看的擴展僅增強/修改了其他渲染擴展？
您嘗試了哪些擴展？
您是否包括了他們的靜態模板？

如果您對所有這些都不滿意，則還可以使用任何javascript-gallery / -picture-viewer，並且幾乎不需要插入特殊標記，也不需要使用JS來初始化查看器：

在http://lokeshdhakar.com/projects/lightbox2/上可以找到一個示例燈箱庫，除了包含jquery和JS庫之外，您還需要在基於HTML標記的初始化中包含一些JS。 這個庫似乎可以在所有具有相同data-lightdata 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 3

代碼段中的鏈接仍在使用默認呈現方式來打開彈出窗口。

如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，您不需要任何擴展。