.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ===================== EXT: Perfect Lightbox ===================== :Author: --- --- :Created: 2007-09-13T14:14:03 :Changed: 2011-01-30T16:21:18.780000000 :Author: Benjamin Niediek :Email: typo3@channel-eight.de :Info 3: :Info 4: g .. _EXT-Perfect-Lightbox: EXT: Perfect Lightbox ===================== Extension Key: **perfectlightbox** Copyright 2000-2007, Benjamin Niediek, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from www.TYPO3.com .. _Table-of-Contents: Table of Contents ----------------- **EXT: Perfect Lightbox 1** **Introduction 1** What does it do? 1 Screenshots 2 **Users manual 6** Localization 6 Integration into tt\_news 7 **FAQ 7** Lightbox doesn't work at all. What's wrong? 7 How can i use individual captions for every image? 7 Are there any keyboard-shortcuts? 8 Can i change the images used in the lightbox? 8 I'm already using prototype/scriptaculous, mootools or jquery on my site. I don't want them included double! 8 After installing the extension my headerData is gone/corrupted. What's wrong? 8 Mootools, Protaculous or Jquery? Which should i choose? 8 I'm using dam\_ttnews. Captionsplit does't work!? 8 I set “forceFirstImageIsPreview” in tt\_news. With perfectlightbox installed the ONLY image in the news-record is displayed again!? 8 The javascripts and the css-files arent't included in my header at all!? 8 **Adminstration 9** Access 9 **Configuration 9** Reference 9 **Tutorial 11** Using the lightbox with TS-Objects 11 Adding a watermark to the lightbox-images 11 Optimising loading time 12 **Known problems 12** **To-Do list 12** **Changelog 12** **Credits 14** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ This extension provides the popular Lightbox2 written by Lokesh Dhakar ( `http://www.huddletogether.com `_ ) AND the Mootools/Jquery variants Slimbox/Slimbox2(Christophe Beyls, `http://www.digitalia.be `_ ) for displaying images in TYPO3. It features the effect for single images as well as imagesets and has an additional presentation mode and a slideshow integrated. NO XCLASS, only typoscript used for the configuration. VALID html-source. FLEXIBLE usage. Constants can be set to use perfectlightbox globally, to add a link for saving the image and various other options to change the visual appearance of the lightbox. You can simply switch back and to a mootools/slimbox or prototype/scriptaculous/lightbox version. As simple as setting a constant in your TS! As of Version 3.0 you can now also have jquery/slimbox2! Have fun! The three scripts behave identically and are feeded with the same configuration vars. Due to the different implementations of effects with jquery/mootools/protaculous there are small differences in the output and css but few enough to provide a shared css-file for all three of them. So WHY ANOTHER lightbox extension, you ask? Well, there are already kj\_imagelightbox2 and pmkslimbox which in general do the same thing, BUT there's a problem with both of them.kj\_imagelightbox2 does XCLASS inclusion and the generated html-source is not valid.pmkslimbox is based on mootools (which is a good thing as i know now:-) but does only allow to enable it globally as an exchange for the classic popup- window. **UPDATE:** Well, right now I think even mootools can't compare to jquery and if I ever use this extension myself the first thing i'll do is to turn jquery on... In conclusion, perfectlightbox is a highly flexible and fancy popup- replacement which is easy to use, clean and which generates a 100% valid html-souce... NOTE:As of Version 3.0.0 I use YUI-compressed scripts to drop the size of the JS-frameworks to a reasonable amount. Only Scriptaculous isn't compressed because, well... it's a pain to do. It's just poorly written in my opinion and I don't have the time to work around that. .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-1| 1:A normal content-element with a few images ready to be opened in a lightbox/slimbox. |img-2| 2:The above screenshot shows an image in activated lightbox, imageset enabled, next-link active. |img-3| 3:This shows an image in activated lightbox-imageset, presentation mode enabled, saving allowed. |img-4| 4:This one shows the lightbox with some more options (overlay-opacity reduced to 50%, imageset + presentation mode active, saving allowed, slideshow enabled (paused)). |img-5| 5:Here the additional checkboxes for the lightbox-activation in the backend are shown. .. _Users-manual: Users manual ------------ Getting started is REALLY easy...Just import and install the extension via the Extension Manager, enable the static template “Perfect Lightbox” in your main TS-Template and everything is ready. Now, if you want to enable the lightbox for your images, go to your content-element and tick “Click-enlarge” AND “Lightbox”.If you want to additionally enable an imageset (given that your content-element has more than one image inside it) also enable “Imageset”.Finally, if you would like to activate the presentation mode and/or a slideshow, tick them and you're done! For finetuning of the appearance of the lightbox and max-image-sizes see the configuration-section. There are a bunch of constants you can edit! Furthermore you can specify your own css-file there for additional control over the visuals. UPDATE: Since Version 2.0.0 you can also enable lightbox/slimbox globally. See configuration section. NOTE:If any links are set for the images the lightbox is turned off and the standard behaviour (popup for the other images) is reactivated. That's because in my opinion links should take precedence over anything else.So remember: you want a lightbox – no links should be set! .. _Localization: Localization ^^^^^^^^^^^^ The original lightbox.js script was modified to allow localization of the “Image X of X” text shown in imagesets. Translation is done in EXT:perfectlightbox/locallang.xml. For now only english and german translations are provided.If you would like to share values for other languages in new releases just email me. UPDATE: Since Version 2.0.0 ALL images are specified in EXT:perfectlightbox/res/css/slightbox.css. For localization of the images do the following: For a start, in EXT:perfectlightbox:res/img/ there are images named xxxlabel.gif. These are images with english texts printed on them. To use them instead of the “neutral” ones enabled by default make a copy of slightbox.css and put it in your fileadmin-folder. Change the paths to the images in there (Don't forget to define width/height also! See comments). Then go to the constant-editor and set “cssPath” to point to your newly created css-file. After that something similar to this should be shown in your TS-Constants: :: plugin.perfectlightbox.cssPath = fileadmin/css/my-english-slightbox.css Clear the cache and reload, open an image in the lightbox and see for yourself. To use “german” images you have to create them, put them somewhere in your fileadmin-folder, create a new css-file named (for example) “my-german-slightbox.css” and link to your new german images in there. Then change your constant to: :: plugin.perfectlightbox.cssPath = fileadmin/css/my-german-slightbox.css Voila!You got your “german” perfect lightbox. That way you can define own css-files for each language.For example, if your site is english/german with english as the standard language the following lines are one possible solution for the localization of the slimbox: :: ###Language Configuration config.linkVars = L #English, sys_language.uid = 0 config.sys_language_uid = 0 config.language = en config.locale_all = en_EN page.includeCSS.file8 = fileadmin/css/my-english-slightbox.css #German, sys_language.uid = 1 [globalVar = GP:L=1] config.sys_language_uid = 1 config.language = de config.locale_all = de_DE page.includeCSS.file8 = fileadmin/css/my-german-slightbox.css [global] The same way you can set language-specific css/images for everylanguage via global vars. Easy! .. _Integration-into-tt-news: Integration into tt\_news ^^^^^^^^^^^^^^^^^^^^^^^^^ Since Version 2.0.1 you can enable perfectlightbox for tt\_news. Simply go to the Constant-Editor and set your preferred integration.At this point all you can do is enable/disable tt\_news-integration for each view of tt\_news (SINGLE, LIST, LATEST). If more than one image is present in the active view the images are automatically opened as an imageset. Presentation mode and slideshow are disabled for tt\_news (as it makes no sense in my opinion...). .. _FAQ: FAQ --- .. _Lightbox-doesn-t-work-at-all-What-s-wrong: Lightbox doesn't work at all. What's wrong? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Check if extension is installed, static template is added and make sure javascript is enabled in your browser.Go to your content-element and verify that no links are set and at least the following options are activated: |img-6| .. _How-can-i-use-individual-captions-for-every-image: How can i use individual captions for every image? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ First of all you have to decide which field to use for the caption. The choices are: titleText, altText or imagecaption (the default is imagecaption, see the Configuration section). Each of this fields is splitted by linebreak so if you want individual captions do sth. like this: |img-7| .. _Are-there-any-keyboard-shortcuts: Are there any keyboard-shortcuts? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Yes, the original lightbox script featured the keys “p” and “n” (or the arrow-keys) for previous/next image and “c”, “x” or “Escape” to close the lightbox.I added the “s” to toggle slideshow on/off. .. _Can-i-change-the-images-used-in-the-lightbox: Can i change the images used in the lightbox? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Yes, of course! Easily done via css. See the users manual (localization). .. _I-m-already-using-prototype-scriptaculous-mootools-or-jquery-on-my-site-I-don-t-want-them-included-double: I'm already using prototype/scriptaculous, mootools or jquery on my site. I don't want them included double! ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Go to the constant editor an set “Use included Javascript Librarys?” to 0. .. _After-installing-the-extension-my-headerData-is-gone-corrupted-What-s-wrong: After installing the extension my headerData is gone/corrupted. What's wrong? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Perfect Lightbox2 uses “page.headerData.1337” for including its files/vars. If you are already using this for your own configuration, you need to change your values. Or, if you're feeling adventurous, edit/overwrite “setup.txt” in EXT:static/. .. _Mootools-Protaculous-or-Jquery-Which-should-i-choose: Mootools, Protaculous or Jquery? Which should i choose? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If no special need is given to choose one particular option i would go for jquery. It's better code and i \*believe\* that the transitions are a bit smoother...Well, as you can switch between the variants in a blink try them all and then you'll know... .. _I-m-using-dam-ttnews-Captionsplit-does-t-work: I'm using dam\_ttnews. Captionsplit does't work!? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ UPDATE: The author of dam\_ttnews did update his extension! It should all work properly now.That's because dam\_ttnews also uses user\_imageMarkerFunc to extend the functionality of image-processing in tt\_news. If dam\_ttnews is loaded, perfectlightbox is configured to NOT include its userFunc for caption-splitting. I did write the author of dam\_ttnews to add the necessary lines to his code to make it work together with perfectlightbox. **NOTE: If anybody could verirfy this for Version 3.0 i'd be grateful!** .. _I-set-forceFirstImageIsPreview-in-tt-news-With-perfectlightbox-installed-the-ONLY-image-in-the-news-record-is-displayed-again: I set “forceFirstImageIsPreview” in tt\_news. With perfectlightbox installed the ONLY image in the news-record is displayed again!? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Fixed since Since Version 2.2.4! .. _The-javascripts-and-the-css-files-arent-t-included-in-my-header-at-all: The javascripts and the css-files arent't included in my header at all!? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Very likely you're using another PAGE-object for your site. So page.headerData.1337 isn't referenced.Just copy page.headerData.1337 to your PAGE-objects headerData. If you want to use the new option “bodyScripts” you have to adapt your settings accordingly. EXAMPLE: :: seite = PAGE seite.headerData.1337 < page.headerData.1337 ### For bodyScripts #seite.1337 < page.1337 .. _Adminstration: Adminstration ------------- The extension brings all JS-Librarys needed for the lightbox to work. The included libraries are Prototype 1.6.1/Scriptaculous 1.8.3 (only effects.js&builder.js loaded), Mootools1.2.4 and Jquery 1.4.2.They are included via the static template and are using “page.headerData.1337” to be rendered. If you are having trouble with the newly introduced yui-compressed javascripts you can easily switch back to the uncompressed ones. Change constants to: :: plugin.perfectlightbox.prototypePath = EXT:perfectlightbox/res/js/prototype.1.6.1.js plugin.perfectlightbox.lightboxPath = EXT:perfectlightbox/res/js/lightbox.2.0.4.js plugin.perfectlightbox.mootoolsPath = EXT:perfectlightbox/res/js/mootools.core.1.2.4.js plugin.perfectlightbox.slimboxPath = EXT:perfectlightbox/res/js/slimbox.1.7.1.js plugin.perfectlightbox.jqueryPath = EXT:perfectlightbox/res/js/jquery.1.4.2.js plugin.perfectlightbox.slimbox2Path = EXT:perfectlightbox/res/js/slimbox.2.0.4.js Of course you can use your own versions of the libraries (if you need the “more” mootools1.2.4 for example). This is again done by editing the constants and specifying your files there. For the modified link-configuration there have been overridden some settings of “tt\_content.image.20.1”. If you already messed around with this object you may have to look at “setup.txt” in EXT:perfectlightbox:static/ for the changes made. As of version 1.2.0 there is a small userfunc for additional link- processing included. This function adds the “rel”-attribute to the links to activate the lightbox and it shouldn't interfere with anything else. Just an info. .. _Access: Access ^^^^^^ The four new fields for the image-configuration are exclude-fields. So, to enable them for backend-usergroups you have to select them under “Allowed excludefields:“ in the usergroup-sheet. .. _Configuration: Configuration ------------- There are a bunch of options that can be configured via the constant- editor.Localization is possible by editing “locallang.xml” in the extension folder. NOTE:If you are using your own versions of any of the provided JS- frameworks make sure they are compatible with the respective lightbox- scripts. The included libraries are Prototype 1.6.1/Scriptaculous 1.8.3 (only effects.js&builder.js loaded), Mootools1.2.4 and Jquery 1.4.2.Although the original lightbox/slimbox scripts were heavily modified to allow the added options and localization they do not introduce any more dependencies to prototype/scriptaculous/mootools /jquery-functions. If you need to put lightbox/slimbox.js in your fileadmin-folder make sure to make exact copies from EXT:perfectlightbox:res/js/. .. _Reference: Reference ^^^^^^^^^ plugin.perfectlightbox properties: TS Constants .. ### BEGIN~OF~TABLE ### .. _libraryToUse: libraryToUse """""""""""" .. container:: table-row Constant libraryToUse Data Type string Description This should be set to either "mootools","protaculous" or “jquery”. In case of “mootools” the slimbox-script + its necessary libraries are included , in case of “protaculous” the lightbox-script + its necessary libraries are included. For “jquery” it's slimbox2 and the Jquery-Library. Default protaculous .. _includeJSLibrarys: includeJSLibrarys """"""""""""""""" .. container:: table-row Constant includeJSLibrarys Data Type boolean Description Use included Javascript Librarys? You can set this to off when you are already using prototype and scriptaculous globally. Default 1 .. _bodyScripts: bodyScripts """"""""""" .. container:: table-row Constant bodyScripts Data Type boolean Description Put JS in ?: You can set this to put all the needed scripts&css in the document's body (experimental). Default 0 .. _enableGlobally: enableGlobally """""""""""""" .. container:: table-row Constant enableGlobally Data Type boolean Description You can set this to on when you want to use the lightbox/slimbox as a general exchange for the standard popup-script. This way you get a lightbox for every image marked with "Click-enlarge". If more than one image is existent it's automatically an imageset. Of course you don't lose the other options (if set), they are still taken into account! Default 1 .. _ignoreUids: ignoreUids """""""""" .. container:: table-row Constant ignoreUids Data Type booelan Description You can set this to on when you want to ALWAYS display ALL images on a page in an imageset. (For all images with exactly the same options enabled!) Default 0 .. _ttnews-enableSingle: ttnews.enableSingle """"""""""""""""""" .. container:: table-row Constant ttnews.enableSingle Data Type boolean Description If set lightbox will also work for the single-view of tt\_news. Default 1 .. _ttnews-enableList: ttnews.enableList """"""""""""""""" .. container:: table-row Constant ttnews.enableList Data Type boolean Description If set lightbox will also work for the list-view of tt\_news. Default 0 .. _ttnews-enableLatest: ttnews.enableLatest """"""""""""""""""" .. container:: table-row Constant ttnews.enableLatest Data Type boolean Description If set lightbox will also work for the latest-view of tt\_news. Default 0 .. _cssPath: cssPath """"""" .. container:: table-row Constant cssPath Data Type file Description CSS file for the Lightbox/Slimbox.See EXT:perfectlightbox/res/css/slightbox.css for an example. Default EXT:perfectlightbox/res/css/slightbox.css .. _prototypePath: prototypePath """"""""""""" .. container:: table-row Constant prototypePath Data Type file Description Path to Prototype: You can change this if you need to modify prototype. Default EXT:perfectlightbox/res/js/prototype-packed.js .. _scriptaculousPath: scriptaculousPath """"""""""""""""" .. container:: table-row Constant scriptaculousPath Data Type file Description Path to Scriptaculous: You can change this if you need to modify scriptaculous. Default EXT:perfectlightbox/res/js/scriptaculousEffects-packed.js .. _lightboxPath: lightboxPath """""""""""" .. container:: table-row Constant lightboxPath Data Type file Description Path to the Lightbox Script: WARNING: Refer to the original file at EXT:perfectlightbox/res/js/lightbox.js for the changes made in there (added localisation, presentation mode, slideshow, etc...) Default EXT:perfectlightbox/res/js/lightbox-packed.js .. _mootoolsPath: mootoolsPath """""""""""" .. container:: table-row Constant mootoolsPath Data Type file Description Path to MooTools: You can change this if you need to modify mootools. Default EXT:perfectlightbox/res/js/mootools1.11-packed.js .. _slimboxPath: slimboxPath """"""""""" .. container:: table-row Constant slimboxPath Data Type file Description Path to the Slimbox Script: WARNING: Refer to the original file at EXT:perfectlightbox/res/js/slimbox.js for the changes made in there (added localisation, presentation mode, slideshow, etc...) Default EXT:perfectlightbox/res/js/slimbox-packed.js .. _jqueryPath: jqueryPath """""""""" .. container:: table-row Constant jqueryPath Data Type file Description Path to JQuery: You can change this if you need to modify jquery. Default EXT:perfectlightbox/res/js/jquery.1.4.2.min.js .. _slimbox2Path: slimbox2Path """""""""""" .. container:: table-row Constant slimbox2Path Data Type file Description Path to the Slimbox2 Script: WARNING: Refer to the original file at EXT:perfectlightbox/res/js/slimbox.2.0.4.js for the changes made in there (added localisation, presentation mode, slideshow, etc...) Default EXT:perfectlightbox/res/js/slimbox.2.0.4.yui.js .. _lightBoxMaxW: lightBoxMaxW """""""""""" .. container:: table-row Constant lightBoxMaxW Data Type int+ Description Defines the maxwidth of the image shown in the Lightbox. Default 900 .. _lightBoxMaxH: lightBoxMaxH """""""""""" .. container:: table-row Constant lightBoxMaxH Data Type int+ Description Defines the maxheight of the image shown in the Lightbox. Default 600 .. _captionField: captionField """""""""""" .. container:: table-row Constant captionField Data Type string Description Which tt\_content field to use as caption inside the Lightbox. Choices are titleText, altText or imagecaption. Default imagecaption .. _overlayOpacity: overlayOpacity """""""""""""" .. container:: table-row Constant overlayOpacity Data Type string Description This controls the transparency of the shadow overlay. Default 0.8 .. _loopImages: loopImages """""""""" .. container:: table-row Constant loopImages Data Type Description Loop images?: Choose true if you want an image carousel. Default true .. _resizeSpeed: resizeSpeed """"""""""" .. container:: table-row Constant resizeSpeed Data Type int+ Description This controls the speed of the image resizing animations (in milliseconds). Default 400 .. _lbBorderSize: lbBorderSize """""""""""" .. container:: table-row Constant lbBorderSize Data Type int+ Description Whitespace around image in the Lightbox. If you adjust the padding in the CSS, you will need to update this variable. This is only relevant for protaculous/lightbox, for mootools/slimbox it's ignored. Default 10 .. _allowSave: allowSave """"""""" .. container:: table-row Constant allowSave Data Type string Description This toggles whether users are allowed to save the displayed image or not. Default false .. _slideshowAutoplay: slideshowAutoplay """"""""""""""""" .. container:: table-row Constant slideshowAutoplay Data Type string Description This toggles whether slideshows start automatically or only after user request. Default true .. _slideshowAutoclose: slideshowAutoclose """""""""""""""""" .. container:: table-row Constant slideshowAutoclose Data Type string Description This toggles whether the lightbox is closed after a slideshow reaches the last image in the set. If set to false the slideshow is just stopped and the lightbox remains active. Default true .. _slideshowInterval: slideshowInterval """"""""""""""""" .. container:: table-row Constant slideshowInterval Data Type int+ Description The amount of time in milliseconds before a new image is loaded during a slideshow. Default 5000 .. ###### END~OF~TABLE ###### [tsref:(cObject).plugin.perfectlightbox] .. _Tutorial: Tutorial -------- As this extension is not that hard to handle i believe looking at the users manual should be sufficient enough. .. _Using-the-lightbox-with-TS-Objects: Using the lightbox with TS-Objects ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If you want to use the lightbox with other TS-Objects you have to add a rel-attribute to the links (rel=”lightbox” for single lightbox, rel=”lightbox[myImageSet]” for imagesets). You can add the strings “present” and/or “slideshow” INSIDE the [ ] to additionally activate presentation mode and/or a slideshow.The following lines will point you in the right direction: :: page.20 = TEXT page.20.value = Open an image in a lightbox page.20.typolink { title = This is my caption parameter.cObject = IMG_RESOURCE parameter.cObject.file = fileadmin/image01.jpg parameter.cObject.file.maxW = 600 parameter.cObject.file.maxH = 600 ATagParams = rel="lightbox[mySet]" } page.30 < page.20 page.30.value = Open another one page.30.typolink.title = The caption of the second image page.30.typolink.parameter.cObject.file = fileadmin/image02.jpg This will generate two simple textlinks which open the images in a imageset. .. _Adding-a-watermark-to-the-lightbox-images: Adding a watermark to the lightbox-images ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Recently i received a request if it's possible to add a watermark to the images in the lightbox... well it is!Simply add the following lines in your TS-Setup an tweak the watermark as you like: :: tt_content.image.20.1 { imageLinkWrap { typolink { parameter.override.cObject = IMG_RESOURCE parameter.override.cObject.file = GIFBUILDER parameter.override.cObject.file.XY = [10.w],[10.h] parameter.override.cObject.file.10 = IMAGE parameter.override.cObject.file.10.file.import.data = TSFE:lastImageInfo|origFile parameter.override.cObject.file.10.file.maxW = {$plugin.perfectlightbox.lightBoxMaxW} parameter.override.cObject.file.10.file.maxH = {$plugin.perfectlightbox.lightBoxMaxH} parameter.override.cObject.file.20 = TEXT parameter.override.cObject.file.20 { text.data = date:Y text.noTrimWrap = |© | Watermark | align = right offset = -5,[10.h]-15 fontFile = fileadmin/templates/fonts/arial.ttf fontSize = 36 fontColor= #555555 niceText = 1 shadow { color = #ffffff offset = 1,1 blur = 40 opacity = 50 } } } } } .. _Optimising-loading-time: Optimising loading time ^^^^^^^^^^^^^^^^^^^^^^^ Generally speaking it's a goog idea to minimize http-requests from clients. If speed matters for your site consider to put the lightbox- CSS in your main CSS-file (as all other "special" CSS).Regarding the javascripts, they should be loaded as late as possible. I'm working on that (expect major changes in plb 2.4.0).For now you can try and put all javascripts from the late in the instead. Advanced Typoscripters should be able to do so easily. Good luck! **UPDATE: New option “bodyScripts” since Version 3.0 to accomplish that. Not yet thoroughly tested so be careful.** .. _Known-problems: Known problems -------------- Don't mix javascript frameworks unless you know what to do! As of Version 3.0 you can choose between three popular frameworks in recent versions so hopefully your favorite one is in the package... Very likely there are problems with TYPO3 < 4.0 but as i haven't got any installations left to test this it's just a guess. I REALLY would appreciate your comments, feedback and/or bugnotices at typo3@channel-eight.de .. _To-Do-list: To-Do list ---------- Feel free to make suggestions! .. _Changelog: Changelog --------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Perfectlightbox-3-1-0: Perfectlightbox 3.1.0 """"""""""""""""""""" Fixed TCA-settings for TYPO3 4.5 .. _perfectlightbox-3-0-4: perfectlightbox 3.0.4 """"""""""""""""""""" Changed CSS for a more convenient handling of the presentation mode Modified Lightbox/Slimbox-Scripts slightly (Cosmetic changes) .. _perfectlightbox-3-0-3: perfectlightbox 3.0.3 """"""""""""""""""""" Added keycode to toggle slideshow on/off (again) .. _perfectlightbox-3-0-1: perfectlightbox 3.0.1 """"""""""""""""""""" Compressed versions of Prototype 1.6.1(YUI), MooTools 1.2.4(YUI) and Jquery 1.4.2(MIN) added YUI-Compressed versions of Lightbox 2.0.4, Slimbox 1.7.1 and Slimbox 2.0.4 added Updated Typoscript Updated documentation .. _perfectlightbox-3-0-0: perfectlightbox 3.0.0 """"""""""""""""""""" BIG UPDATE! Javascripts rewritten from scratch. Based on the most recent scripts of Lightbox&Slimbox (Slimbox 2.0.4, Slimbox 1.7.1, Lightbox 2.04) and the corresponding frameworks (Jquery 1.4.2, Mootools 1.2.4, Prototype 1.6.1/Scriptaculous 1.8.3). Optimized Typoscripts and CSS Removed the option "animate" for Lightbox. You can set resizeSpeed to 0 for a similar effect. Added an option to put the JS/CSS in the for speed optimization (experimental). Updated documentation .. _perfectlightbox-2-2-4: perfectlightbox 2.2.4 """"""""""""""""""""" Perfect Lightbox should now FLAWLESSY support tt\_news! (Thanks to Claus Helfenschneider for giving me the idea) Added dutch translation (Again, thanks to Claus) Updated documentation .. _perfectlightbox-2-2-3: perfectlightbox 2.2.3 """"""""""""""""""""" Fixed small problems with tt\_news-integration (with firstImageIsPreview and/or forceFirstImageIsPreview set). No confusion with the imagecaptions anymore! (Thanks to Steffen Thierock for this hint) Added the option to completely ignore the uid of the content-element. If this is set, perfectlightbox will display ALL images on a page in an imageset! (For all images with exactly the same options enabled) .. _perfectlightbox-2-2-2: perfectlightbox 2.2.2 """"""""""""""""""""" Added french translation (Thanks to Ismaël Bidau) Added t3mootools.txt to allow T3Mootools to analyze for dependencies Small change in ext\_tables.php .. _perfectlightbox-2-2-1: perfectlightbox 2.2.1 """"""""""""""""""""" Added danish translation (Thanks to Søren Thing Andersen) Captionsplit now works with dam\_ttnews (Thanks to Erich Bircher for the necessary changes in his extension) Updated documentation .. _perfectlightbox-2-2-0: perfectlightbox 2.2.0 """"""""""""""""""""" Added a more convenient call to initialise the lightbox for the protaculous version (it's now called on loading of the DOM, not on loading of the whole page). Thanks to Alexander McWilliam for giving me the hint. Updated documentation .. _perfectlightbox-2-1-0: perfectlightbox 2.1.0 """"""""""""""""""""" Support for tt\_news added Updated documentation .. _perfectlightbox-2-0-1: perfectlightbox 2.0.1 """"""""""""""""""""" Updated documentation .. _perfectlightbox-2-0-0: perfectlightbox 2.0.0 """"""""""""""""""""" Major changes in the structure of the extension Included mootools/slimbox alternative! Shared css for both variants All images externalized in css Option added to enable lightbox/slimbox globally Small changes in userfunc .. _perfectlightbox-1-3-1: perfectlightbox 1.3.1 """"""""""""""""""""" Modification in lightbox.js (resizeDuration is now properly updated) .. _perfectlightbox-1-3-0: perfectlightbox 1.3.0 """"""""""""""""""""" Fixed a bug in lightbox.js Introduced compressed scripts (lightbox.js is now only 9kb) .. _perfectlightbox-1-2-3: perfectlightbox 1.2.3 """"""""""""""""""""" Updated documentation Small modification in userfunc Fixed little bug in lightbox.css .. _perfectlightbox-1-2-2: perfectlightbox 1.2.2 """"""""""""""""""""" Updated documentation Additional testing First upload to TER .. _perfectlightbox-1-2-1: perfectlightbox 1.2.1 """"""""""""""""""""" Updated manual .. _perfectlightbox-1-2-0: perfectlightbox 1.2.0 """"""""""""""""""""" Added slideshow options Inluded userfunc for additional link-processing Transferred more lightbox-vars to constants Updated manual Thoroughly tested .. _perfectlightbox-1-2-0: perfectlightbox 1.2.0 """"""""""""""""""""" Added slideshow options Inluded userfunc for additional link-processing Transferred more lightbox-vars to constants Updated manual .. _perfectlightbox-1-1-0: perfectlightbox 1.1.0 """"""""""""""""""""" Added option to save images, controlled globally via constant. Updated manual .. _perfectlightbox-1-0-0: perfectlightbox 1.0.0 """"""""""""""""""""" Initial release. .. _Credits: Credits ------- Lokesh Dhakar for sharing his lightbox script. Christophe Beyls for sharing his slimbox script. Markus F. Hay for the lightbox-extension “LyteBox” which inspired me to include a slideshow. Michael Feinbier for general help. Julian Kleinhans for kj\_imagelightbox2 as an inspiration. Peter Klein for pmkslimbox and some neat typoscripts in there. Søren Thing Andersen for danish translation. Steffen Thierock and Martin Holtz for constructive feedback. Claus Helfenschneider for dutch translation and extensive feedback. |img-8| EXT: Perfect Lightbox - 0 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.jpeg .. :align: left .. :border: 0 .. :height: 290 .. :id: Grafik6 .. :name: Grafik6 .. :width: 660 .. |img-2| image:: img-2.jpeg .. :align: left .. :border: 0 .. :height: 600 .. :id: Grafik4 .. :name: Grafik4 .. :width: 660 .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 660 .. :id: Grafik2 .. :name: Grafik2 .. :width: 660 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 660 .. :id: Grafik3 .. :name: Grafik3 .. :width: 660 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 210 .. :id: Grafik5 .. :name: Grafik5 .. :width: 660 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 55 .. :id: Grafik8 .. :name: Grafik8 .. :width: 660 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 90 .. :id: Grafik7 .. :name: Grafik7 .. :width: 660 .. |img-8| image:: img-8.png .. :border: 0 .. :height: 38 .. :id: Grafik1 .. :name: Grafik1 .. :style: position: absolute; top: 0in; left: 0in .. :width: 113