TYPO3 7.6 none lightbox extensions work

Question

I'm trying to make it work lightbox-style image popups, but nothing - all of the extensions do not work. Seems something wrong with typo3 config or whatelse. Ee "Perfect Lightbox" - installed, template added, in contect images checkboxes "click enlarge" and "lightbox" checked. But nothing happens. In browser console no JS errors, JS files for Perfect Lightbox loaded. In the page source a piece of code around image looks like:

<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>

No any classes of lightbox generated (should be there?)

Answer 1

Just stumbled upon this Problem today, too!

This will work in your 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}"
}

You have to change the "dataWrap"-Attributes according to your lightbox-plugin, the given example works for fancybox.

( Originally found here: https://forum.typo3.org/index.php/t/213375/ )

Answer 2

as of TYPO3 7 you can use CSC (css_styled_content) or FSC (fluid_styled_content) to render your pagecontent. both extensions use different approaches for rendering of content elements. What do you use?

maybe the extensions you looked at enhances/modified only the other rendering extension?
What extensions have you tried yet?
Have you included their static template?

If you are unsatisfied with all of them you can also use any javascript-gallery/-picture-viewer and mostly needs little to insert special markup and little JS to initialize the viewer:

one example lightbox library found on http://lokeshdhakar.com/projects/lightbox2/ aside of inclusion of jquery and the JS-library, you need to include some JS with the initialization based on your HTML-markup. This library seems to work on all images with the same data-attribute data-lightbox :

set option:

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

and for your images be sure to enhance the renderung with the following data-attribute like:

<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>

you might make it more complex to have multiple lightboxes available on one page or to include only selected images

Answer 3

The Link is in your code snippet is still using the default rendering to open a popup window.

As Bernd mentioned, you might have forgotten to add the static template .

maybe you can try to add the following

# 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

If the js and css are in place it might maybe work then.

---

EDIT: Since your using fluid_styled_content :

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

Modify lightboxCssClass and lightboxRelAttribute to your needs. With JS and CSS in place you don't need any Extension.