We Keep Coding

TYPO3 7.6 none lightbox extensions work

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.
E.e. "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&file=17&md5=14b002d6aa25f9dd945e2a4e6c21ea4347298d11&parameters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw&parameters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi&parameters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2&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?)

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

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:
Image #2
Image #3
Image #4
you might make it more complex to have multiple lightboxes available on one page or to include only selected images

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.

Issue in making appear the div in the foreach loop

Here is my Fiddle
Where i have
<div id="mulitplefileuploader" class="fileuploader">Upload</div>
<div id="status"></div>
in the html. In the Body i have the script that was in the fiddle and i have $(".fileuploader").uploadFile(settings); in the document.ready. All this will have only on file upload div,
If i am using a for loop say 5 times. It is not working I mean the div itself not appearing. As the for loop may have any count i can run the div in the for loop. But I should not have the same script in my html page (Because of few restrictions).
What shall i do to achieve my result. Allowing multiple div according to the html.
I tried here in this fiddle but it didn't succeed. How can i do this.
Note : All the upload should work, the js don't know how many loop will appear in the html
Update To run the code Here is the chop and you shall try it here in the display at html mode.

#reply to your comment: alright i see. If you take a look into the source code of the plugin, it has the missing .each to iterate all the retrieved selectors. so you can simply add one for it
$(".fileuploader").each(function(){ $(this).uploadFile(settings); });
http://jsfiddle.net/L08p1upt/4/

Auto Swap External CSS Stylesheet with toggle scripting

Hi I am trying to get this script to toggle back to original CSS external stylesheet.
I have the following code that works.
$(document).ready(function() {
$("#css-master2").click(function() {
$("link[title=change]").attr({href : "css/master2.css"});
});
});
Whenever someone clicks on anything with id #css-master2 it changes the external style sheet to master2.css (that part works fine).
What I would like it do is change back to the original master1.css if they click on it again. Something like toggle?
Any help would be greatly appreciated.

Check for the link tag's href, if it equals master2, switch back to master1 like the same way above.
Can't think about why you'd do this, considering the exact thing can be done using css classes instead of two different files.

setting content between div tags using javascript

I'm trying to set some content in between some div tags on a JSP page using javascript.
currently the div tag on the JSP page looks like this:
<div id="successAndErrorMessages"></div>
I want to fill the content in those div tags using some javascript method so that it will look like so:
<div id="successAndErrorMessages"><div class="portlet-msg-error">This is an error message</div></div>
I know you can go like this:
document.getElementById("successAndErrorMessages").value="someContent";
But that just changes the value of the 'value' attribute. It doesn't fill in content between those div tags. Anyone out there that can point me in the right direction?

Try the following:
document.getElementById("successAndErrorMessages").innerHTML="someContent";
msdn link for detail : innerHTML Property

See Creating and modifying HTML at what used to be called the Web Standards Curriculum.
Use the createElement, createTextNode and appendChild methods.

If the number of your messages is limited then the following may help. I used jQuery for the following example, but it works with plain js too.
The innerHtml property did not work for me. So I experimented with ...
<div id=successAndErrorMessages-1>100% OK</div>
<div id=successAndErrorMessages-2>This is an error mssg!</div>
and toggled one of the two on/off ...
$("#successAndErrorMessages-1").css('display', 'none')
$("#successAndErrorMessages-2").css('display', '')
For some reason I had to fiddle around with the ordering before it worked in all types of browsers.

jQuery's load() doesn't display images

Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny

Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.

If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.