• Home
  • /
  • Blog
  • /
  • [T3EXT DAY] All in One Lightbox/Modalbox

[T3EXT DAY] All in One Lightbox/Modalbox

 

[T3EXT DAY] All in one Lightbox/Modalbox (EXT:ns_all_lightbox)

What is "All In One"?

Exactly, What's All in one Lightbox/Modalbox? Well, We have developed one TYPO3 extension which allows install & configure multiple OpenSource jQuery Lightbox/Modalbox.

Why this TYPO3 extension developed?

In our routine life in TYPO3 project's development, Mostly each client wants different (effect & style) lightbox plugin to setup on their project. So, We have developed one extension which provides all together with a just setup of plug & play. And we thought, Let's just share it to TYPO3 community which may useful for their TYPO3 projects.

Which plugin are included?

It's one of the only TYPO3 extension which provides to configure most popular jQuery plugins eg., lightbox2, fancybox2, colorbox, prettyphoto, darkbox, magnific-popup & more will be available in an upcoming version.

1. Overview:

Extension Key: ns_all_lightbox
Extension URL: https://typo3.org/extensions/repository/view/ns_all_lightbox
Documentation: https://docs.typo3.org/typo3cms/extensions/ns_all_lightbox/
Support: https://forge.typo3.org/projects/extension-ns_all_lightbox/
Version: 1.0.0
Category Frontend Plugin
TYPO3 (7.0.0 - 8.9.9) fluid_styled_content

2. Live demo & Screenshots:

Checkout this online TYPO3 extension demo http://typo3-demo.nitsan.in/index.php?id=13

TYPO3_All_In_One_Lightbx_Modalbox_Extension_NITSAN_Frontend_Live_Demo_Preview

3. Installation:

The extension needs to be installed as any other extension of TYPO3 CMS:

3.1. Install Extension from EM:

  • Switch to the module “Extension Manager”
  • Get the extension
  • Get it from the Extension Manager: Press the “Retrieve/Update” button and search for the extension key ns_all_lightbox and import the extension from the repository.
  • Get it from typo3.org: You can always get current version from http://typo3.org/extensions/repository/view/ns_all_lightbox/current/ by downloading either the t3x or zip version. Upload the file afterward in the Extension Manager.

TYPO3_All_In_One_Lightbx_Modalbox_Extension_NITSAN_Backend_Install_Extensions

3.2. Preparation: Include static TypoScript:

The extension ships some TypoScript code which needs to be included.

  • Switch to the root page of your site.
  • Switch to the Template module and select Info/Modify.
  • Click the link Edit the whole template record and switch to the tab Includes.
  • Select Content Elements (fluid_styled_content) at the field Include static (from extensions):
  • Select [NITSAN] All In One Lightbox/Modalbox (ns_all_lightbox) at the field Include static (from extensions):
  • IMPORTANT: About ordering, Please include this at the end of others.

TYPO3_All_In_One_Lightbx_Modalbox_Extension_NITSAN_Backend_Include_Static_Template

4. Configuration

4.1. Options to choose particular lightbox/modalbox

  • Switch to the root page of your site.
  • Switch to the Template module and select Constant Editor.
  • Select Category = PLUGIN.TX_NSALLLIGHTBOX (1)
  • Now, You can choose particular jQuery lightbox/modalbox plugin from [plugin.tx_nsalllightbox.settings.type]. Checkout below screenshot.
  • Note: You may able to configure it to particular page using "Create extension template".

TYPO3_All_In_One_Lightbx_Modalbox_Extension_NITSAN_Backend_Select_Lightbox_Modalbox_Effect_Type

4.2. Behavior: Enlarge on Click [Checkbox]

  • You can 'only' setup "Text & Media" TYPO3 Elements. (Because we have setup everything with fluid_styled_content)
  • Go to Images tab & Click on "Enlarge on click" checkbox. Checkout below screenshot.

TYPO3_All_In_One_Lightbx_Modalbox_Extension_NITSAN_Backend_Select_Enlarge_on_Click

Clear Cache:

Please, clear cache from top panel 'Flush frontend caches' & 'Flush general caches'. It will be also great to clear cache from Install tool too.

5. Support:

Feedback & Suggestions:

Just download & try the EXT:ns_all_lightbox extension. You can write down your feedback/suggestion/comments to below comment box. Please feel free to use suggest any new lightbox/modalbox too, so we will adapt it for next version of EXT:ns_all_lightbox.

Happy with all lovely Lightbox/Modalbox :)

 

Sanjay Chauhan - TYPO3 Technopreneur

Sanjay Chauhan - TYPO3 Technopreneur

A young technology enthusiast and entrepreneur. At 24, he co-founded NITSAN – a TYPO3 Agency in Bhavnagar, India. He is sought-after marketing face of NITSAN, is accredited with the management of customer-service teams, collaborations with agencies and clients, projects executions, and more. A tech guy in every sense of the word, Sanjay is the real TYPO3 Guru at NITSAN.


Leave A Comment

Read Also