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.

Angular JS - Image Maps and filters

I took a bit of a break from learning Angular for a while, and I'm jumping back in and am having something of an issue controlling an image map.
Basically, I've got a map with a bunch of weirdly shaped areas, and I want the mouse rollover to control a filter in an earlier ngRepeat - I know that I can set ng-mouseEnter on standard divs to change the value of a model and update my data in real time, but I have no idea how to get that working inside a map as ng-mouseEnter won't work with standard image maps.
My thought was, I set a really simple inline script function like this:
function showThis(thing) {
return thing;
}
and have my onMouseEnter part of the image map update that function, then reference that in my filter. A quick example of what I was thinking of in code (with one of my image map areas copy-pasted, to show that it would be kind of difficult to just make invisible divs) -
...
<script>
function showThis(thing) {
console.log(thing);
return thing;
};
</script>
<div class="foobars" ng-repeat="foo in fooBar | filter:showThis():true">
<p class="foo_text">{{foo.snippet}}</p>
<img ng-src="{{foo.imagePath}}">
</div>
<div class="images">
<img src="images/map/base.png" usemap="#imagemap">
<map name='imagemap'>
<area shape='poly' alt='Area One' href='' coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296' onMouseEnter='showThis(1)'/>
<area shape='poly' alt='Area Two' href='' coords='245,170,186,194,144,176,149,136,212,110,252,123' onMouseEnter='showThis(2)' />
</map>
</div>
But that doesn't work, and I can't work out how to get the idea running. I'm clearly missing something obvious, but I don't know what - I know I could create a custom filter in the controller, but I still don't know how to associate the image map's "onMouseOver" with the filters inside the controller. Angular and this particular feature of imagemaps don't seem to work too well together to my lame eyes.
I made a plunkr here to show my broken-ass code. Where am I going wrong?

I forked your plunker after making some changes that, I think, solve the problem you were trying to solve...
What #wZVanG says is correct, regarding the use of ng-mouseenter.
Additionally, I wasn't quite sure what your plan was with showThis and your second ng-repeat, so I added a function, setSnippet that is called on mouse enter and then display the correct snippet under the image through a simple div.
Hope that helps.

Use ng-mouseenter instead onMouseEnter, add # in href attribute of area element to avoid reload the page:
<area shape='poly' alt='Area One' href='#' ng-mouseenter='showThis(1)'
coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296'/>

how to autostart nanoGallery from a link

I know this has been asked before but the answers given did not work for me and my scenario is in any case slightly different.
I am just starting to evaluate nanoGallery, which looks good for my requirement which is to run a slideshow of inline image references. But I simply want to run the slideshow from a link rather than having to display a set of thumbnails and then clicking/tapping on one to actually start the slideshow. Which doesn't seem to me to be a particularly unusual requirement, especially for a very large slideshow where the set of thumbnails would occupy far too much space on the screen.
My HTML is simply:
<a id="startlink" href="javascript:void(0)" style="margin-bottom: 40px;">run slide show</a>
<div id="nanoGallery">
<a id="first" href=... data-ngdesc=... />
...
So I have tried:
$(document).ready(function () {
$("#startlink").click(function (e) {
$("#nanoGallery").nanoGallery({
slideshowAutoStart: true,
...
});
$("#first").trigger("click");
});
});
I have tried various alternatives, including placing the script block at the end of body rather than in head, simply doing click() rather than trigger("click"), referencing $("#nanoGallery").children()[0] rather than $("#first"), and so on. I have even tried the createEvent/dispatchEvent approach as suggested elsewhere. But all I ever get is the row of (in my case empty as I have not supplied thumbnail images) thumbnail blocks which I still have to click on to start the slideshow. So it is possible that nanoGallery uses a different event or events rather than click? Has anyone actually got this to work with nanoGallery?
I have also seen a suggestion to use 'deep linking' using a hash value in the URL to identify the gallery/album in question, but I have no idea how to generate or determine this value and it may be that this only works with an online image repository such as Picasa.
Jon

Fade in, fade out div with images and text (with jquery)

What I'm trying to do is allow the user to click on a photographer's photo on the portfolioMain page; this will then take them to information about the photographer. When they're done there, they can then click "back," which will then take them back to the portfolioMain.
It use to work perfectly fine but I messed up somewhere in the script or html. So now when I click back, the photographer's information still shows and does not fadeout. Can anyone see what I could I have possibly done wrong?

It seems to be because you have not initialised the document state correctly at the beginning. Otherwise, your code seems to work fine (at least with jQuery 1.6.4).
Here is the working jsFiddle, with the "quick hack" of calling the back link functionality at the start of $(document).ready() to set the state correctly: http://jsfiddle.net/RFra9/1/
Obviously, the way it 'flashes' is not ideal, so you will want to ensure the HTML gets rendered initially with the right elements hidden (set their style attribute to display: none;), and then remove the $(document).ready() call to backToMain().
Does that make sense? Let me know if not.
Oh, and while you are there - technically, <br> should be <br />, and all <img> tags should be self-closing as well (<img ... />) - the one for Vanessa isn't.
EDIT: Okay, after having looked at the page, aside from all the broken image paths (most due to the missing . in the filename), I think the problem with the .portfolioDetail:visible div not fading out correctly is due to your use of floats. Now, I'm no float expert, but I did get the desired behaviour by adding <div style="clear: both;"> to the end of each portfolioDetail div, e.g:
<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn">
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p>
<p>www.williamchik.com</p>
<br>
<p>Back</p>
</div>
<div style="clear:both;"></div> /* here */
</div>
I'm not sure which CSS framework you are using, as there might be a way to make sure the float is cleared with a special class or something, but adding the div manually (as well as re-binding the $(',back') functionality, I'm not sure why that didn't work with my changes) did fix it for me.
Does that help at all? Try fixing the image paths and add the clearing div on the test site you linked to, and I'll have a look if it still doesn't work.

You should wrap your JavaScript code in:
$(document).ready(function(){
// your code
});

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.