.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =================================== EXT: Image Lightbox - Image Gallery =================================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Markus Brunner :Changed: 2011-10-20T11:09:07.410000000 :Classification: mbkdimagelightbox :Description: Easy to handle and comfortable Extension for images. Different modes for output (Lightbox, Thumbzoomer, Smoothgallery, ContentFlow, Popeye). Reads images out of files, directories or DAM. Standard-Integration: forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) Adaption of JS-Starters: forAdmins (use this for Administrators) forDevelopers (use this for Developers) :Keywords: image, lightbox, gallery, smoothgallery, imagepreview, popeye, contentflow, jqueryzoom, galleriffic :Author: Markus Brunner, Katja Deutschmann :Email: mail@markusbrunner-design.de, katja.deutschmann@gmx.de :Extension-Support: Markus Brunner :Thumbzoomer-Support: Katja Deutschmann :URL: http://www.markusbrunner-design.de, http://www.katjadeutschmann.de :Language: en |img-1| |img-2| EXT: Image Lightbox - Image Gallery - mbkdimagelightbox .. _EXT-Image-Lightbox-Image-Gallery: EXT: Image Lightbox - Image Gallery =================================== Extension Key: mbkdimagelightbox Language: en Keywords: image, lightbox, gallery, smoothgallery, imagepreview, popeye, contentflow, jqueryzoom, galleriffic Copyright 2000-2008, Markus Brunner, Katja Deutschmann, 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.org .. _Table-of-Contents: Table of Contents ----------------- `EXT: Image Lightbox - Image Gallery 1 <#1.EXT:%20Image%20Lightbox%20-%20Image%20Gallery|outline>`_ **`Introduction 3 <#Introduction|outline>`_** `What does it do? 3 <#What%20does%20it%20do_|outline>`_ `Screenshots 4 <#Screenshots|outline>`_ **`Users manual 9 <#Users%20manual|outline>`_** `Image Lightbox 9 <#Image%20Lightbox|outline>`_ `Image Lightbox Plugin-Configuration 10 <#Image%20Lightbox%20Plugin- Configuration|outline>`_ **`Administration 11 <#Administration|outline>`_** `Used JavaScript-Scripts 11 <#Used%20JavaScript-Scripts|outline>`_ `FAQ 11 <#FAQ|outline>`_ **`Configuration 12 <#Configuration|outline>`_** **`Known problems 22 <#Known%20problems|outline>`_** **`ChangeLog 23 <#ChangeLog|outline>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ - Displays images in different modes (e.g. Lightbox with or without JavaScript-Preview, Smoothgallery with or without external thumbnails) - Reads images out of files, directories and DAM and makes a mashup (order predefined: files, directories, DAM). .. _Screenshots: Screenshots ^^^^^^^^^^^ .. _Lightbox-mode-1: Lightbox (mode 1) """"""""""""""""" .. _img-3-Lightbox-with-JavaScript-Preview-on-Mouseover-mode-2: |img-3| Lightbox with JavaScript-Preview on Mouseover (mode 2) """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. _img-4-Smoothgallery-with-internal-thumbnails-mode-3: |img-4| Smoothgallery with internal thumbnails (mode 3) """"""""""""""""""""""""""""""""""""""""""""""""""""""" |img-5| .. _Smoothgallery-with-external-thumbnails-mode-4: Smoothgallery with external thumbnails (mode 4) """"""""""""""""""""""""""""""""""""""""""""""" .. _img-6: |img-6| """"""" .. _Contentflow-mode-5: Contentflow (mode 5) """""""""""""""""""" |img-7| .. _Popeye-mode-6: Popeye (mode 6) """"""""""""""" Normal: |img-8| |img-9| Hover: Enlarged: |img-10| Variant 1 – Mode 2 – Nav Outside: |img-11| Variante 2 – Mode 3 – Normalized: |img-12| .. _JqueryZoom-mode-7: JqueryZoom (mode 7) """"""""""""""""""" |img-13| .. _Galleriffic-mode-8: Galleriffic (mode 8) """""""""""""""""""" |img-14| .. _Users-manual: Users manual ------------ .. _Image-Lightbox: Image Lightbox ^^^^^^^^^^^^^^ This Extension needs the extension “smarty” to be installed before! Otherwise it won't work. Furthermore the extension “rgfolderselector” is suggested. After installation of the extension in the Extension Manager, you can insert the Image Lightbox Plugin (pi1) on each page as a Content Element. |img-15| For Correct output: Check if folder “uploads/tx\_mbkdimagelightbox/” is created within installation – otherwise: create it! Include the static TypoScript-Template (see chapter Configuration) or define all TypoScript-Setup-Configurations yourself. You can find the static template in: EXT:mbkdimagelightbox/static/MBKD\_\_\_\_Image\_Li ghtbox\_standard\_values/setup.txt .. _Image-Lightbox-Plugin-Configuration: Image Lightbox Plugin-Configuration ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ I think it's easy to handle this form. If there are any questions, I can add this info here in future. Some Information: - Always fill out the field “Image set name”! It is used as HTML-id or other kind of suffixes for several modes! - DAM-Setup is only shown if DAM is installed. - Folderselector for directory-path is only shown if rgfolderselector is installed. |img-16| .. _Administration: Administration -------------- This Extension produces two own database-tables. You have to define “Tables (listing)”, “Tables (modify)” and “Allowed excludefields” for all user-groups which should have the rights to add additional imageset- or imagewrappers. You can edit these rights in a user-group (List-Module on world-page) in the tab “Access Lists”. .. _Used-JavaScript-Scripts: Used JavaScript-Scripts ^^^^^^^^^^^^^^^^^^^^^^^ I want to thank all authors of these fabulous open source scripts: - Slimbox (Lightbox): EXT:mbkdimagelightbox/res/js/slimbox-1.71/, © Christophe Beyls, `http://code.google.com/p/slimbox/ `_ , MIT-style license - Jon Design's Smoothgallery v2.1: EXT:mbkdimagelightbox/res/js/jon1012 -smoothgallery-205a5d5/, © Jonathan Schemoul, `http://www.jondesign.net/ `_ , GNU GENERAL PUBLIC LICENSE - Thumbzoomer: EXT:mbkdimagelightbox/res/js/thumbzoomer/, © Katja Deutschmann, `http://www.katjadeutschmann.de/ `_ , initial release, report bugs to: `mail@katjadeutschmann.de `_ - Contentflow: EXT:mbkdimagelightbox/res/js/contentflow\_1.0.2/, © Sebastian Kutsch, `http://www.jacksasylum.eu/ContentFlow/ `_ , MIT license - Popeye: EXT:mbkdimagelightbox/res/js/jquery.popeye-2.0.4/, © Christoph Schüssler, `http://dev.herr-schuessler.de/jquery/popeye/ `_ , GNU GENERAL PUBLIC LICENSE - JQZoom Evolution: Ext:mbkdimagelightbox/res/js/jqzoom\_ev1.0.1/, © Renzi Marco, `http://www.mind-projects.it `_ , GNU GENERAL PUBLIC LICENSE - Galleriffic v2: Ext:mbkdimagelightbox/res/js/galleriffic-2.0/, © Trent Foley, `http://trentacular.com `_ , MIT license .. _FAQ: FAQ ^^^ - Can I define the initialization of lightbox, smoothgallery, thumbzoomer or jqzoom myself? Yes. Via TypoScript: plugin.tx\_mbkdimagelightbox\_pi1.js.slimbox\_starter (/ smoothgallery\_starter / thumbzoomer\_starter) = fileadmin/templates/scripts/js/myOwnSlimboxStarter.js - Can I use this library out of a extension? Yes. But of course you need several customizations! PHP-Function and call in the extension; TypoScript-Setup for the extension and normal installation of this extension, of course. See Chapter Configuration > TypoScript. .. _Configuration: Configuration ------------- At first include the static TypoScript-File “MBKD :: ImageLightbox STD Values” into your Main Template, or alternatively add all TypoScript- Setup of this file (EXT:mbkdimagelightbox/static/MBKD\_\_\_\_Image\_Li ghtbox\_standard\_values/setup.txt) directly into your TS-Setup: |img-17| .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Specific-Wrappers-for-Imagesets-and-Images: Specific Wrappers for Imagesets and Images """""""""""""""""""""""""""""""""""""""""" This extension inserts two database-tables “tx\_mbkdimagelightbox\_imagesetwrap” for Image-Set-Wraps and “tx\_mbkdimagelightbox\_imagewrap” for Image-Wraps. You can define those wrappers within any folder in your TYPO3-Backend. Just select the List-Module and insert a new record for Imagesets or Images (there are also some default wrappers you can find in the file EXT:mbkdimagelightbox/ext\_tables\_static+adt.sql for SQL-Insert via a SQL-Tool, if automatic insert did not succeed): .. _TypoScript: TypoScript """""""""" Extension TypoScript-Setup for “plugin.tx\_mbkdimagelightbox\_pi1.” (properties “uset3mootools”, “maxWidth” [now maxW] and “maxHeight” [now maxH] are not supported any more!) .. ### BEGIN~OF~TABLE ### .. _debug: debug ~~~~~ .. container:: table-row Property debug Data type integer Description 0 = no debugging 1 = debug over devIPMask (defined in Install Tool) Default 0 .. _wrapinbaseclass: wrapinbaseclass ~~~~~~~~~~~~~~~ .. container:: table-row Property wrapinbaseclass Data type integer Description Choose if the frontend plugin is wrapped with the standard extension wrapper: '
\|
'. 0 = disable wrapping 1 = enable wrapping Default 1 .. _useGoogleJSApi: useGoogleJSApi ~~~~~~~~~~~~~~ .. container:: table-row Property useGoogleJSApi Data type integer Description Choose if you want to use the google JS-API (extension google\_jsapi needed). Only used if $\_SERVER['SERVER\_ADDR'] != '127.0.0.1'. 0 = don't use google JS-API 1 = use google JS-API if installed Default 0 .. _usedGoogleJSApiMootoolsVersion: usedGoogleJSApiMootoolsVersion ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property usedGoogleJSApiMootoolsVersion Data type string Description Mootools-Version to include for google\_jsapi 1 → newest 1.\* version 1.2 → newest 1.2.\* version 1.2.4 → use 1.2.4 Default 1.2.4 .. _doNotIncludeMootools: doNotIncludeMootools ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property doNotIncludeMootools Data type integer Description Disable automatic include of mootools library (if you want to include it global in your TYPO3) Default 0 .. _doNotIncludeMootoolsMore: doNotIncludeMootoolsMore ~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property doNotIncludeMootoolsMore Data type integer Description Disable automatic include of mootools more library (if you want to include it global in your TYPO3) Default 0 .. _doNotIncludeJQuery: doNotIncludeJQuery ~~~~~~~~~~~~~~~~~~ .. container:: table-row Property doNotIncludeJQuery Data type integer Description Disable automatic include of jQuery library (if you want to include it global in your TYPO3) – this is a $j → dollarConflict-Version! var $j = jQuery.noConflict(); → do never use $ as a selector with this version, otherwise you call mootools! Default 0 .. _doNotIncludeAnyJSAndCSSViaExtension: doNotIncludeAnyJSAndCSSViaExtension ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property doNotIncludeAnyJSAndCSSViaExtension Data type integer Description Disable include of every JS- and CSS-File. You need to include everything yourself (JS-Libs, JS-Starters, CSS-Files). Default 0 .. _directory-glob-filetypes: directory.glob\_filetypes ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property directory.glob\_filetypes Data type string Description Define allowed image-file-patterns for glob()-function Default \*.jpg,\*.jpeg,\*.gif,\*.png .. _directory-readRecursive: directory.readRecursive ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property directory.readRecursive Data type integer Description DISABLED Define if recursive directory-reading is enabled. 0 = disabled recursive reading (faster) 1 = enabled recursive reading (slower) Default 0 .. _js-slimbox-starter: js.slimbox\_starter ~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property js.slimbox\_starter Data type string (path) Description Define your own Slimbox-Starter. E. g. fileadmin/templates/scripts/js/myOwnSlimboxStarter.js; Original Starter: EXT:mbkdimagelightbox/res/js/slimbox-1.71/js/startLightbox.js Default null .. _js-jquery-lightbox-starter: js.jquery\_lightbox\_starter ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property js.jquery\_lightbox\_starter Data type string (path) Description Define your own jQuery-Lightbox-Starter. E. g. fileadmin/templates/scripts/js/myOwnjQueryLightboxStarter.js; Original Starter: EXT:mbkdimagelightbox/res/js/jquery- lightbox-0.5/js/startJQueryLightbox.js Default null .. _js-smoothgallery-starter: js.smoothgallery\_starter ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property js.smoothgallery\_starter Data type string (path) Description Define your own Smoothgallery-Starter. E. g. fileadmin/templates/scripts/js/myOwnSmoothgalleryStarter.js Original Starter: EXT:mbkdimagelightbox/res/js/jon1012-smoothgallery- 205a5d5/scripts/startGallery\_alternative.js Default null .. _js-smoothgallery-starter-external: js.smoothgallery\_starter\_external ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property js.smoothgallery\_starter\_external Data type string (path) Description Define your own Smoothgallery-ExternalThumbs-Starter. E. g. fileadmin/templates/scripts/js/myOwnSmoothgalleryExtStarter.js Original Starter: EXT:mbkdimagelightbox/res/js/jon1012-smoothgallery- 205a5d5/scripts/startGallery\_alternative.js Default null .. _js-thumbzoomer-starter: js.thumbzoomer\_starter ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property js.thumbzoomer\_starter Data type string (path) Description Define your own Thumbzoomer-Starter. E. g. fileadmin/templates/scripts/js/myOwnThumbzoomerStarter.js Original Starter: EXT:mbkdimagelightbox/res/js/thumbzoomer/js/thumbzoomer\_starter.js Default null .. _js-jqueryzoom-starter: js.jqueryzoom\_starter ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property js.jqueryzoom\_starter Data type string (path) Description Define your own JqueryZoom-Starter. E. g. fileadmin/templates/scripts/js/myOwnJQZoomStarter.js Original Starter: EXT:mbkdimagelightbox/res/js/jqzoom\_ev1.0.1/js/jgzoom\_starter.js Default null .. _js-galleriffic-starter: js.galleriffic\_starter ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property js.galleriffic\_starter Data type string (path) Description Define your own Galleriffic-Starter. E. g. fileadmin/templates/scripts/js/myOwnGallerifficStarter.js Original Starter: EXT:mbkdimagelightbox/res/js/galleriffic-2.0/js/gall eriffic\_starter.js Default null .. _smarty-template-dir: smarty.template\_dir ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.template\_dir Data type string (path) Description Define your own Smarty-Template-Dir E. g. fileadmin/templates/smarty/ Default null .. _smarty-compile-dir: smarty.compile\_dir ~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.compile\_dir Data type string (path) Description Define your own Smarty-Compile-Dir Default null .. _smarty-templates-pagebrowser: smarty.templates.pagebrowser ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.templates.pagebrowser Data type string (path) Description Pagebrowser-Template (Smarty) [within smarty.template\_dir] E. g. myPagebrowser.tpl Default pagebrowser.tpl .. _smarty-templates-lightbox-and-preview: smarty.templates.lightbox\_and\_preview ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.templates.lightbox\_and\_preview Data type string (path) Description Lightbox-Preview-Template (Smarty) [within smarty.template\_dir] E. g. myLightboxPreview.tpl Default lightbox\_and\_preview.tpl .. _smarty-templates-lightbox-and-smoothgallery: smarty.templates.lightbox\_and\_smoothgallery ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.templates.lightbox\_and\_smoothgallery Data type string (path) Description Lightbox-Smoothgallery-Template (Smarty) [within smarty.template\_dir] E. g. myLightboxSmoothgallery.tpl Default lightbox\_and\_smoothgallery.tpl .. _smarty-templates-lightbox-and-contentflow: smarty.templates.lightbox\_and\_contentflow ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.templates.lightbox\_and\_contentflow Data type string (path) Description Lightbox-Contentflow-Template (Smarty) [within smarty.template\_dir] E. g. myContentFlow.tpl Default lightbox\_and\_contentflow.tpl .. _smarty-templates-popeye: smarty.templates.popeye ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.templates.popeye Data type string (path) Description Popeye-Template (Smarty) [within smarty.template\_dir] E. g. myPopeye.tpl Default popeye.tpl .. _smarty-templates-jqueryzoom: smarty.templates.jqueryzoom ~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.templates.jqueryzoom Data type string (path) Description JQZoom-Template (Smarty) [within smarty.template\_dir] E. g. myJQueryZoom.tpl Default jqueryzoom.tpl .. _smarty-templates-galleriffic: smarty.templates.galleriffic ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smarty.templates.galleriffic Data type string (path) Description Galleriffic-Template (Smarty) [within smarty.template\_dir] E. g. myGalleriffic.tpl Default galleriffic.tpl .. _lightbox-usedefaultcss: lightbox.usedefaultcss ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.usedefaultcss Data type integer Description Use of default CSS for Lightbox (Slimbox) 0 = no CSS included 1 = default CSS included Default 1 .. _lightbox-usedFramework: lightbox.usedFramework ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.usedFramework Data type string Description Switch JavaScript-Framework to use for Lightbox (only for mode lightbox – for other modes mootools is needed anyway) mootools \|\| jquery Default mootools .. _lightbox-thumbnailimage: lightbox.thumbnailimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.thumbnailimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default width = 100c height = 100c .. _lightbox-lightboximage: lightbox.lightboximage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.lightboximage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 600 maxH = 300 .. _lightbox-thumbzoomerimage: lightbox.thumbzoomerimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.thumbzoomerimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 400 maxH = 200 .. _lightbox-pagebrowser-usedefaultcss: lightbox.pagebrowser.usedefaultcss ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.usedefaultcss Data type integer Description Use of default CSS for Pagebrowser 0 = no CSS included 1 = default CSS included Default 1 .. _lightbox-pagebrowser-showabovecontent: lightbox.pagebrowser.showabovecontent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.showabovecontent Data type integer Description Determine if pagebrowser is shown above images 0 = no pagebrowser above images 1 = pagebrowser above images Default 1 .. _lightbox-pagebrowser-showbelowcontent: lightbox.pagebrowser.showbelowcontent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.showbelowcontent Data type integer Description Determine if pagebrowser is shown below images 0 = no pagebrowser below images 1 = pagebrowser below images Default 1 .. _lightbox-pagebrowser-imagesperpage: lightbox.pagebrowser.imagesperpage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.imagesperpage Data type integer Description If one or two pagebrowsers are enabled, this option sets the limit of images per page. Default 10 .. _lightbox-pagebrowser-showifonlyonepage: lightbox.pagebrowser.showifonlyonepage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.showifonlyonepage Data type integer Description This option determines if a pagebrowser is shown, if only one page exists (no pagebrowser needed for navigation). Default 0 .. _lightbox-pagebrowser-wrap: lightbox.pagebrowser.wrap ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.wrap Data type string (wrap) Description Determine the pagebrowser-wrapper. Separator is “\|” as typically for TypoScript-Wrappers. Default
    \|
