DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
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 |
EXT: Image Lightbox - Image Gallery - mbkdimagelightbox
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, <mail @markusbrunner-design.de, katja.deutschmann@gmx.de>
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¶
EXT: Image Lightbox - Image Gallery 1
`Introduction 3 <#Introduction|outline>`_
`Users manual 9 <#Users%20manual|outline>`_
Image Lightbox Plugin-Configuration 10
`Administration 11 <#Administration|outline>`_
`Configuration 12 <#Configuration|outline>`_
`Known problems 22 <#Known%20problems|outline>`_
`ChangeLog 23 <#ChangeLog|outline>`_
Introduction¶
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¶
Lightbox (mode 1)¶
Lightbox with JavaScript-Preview on Mouseover (mode 2)¶
Smoothgallery with internal thumbnails (mode 3)¶
Smoothgallery with external thumbnails (mode 4)¶
Contentflow (mode 5)¶
Popeye (mode 6)¶
Normal:
Hover:
Enlarged:
Variant 1 – Mode 2 – Nav Outside:
Variante 2 – Mode 3 – Normalized:
JqueryZoom (mode 7)¶
Galleriffic (mode 8)¶
Users manual¶
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.
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¶
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.
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¶
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¶
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¶
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:
((generated))¶
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¶
Extension TypoScript-Setup for “plugin.tx_mbkdimagelightbox_pi1.”
(properties “uset3mootools”, “maxWidth” [now maxW] and “maxHeight” [now maxH] are not supported any more!)
debug¶
Property
debug
Data type
integer
Description
0 = no debugging
1 = debug over devIPMask (defined in Install Tool)
Default
0
wrapinbaseclass¶
Property
wrapinbaseclass
Data type
integer
Description
Choose if the frontend plugin is wrapped with the standard extension wrapper: '<div class=”tx-mbkdimagelightbox-pi1”>|</div>'.
0 = disable wrapping
1 = enable wrapping
Default
1
useGoogleJSApi¶
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¶
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¶
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¶
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¶
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¶
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¶
Property
directory.glob_filetypes
Data type
string
Description
Define allowed image-file-patterns for glob()-function
Default
*.jpg,*.jpeg,*.gif,*.png
directory.readRecursive¶
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¶
Property
js.slimbox_starter
Data type
string (path)
Description
Define your own Slimbox-Starter.
- fileadmin/templates/scripts/js/myOwnSlimboxStarter.js;
Original Starter: EXT:mbkdimagelightbox/res/js/slimbox-1.71/js/startLightbox.js
Default
null
js.jquery_lightbox_starter¶
Property
js.jquery_lightbox_starter
Data type
string (path)
Description
Define your own jQuery-Lightbox-Starter.
- fileadmin/templates/scripts/js/myOwnjQueryLightboxStarter.js;
Original Starter: EXT:mbkdimagelightbox/res/js/jquery- lightbox-0.5/js/startJQueryLightbox.js
Default
null
js.smoothgallery_starter¶
Property
js.smoothgallery_starter
Data type
string (path)
Description
Define your own Smoothgallery-Starter.
- 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¶
Property
js.smoothgallery_starter_external
Data type
string (path)
Description
Define your own Smoothgallery-ExternalThumbs-Starter.
- fileadmin/templates/scripts/js/myOwnSmoothgalleryExtStarter.js
Original Starter: EXT:mbkdimagelightbox/res/js/jon1012-smoothgallery- 205a5d5/scripts/startGallery_alternative.js
Default
null
js.thumbzoomer_starter¶
Property
js.thumbzoomer_starter
Data type
string (path)
Description
Define your own Thumbzoomer-Starter.
- fileadmin/templates/scripts/js/myOwnThumbzoomerStarter.js
Original Starter: EXT:mbkdimagelightbox/res/js/thumbzoomer/js/thumbzoomer_starter.js
Default
null
js.jqueryzoom_starter¶
Property
js.jqueryzoom_starter
Data type
string (path)
Description
Define your own JqueryZoom-Starter.
- 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¶
Property
js.galleriffic_starter
Data type
string (path)
Description
Define your own Galleriffic-Starter.
- 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¶
Property
smarty.template_dir
Data type
string (path)
Description
Define your own Smarty-Template-Dir
- fileadmin/templates/smarty/
Default
null
smarty.compile_dir¶
Property
smarty.compile_dir
Data type
string (path)
Description
Define your own Smarty-Compile-Dir
Default
null
smarty.templates.pagebrowser¶
Property
smarty.templates.pagebrowser
Data type
string (path)
Description
Pagebrowser-Template (Smarty) [within smarty.template_dir]
- myPagebrowser.tpl
Default
pagebrowser.tpl
smarty.templates.lightbox_and_preview¶
Property
smarty.templates.lightbox_and_preview
Data type
string (path)
Description
Lightbox-Preview-Template (Smarty) [within smarty.template_dir]
- myLightboxPreview.tpl
Default
lightbox_and_preview.tpl
smarty.templates.lightbox_and_smoothgallery¶
Property
smarty.templates.lightbox_and_smoothgallery
Data type
string (path)
Description
Lightbox-Smoothgallery-Template (Smarty) [within smarty.template_dir]
- myLightboxSmoothgallery.tpl
Default
lightbox_and_smoothgallery.tpl
smarty.templates.lightbox_and_contentflow¶
Property
smarty.templates.lightbox_and_contentflow
Data type
string (path)
Description
Lightbox-Contentflow-Template (Smarty) [within smarty.template_dir]
- myContentFlow.tpl
Default
lightbox_and_contentflow.tpl
smarty.templates.popeye¶
Property
smarty.templates.popeye
Data type
string (path)
Description
Popeye-Template (Smarty) [within smarty.template_dir]
- myPopeye.tpl
Default
popeye.tpl
smarty.templates.jqueryzoom¶
Property
smarty.templates.jqueryzoom
Data type
string (path)
Description
JQZoom-Template (Smarty) [within smarty.template_dir]
- myJQueryZoom.tpl
Default
jqueryzoom.tpl
smarty.templates.galleriffic¶
Property
smarty.templates.galleriffic
Data type
string (path)
Description
Galleriffic-Template (Smarty) [within smarty.template_dir]
- myGalleriffic.tpl
Default
galleriffic.tpl
lightbox.usedefaultcss¶
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¶
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.*¶
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.*¶
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.*¶
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¶
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¶
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¶
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¶
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¶
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¶
Property
lightbox.pagebrowser.wrap
Data type
string (wrap)
Description
Determine the pagebrowser-wrapper. Separator is “|” as typically for TypoScript-Wrappers.
Default
<ul class="pagebrowser clearfix">|</ul>
lightbox.pagebrowser.link.classesTagName¶
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¶
Property
lightbox.pagebrowser.link.normalClasses
Data type
string
Description
CSS-class for normal (inactive) pages in pagebrowser.
Default
normal
lightbox.pagebrowser.link.currentClasses¶
Property
lightbox.pagebrowser.link.currentClasses
Data type
string
Description
CSS-class for current (active) page in pagebrowser.
Default
current active
lightbox.pagebrowser.link.disableCurrent¶
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¶
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
<span class="pagebrowser-page">|</span>
smoothgallery.usedefaultcss¶
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¶
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¶
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.*¶
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.*¶
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¶
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¶
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.*¶
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¶
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¶
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.*¶
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.*¶
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¶
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.*¶
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.*¶
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¶
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¶
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¶
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¶
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¶
Property
extensionaccess.extKey
Data type
string
Description
Extension-Key of using extension
Default
mbprojects
extensionaccess.imgPath¶
Property
extensionaccess.imgPath
Data type
String (path)
Description
Upload-Path for files of extension
Default
uploads/tx_mbprojects/
extensionaccess.selectmode¶
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¶
Property
extensionaccess.imagesetname
Data type
string
Description
Image set name (if empty no imageset in lightbox)
Default
extensionaccess
extensionaccess.imagetitles_in_lightbox¶
Property
extensionaccess.imagetitles_in_lightbox
Data type
integer
Description
Show Image-Titles also in lightbox
Default
1
extensionaccess.hidepagebrowser¶
Property
extensionaccess.hidepagebrowser
Data type
integer
Description
Hide Pagebrowser (override of TS-Settings)
Default
1
extensionaccess.imagewrapperhtmlwrap¶
Property
extensionaccess.imagewrapperhtmlwrap
Data type
string (wrap)
Description
Image wrapper: wraps a single image
Default
|
extensionaccess.imagesetwrapperhtmlwrap¶
Property
extensionaccess.imagesetwrapperhtmlwrap
Data type
string (wrap)
Description
Image set wrapper: wraps around all images
Default
|
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¶
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)¶
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 <div class="tx_mbkdimagelightbox_pi1">|</div> 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 = <ul class="pagebrowser clearfix">|</ul>
# 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 = <span class="pagebrowser-page">|</span>
}
}
}
# 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¶
- 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)!