Lightbox Slider Gallery Joomla plugin is a simple but powerful plugin to help you create a slideshow and gallery in your Joomla website. Different from other plugin or extension, Lightbox Slider Gallery plugin doesn't need complicated configuration. By copy and paste one piece of code, you can generate a slideshow or gallery in any articles in your website. If you are still building galleries or slideshows by uploading and adding photos one by one, I believe it must be a headache problem when you have dozens of photos. With Lightbox Slider Gallery plugin, there are only two steps to create a slideshow or gallery. First, you upload all photos in one folder. Second, copy and paste a piece of code in your article. Job is done.
Lightbox Slider Gallery is built with Light Box. All your photos in Lightbox Slider Gallery will be viewed in light box. By default, the Lightbox Slider Gallery is compatible with Joomla 2.5x and Joomla 3.x. This user guide will show you how to install the Lightbox Slider Gallery and how to create gallery or slideshow within 5 minutes.
View Demo Site
Install LightBox Slider Gallery Plugin
LightBox Slider Gallery is a standard Joomla plugin. The installation is very simple. After you downloaded the plugin file, please follow these steps to install it on your website:
- Go to Extension Manager
- Click Install Tab on the left menu
- Click "Upload Package File" tab on the right panel
- Click "Browse" button on install page
- Select "lightboxslidergallery_plugin.zip"
- Click Upload & Install button
Enable LightBox Slider Gallery Plugin
After you successfully install the plugin, please follow these steps to enable it on your website:
- Go to Plugin-in Manager
- Search plugin-in by name "Lightbox Slider Gallery"
- Enable Lightbox Slider Gallery plugin by click "red cross" button
Configure LightBox Slider Gallery Plugin (Optional)
If your Joomla website is hosting on the sub-domain, you need to configure the setting "Website Root URL". This step is optional. For example, if your domain is http://www.html5components.net, but your website is hosting on http://www.html5components.net/joomla30/. Then you need to set "Website Root URL" as http://www.html5components.net/joomla30/. Please follow these steps to set this option:
- Go to Plugin-in Manager
- Search plugin-in by name "Lightbox Slider Gallery"
- Click on the plugin name
- Input your website root url
- Click save and close
Create Slideshows By LightBox Slider Gallery Plugin
Now you can start to create slideshows or galleries in your Joomla website. Please follow these steps to generate a slideshow in your article:
- Upload all your photos in one folder in your Joomla website (by Media Manager in your administrator backend)
- Copy and paste following code into your article
{lightgallery style=slider type=local path=images/lightgallery galleryName=Demo sliderItems=3 sliderWidth=650px itemSpace=3px sliderAutoPlay=false}Slider With Bullet Navigation Button{/lightgallery}
The above code will tell LightBox Slider Gallery to generate a slideshow by using photos in folder images/lightgallery on your website. The slider width is 650px. It will show 3 photos at a time. The auto play feature is disabled. The slideshow uses the bullet navigation style by default.
Create Slideshows With Number Style Page Navigation
Copy and paste the following code in your article to generate a slideshow with number page navigation.
{lightgallery style=slider type=local path=images/lightgallery galleryName=Demo2 sliderItems=3 sliderWidth=650px itemSpace=3px sliderPaginationNumber=true sliderAutoPlay=false}Slider With Numbe Navigation Button{/lightgallery}
Create Jumbotron Style Slideshow With Auto Play Feature Enabled
With following code, you can generate a Jumbotron style slideshow in your article.
{lightgallery style=slider type=local path=images/lightgallery galleryName=Demo3 sliderItems=1 sliderWidth=650px sliderPagination=false sliderAutoPlay=3000}Auto Play Jumbotron{/lightgallery}
The above Jumbotron slider will play the photos every 3 seconds. All page navigation button is hidden.
Create Gallery By LightBox Slider Gallery Plugin
You can also use LightBox Slider Gllaery Plugin to generate grid style gallery in your articles. The steps are the same as how you generate the sliders. You can copy and paste following code to insert a grid style gallery:
{lightgallery type=local path=images/lightgallery galleryName=Demo4 previewWidth=150 itemSpace=3px}Normal Gallery{/lightgallery}
The above gallery will generate a gallery by using photos in folder images/lightgallery on your website. The preview width will be 150px.
LightBox Slider Gallery Options
- style: the only value is "slider", make sure the gallery enable slider feature
- type: the value could be "local" or "url"; "local" indicates the plugin to build gallery with images in local server; "url" indicates the pluign to build gallery with image remotely
- path: when "type" is local, the plugin will buil gallery with images in local server on the given path, the value is relative path to website root folder
- galleryName: the value is a string value, the name of gallery, which logically groups the images with the same gallery name
- sliderItems: the value is a number, the number of images to shown in the slider gallery
- sliderWidth: the value is a number with unit, e.g. "165px", the total slider width
- itemSpace: the value is a number with unit, e.g. "10px", the space between each image in the slider gallery
- sliderAutoPlay: the value is true or false, control if the gallery shall be auto play
- sliderPagination: the value is true or false, control if the gallery shows the navigation buttons
- sliderDotPagination: the value is true or false, control if the gallery use dot style navigatio buttons when sliderPagination is true
- previewWidth: it's optional. The value is number, control the preview width of image in slider gallery. (Be careful, it could make preview image width height ratio in mistake.)
- previewHeight: it's optional. The value is a number, control the preview height of image in slider gallery. (Be careful, it could make preview image width height ratio in mistake.)