.. _lightbox-pagebrowser-link-classesTagName: lightbox.pagebrowser.link.classesTagName ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.link.classesTagName Data type string Description Tagname of the container in which the link is wrapped. Default li .. _lightbox-pagebrowser-link-normalClasses: lightbox.pagebrowser.link.normalClasses ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.link.normalClasses Data type string Description CSS-class for normal (inactive) pages in pagebrowser. Default normal .. _lightbox-pagebrowser-link-currentClasses: lightbox.pagebrowser.link.currentClasses ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.link.currentClasses Data type string Description CSS-class for current (active) page in pagebrowser. Default current active .. _lightbox-pagebrowser-link-disableCurrent: lightbox.pagebrowser.link.disableCurrent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.link.disableCurrent Data type integer Description Determines if current page has a link (a-Tag) or has no one (span- Tag). Default 1 .. _lightbox-pagebrowser-link-innerWrap: lightbox.pagebrowser.link.innerWrap ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lightbox.pagebrowser.link.innerWrap Data type string (wrap) Description Determine the innerWrap within link (a-Tag) or disabled current page (span-Tag). Separator is “\|” as typically for TypoScript-Wrappers. Default \| .. _smoothgallery-usedefaultcss: smoothgallery.usedefaultcss ~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smoothgallery.usedefaultcss Data type integer Description Use of default CSS for Smoothgallery 0 = no CSS included 1 = default CSS included Default 1 .. _smoothgallery-donotwrapset: smoothgallery.donotwrapset ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smoothgallery.donotwrapset Data type integer Description Define if smoothgallery-image-sets should be wrapped by backend- definable wrapping. Normally this makes no sense, so it is disabled. But perhaps someone can profit of this option. 0 = enabled wrapping 1 = disabled wrapping Default 1 .. _smoothgallery-donotwrapimage: smoothgallery.donotwrapimage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smoothgallery.donotwrapimage Data type integer Description Define if smoothgallery-images should be wrapped by backend-definable wrapping. Normally this makes no sense, so it is disabled. But perhaps someone can profit of this option. 0 = enabled wrapping 1 = disabled wrapping Default 1 .. _smoothgallery-thumbnailimage: smoothgallery.thumbnailimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smoothgallery.thumbnailimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default width = 100c height = 75c .. _smoothgallery-galleryimage: smoothgallery.galleryimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property smoothgallery.galleryimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 600 maxH = 300 .. _thumbzoomer-usedefaultcss: thumbzoomer.usedefaultcss ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property thumbzoomer.usedefaultcss Data type integer Description Use of default CSS for Thumbzoomer 0 = no CSS included 1 = default CSS included Default 1 .. _contentflow-usedefaultcss: contentflow.usedefaultcss ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property contentflow.usedefaultcss Data type integer Description Use of default CSS for ContentFlow 0 = no CSS included 1 = default CSS included Default 1 .. _contentflow-thumbnailimage: contentflow.thumbnailimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property contentflow.thumbnailimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 500 maxH = 500 .. _contentflow-linkimages: contentflow.linkimages ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property contentflow.linkimages Data type integer Description linkimages = 0 => no links on images, navigation via click on images or scrollbarlinkimages = 1 => links on images (image in new tab), navigation only via scrollbar Default 0 .. _popeye-usedefaultcss: popeye.usedefaultcss ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property popeye.usedefaultcss Data type integer Description Use of default CSS for PopEye 0 = no CSS included 1 = default CSS included Default 1 .. _popeye-thumbnailimage: popeye.thumbnailimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property popeye.thumbnailimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 240 maxH = 180 .. _popeye-bigimage: popeye.bigimage.\* ~~~~~~~~~~~~~~~~~~ .. container:: table-row Property popeye.bigimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 600 maxH = 300 .. _jqueryzoom-usedefaultcss: jqueryzoom.usedefaultcss ~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jqueryzoom.usedefaultcss Data type integer Description Use of default CSS for JQZoom 0 = no CSS included 1 = default CSS included Default 1 .. _jqueryzoom-thumbnailimage: jqueryzoom.thumbnailimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jqueryzoom.thumbnailimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default width = 100c height = 75c .. _jqueryzoom-galleryimage: jqueryzoom.galleryimage.\* ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property jqueryzoom.galleryimage.\* Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 600 maxH = 300 .. _galleriffic-usedefaultcss: galleriffic.usedefaultcss ~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property galleriffic.usedefaultcss Data type integer Description Use of default CSS for Galleriffic 0 = no CSS included 1 = default CSS included Default 1 .. _galleriffic-thumbnailimage: galleriffic.thumbnailimage ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property galleriffic.thumbnailimage Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default width = 75c height = 75c .. _galleriffic-galleryimage: galleriffic.galleryimage ~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property galleriffic.galleryimage Data type “file.” properties of IMG\_RESOURCE Description properties: width = 100c (fixed with or without “c” = cropping) height = 100c (fixed height or without “c” = cropping) maxW = 100 maxH = 100 minW = 100 minH = 100 Default maxW = 544 maxH = 500 .. _extensionaccess: extensionaccess ~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess Data type integer Description This option is for extension-developers. While making an instance of the pi1-class you can enable this option within the TypoScript you have to specify for the main-function. If this option is enabled, the extension parses the extensionaccess.directory for images and displays them. Do not activate this option for normal use! Default 0 .. _extensionaccess-extKey: extensionaccess.extKey ~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.extKey Data type string Description Extension-Key of using extension Default mbprojects .. _extensionaccess-imgPath: extensionaccess.imgPath ~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.imgPath Data type String (path) Description Upload-Path for files of extension Default uploads/tx\_mbprojects/ .. _extensionaccess-selectmode: extensionaccess.selectmode ~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.selectmode Data type integer Description Display-Modes of extension: 0 = Lightbox 1 = Lightbox with JS-Preview 2 = Smoothgallery (internal thumbnails) with Lightbox 3 = Smoothgallery (external thumbnails) with Lightbox Default 2 .. _extensionaccess-imagesetname: extensionaccess.imagesetname ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.imagesetname Data type string Description Image set name (if empty no imageset in lightbox) Default extensionaccess .. _extensionaccess-imagetitles-in-lightbox: extensionaccess.imagetitles\_in\_lightbox ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.imagetitles\_in\_lightbox Data type integer Description Show Image-Titles also in lightbox Default 1 .. _extensionaccess-hidepagebrowser: extensionaccess.hidepagebrowser ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.hidepagebrowser Data type integer Description Hide Pagebrowser (override of TS-Settings) Default 1 .. _extensionaccess-imagewrapperhtmlwrap: extensionaccess.imagewrapperhtmlwrap ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.imagewrapperhtmlwrap Data type string (wrap) Description Image wrapper: wraps a single image Default \| .. _extensionaccess-imagesetwrapperhtmlwrap: extensionaccess.imagesetwrapperhtmlwrap ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property extensionaccess.imagesetwrapperhtmlwrap Data type string (wrap) Description Image set wrapper: wraps around all images Default \| .. ###### END~OF~TABLE ###### .. _CSS: CSS """ Just overwrite existing CSS with your own one in your CSS. If you do not like the standard-CSS of the extensionparts you can also deactivate them via TypoScript (lightbox.usedefaultcss, lightbox.pagebrowser.usedefaultcss, smoothgallery.usedefaultcss, thumbzoomer.usedefaultcss). .. _Extensionaccess: Extensionaccess """"""""""""""" If you want to include this extension as a developer directly into your own extension, you can do this via some specific TypoScript- Setup, PHP and Flexform-XML only used for this purpose (see mbprojects for an integration-example). Flexform: you can copy the flexform of mbkdimagelightbox, to get all input possibilities of the extension → EXT:mbkdimagelightbox/flexform.xml – for getting the flexform initialized, you have to add some lines to your extension's ext\_tables.php: :: /* * Flexform integration */ $TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1'] ='pi_flexform'; t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY . '/flexform.xml'); PHP: her is a method out of mbprojects you can use 1:1 for integration in your own extension; fill the method with infos out of flexform: :: /** * @param $extKey extKey of your extension * @param $imgPath path to your images – needed for next variable $imagefiles * @param $imagefiles comma separated string of image files e.g. “file1.jpg,file2.gif,file3.png” * @param $imagefolder folder to read all images * @param $startingpointdam * @param $startingpointdamcat * @param $imagetitles imagetitles for all images, new line for next image * @param $imagesubtitles like $imagetitles, but subtitles */ private function _getExternalMBKDImageLighbox($extKey, $imgPath = '', $imagefiles = '', $imagefolder = '', $startingpointdam = '', $startingpointdamcat = '', $imagetitles = '', $imagesubtitles = '', $showLightbox = true) { $content = ''; // include mbkdimagelightbox Extension if(t3lib_extMgm::isLoaded('mbkdimagelightbox') && $showLightbox) { // get imagelightbox-object include_once(t3lib_extMgm::extPath('mbkdimagelightbox').'pi1/class.tx_mbkdimagelightbox_pi1.php'); $gallery = t3lib_div::makeInstance('tx_mbkdimagelightbox_pi1'); $gallery->cObj = t3lib_div::makeInstance('tslib_cObj'); // get TypoScript of extension $gallerySetup = $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_mbkdimagelightbox_pi1.']; // overwrite extension-TypoScript with external extension vars $gallerySetup['extensionaccess'] = 1; foreach($this->conf['mbkdimagelightbox.'] AS $key => $value) { $gallerySetup['extensionaccess.'][$key] = $value; } // fill extension vars $gallerySetup['extensionaccess.']['extKey'] = $extKey; $gallerySetup['extensionaccess.']['imgPath'] = $imgPath; // fill images $gallerySetup['extensionaccess.']['imagefiles'] = $imagefiles; $gallerySetup['extensionaccess.']['imagefolder'] = $imagefolder; $gallerySetup['extensionaccess.']['startingpointdam'] = $startingpointdam; $gallerySetup['extensionaccess.']['startingpointdamcat'] = $startingpointdamcat; // fill titles and subtitles $gallerySetup['extensionaccess.']['imagetitles'] = $imagetitles; $gallerySetup['extensionaccess.']['imagesubtitles'] = $imagesubtitles; // get ImageLightbox $content = $gallery->main("", $gallerySetup); } return $content; } TypoScript-Setup you need to specify for your extension: :: plugin.tx_MYPLUGINNAME_pi1 { mbkdimagelightbox { extKey = MYPLUGINEXTKEY e.g. mbprojects imgPath = uploads/tx_MYPLUGINEXTKEY/ selectmode = 2 imagesetname = MYIMAGESETNAME e.g. mbproject imagetitles_in_lightbox = 1 hidepagebrowser = 1 imagewrapperhtmlwrap = | imagesetwrapperhtmlwrap = | } } .. _Include-the-extension-TypoScript-Setup-directly-into-your-TypoScript-Setup-alternative-to-static-TypoScript-Setup-File: Include the extension-TypoScript-Setup directly into your TypoScript-Setup (alternative to static TypoScript-Setup-File) """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" This is only an example and reflects the whole needed TypoScript, so no static TypoScript-File is needed furthermore. :: plugin.tx_mbkdimagelightbox_pi1 { # debug mode - devIPMask needs to be set in Install Tool debug = 0 # defines if the extension has the
|
wrapper wrapinbaseclass = 1 # use google_jsapi if installed useGoogleJSApi = 0 usedGoogleJSApiMootoolsVersion = 1.2.4 # disable automatic js-include of mootools (more), jquery doNotIncludeMootools = 0 doNotIncludeMootoolsMore = 0 doNotIncludeJQuery = 0 # be sure to include every needed library and starter yourself if you activate this option doNotIncludeAnyJSAndCSSViaExtension = 0 # opens for reading images out of directory directory { filetypes = jpg,jpeg,gif,png } # js starters - hooks for own starters to adjust used script-initializations - starting from root: fileadmin/... js { slimbox_starter > jquery_lightbox_starter > smoothgallery_starter > smoothgallery_starter_external > thumbzoomer_starter > jqueryzoom_starter > galleriffic_starter > } # smarty variables smarty { # used template dir; standard is EXT:'res/smarty/templates/' template_dir > # used compile dir; standard is EXT:'res/smarty/templates_c/' compile_dir > # templates out of template dir templates { pagebrowser = pagebrowser.tpl lightbox_and_preview = lightbox_and_preview.tpl lightbox_and_smoothgallery = lightbox_and_smoothgallery.tpl lightbox_and_contentflow = lightbox_and_contentflow.tpl popeye = popeye.tpl jqueryzoom = jqueryzoom.tpl galleriffic = galleriffic.tpl } } # lightbox configuration lightbox { # insert default css usedefaultcss = 1 # switch js-framework (mootools || jquery) [only for mode lightbox – for other modes mootools is needed anyway] usedFramework = mootools # small size images - not smoothgallery thumbnailimage { width = 100c height = 100c } # big size lightbox image - not smoothgallery lightboximage { maxW = 600 maxH = 300 } # thumbzoomer image thumbzoomerimage { maxW = 400 maxH = 200 } # page browser pagebrowser { # insert default css usedefaultcss = 1 # where to display pagebrowser showabovecontent = 1 showbelowcontent = 1 # if pagebrowser should always be visible although only one page, activate this showifonlyonepage = 0 # images per page if pagebrowser is active imagesperpage = 10 # pagebrowser wrap wrap =
    |
# pagebrowser link properties link { # tagname of link-wrapping tag classesTagName = li # css-classes of link-wrapping tag normalClasses = normal currentClasses = current active # current is not linked if this is active disableCurrent = 1 # wrap inside the link, around page-number innerWrap = | } } } # smoothgallery configuration smoothgallery { # insert default css usedefaultcss = 1 # deactivate setwrappers for smoothgallery donotwrapset = 1 # deactivate imagewrappers for smoothgallery donotwrapimage = 1 # small size images - smoothgallery thumbnailimage { width = 100c height = 75c } # big size images - smoothgallery galleryimage { maxW = 600 maxH = 300 } } # thumbzoomer css thumbzoomer { usedefaultcss = 1 } # contentflow configuration contentflow { # insert default css usedefaultcss = 1 # small size images - not smoothgallery thumbnailimage { maxW = 500 maxH = 500 } # link images [navigation only via scrollbar] linkimages = 0 } # popeye configuration popeye { # insert default css usedefaultcss = 1 # small size images thumbnailimage { maxW = 240 maxH = 180 } # big size images bigimage { maxW = 600 maxH = 300 } } # jquery zoom configuration jqueryzoom { # insert default css usedefaultcss = 1 # small size images thumbnailimage { width = 100c height = 75c } # big size images galleryimage { maxW = 600 maxH = 300 } } # galleriffic configuration galleriffic { # insert default css usedefaultcss = 1 # small size images thumbnailimage { width = 75c height = 75c } # big size images galleryimage { maxW = 544 maxH = 500 } } # get extension access for directory mode extensionaccess = 0 extensionaccess { extKey = mbprojects imgPath = uploads/tx_mbprojects/ selectmode = 2 imagesetname = extensionaccess imagetitles_in_lightbox = 1 hidepagebrowser = 1 imagewrapperhtmlwrap = | imagesetwrapperhtmlwrap = | } } .. _Known-problems: Known problems -------------- - Some JS-Problems in old Internet Explorer versions. Internet Explorers <= version 6 are not supported/tested. You can use my extension mbie6boykott for displaying messages for people who use an old Internet Explorer 6 version, or use the project of `http://www .browser-update.org `_ ! - Do not mix up the mode ContentFlow with others on the same page (this mode is very sensitive)! - Do not mix up the mode Popeye (jQuery 1.4), JQZoom (jQuery 1.3.2) or Galleriffic (jQuery 1.3.2) with others on the same page. If you do, order of include is important (jQuery and mootools on the same page)! .. _ChangeLog: ChangeLog --------- See file EXT:mbkdimagelightbox/ChangeLog 23 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 149 .. :id: Grafik1 .. :name: Grafik1 .. :width: 669 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 266 .. :id: Grafik3 .. :name: Grafik3 .. :width: 669 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 364 .. :id: Grafik4 .. :name: Grafik4 .. :width: 477 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 328 .. :id: Grafik15 .. :name: Grafik15 .. :width: 669 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 290 .. :id: Grafik9 .. :name: Grafik9 .. :width: 669 .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 330 .. :id: Grafik10 .. :name: Grafik10 .. :width: 343 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 159 .. :id: Grafik11 .. :name: Grafik11 .. :width: 168 .. |img-10| image:: img-10.jpeg .. :align: left .. :border: 0 .. :height: 303 .. :id: Grafik12 .. :name: Grafik12 .. :width: 334 .. |img-11| image:: img-11.jpeg .. :align: left .. :border: 0 .. :height: 158 .. :id: Grafik13 .. :name: Grafik13 .. :width: 278 .. |img-12| image:: img-12.jpeg .. :align: left .. :border: 0 .. :height: 216 .. :id: Grafik14 .. :name: Grafik14 .. :width: 218 .. |img-13| image:: img-13.jpeg .. :align: left .. :border: 0 .. :height: 384 .. :id: Grafik16 .. :name: Grafik16 .. :width: 669 .. |img-14| image:: img-14.jpeg .. :align: left .. :border: 0 .. :height: 524 .. :id: Grafik17 .. :name: Grafik17 .. :width: 669 .. |img-15| image:: img-15.jpeg .. :align: left .. :border: 0 .. :height: 309 .. :id: Grafik5 .. :name: Grafik5 .. :width: 380 .. |img-16| image:: img-16.jpeg .. :align: left .. :border: 0 .. :height: 658 .. :id: Grafik8 .. :name: Grafik8 .. :width: 377 .. |img-17| image:: img-17.jpeg .. :align: left .. :border: 0 .. :height: 393 .. :id: Grafik7 .. :name: Grafik7 .. :width: 379