Fullscreen Image Gallery 1.9

Download

Installation

After successful UNZIP of the file  FullScreenImageGallery_UNZIP you will find the module zip file, the plugin zip file and the ReadMe.txt file inside the folder.

  • For Joomla 3.x Module install : mod_fullscreen_gallery3..x_vX.x.zip
  • For Joomla 3.x Plugin install : plg_fullscreen_gallery3..x_vX.x.zip

Go to Extensions > Extension Manager and click on the Upload Package File Tab.

Click on browse to choose the correct installation file and click on "Upload and Install"

Image Settings

After installation go to Extensions > Module Manager and open FullScreen Image Gallery. You will find the following options in the Images tab.

  • Image Source : Option to select the images from a folder or assign images using the slides. In the slides option you can add individual caption for the images.
  • Select a folder: You can only find the option when you select the Image source as Folder. Just select the folder from where you would like to fetch the images.
  • Resize Thumbnail By : Option to resize the thumbnail of the gallery either by height, width or both.
  • Thumb Height : Height of the thumb in pixels. You don' t have to mention px in this field. Just number like : 150 which means 150 pixels.
  • Thumb Width : Width of the thumb in pixels. You don' t have to mention px in this field. Just number like : 120 which means 120 pixels.
  • Sort Image : You can sort the images of the gallery by ascending, descending or by random.
  • Slides : The field will be visible when you select the image source as Slides. Once you select the image source as slides you will be a select an image and the add a caption to it.

Styling Settings

  • Overlay Controls Color : Select the color of the overlay control
  • Overlay Color : Option to select the color of the overlay.
  • Thumbnail Padding : You can add padding around the thumbnail image. Example : 10 which means 10 pixels. Don't add px to the field.
  • Thumbnail Margin : You can also add margin around the thumbnail like padding. Example : 15 which means 15 pixels. Don't add px to the field.
  • Thumbnail Border : Thickness of the thumbnail border. Example 2, which means 2 pixels thickness around the thumbnails. You can add 0 if you don't want any border.
  • Thumbnail Border Color : Select the color of the border.
  • Thumbnail Overlay Layer : Option to show or hide the thumbnail overlay layer. Set to hide if you don't want to show the layer on hover.
  • Select Caption Font : Option to set a google font, user defined font or the site default font.
  • Font : Enter the name of the font.
  • Title Background Color : Select the title background color of the gallery.
  • Title Color : Option to select the title color.
  • Title Font Size : You can add the font size of the title. Example : 18, which means 18 pixels.
  • Title Font Weight : Option to set the font weight to normal or bold.

Advanced

  • Include jQuery Files : Incase of any jQuery related issues it is recommended to load the JS in body instead of head.
  • Add Extra CSS : You can add extra css directly by adding into this field.

Plugin Shortcode

If you are using the content plugin you can use the following two syntax.The content plugin can be used inside Joomla Articles or Custom Module.

To fetch from folder :

{fullscreen folder="images/woo" thumbheight="100" thumbwidth="100" width="100%" padding="2"}{/fullscreen}

The above shortcode accepts the following attributes.

  1. folder : Set the path of your images folder. Example : folder="images/woo"
  2. thumbheight : Set the height of the thumbnail image. Don't use px. Example : thumbheight="100"
  3. thumbwidth : Set the width of the thumbnail image. Don't use px. Example : thumbwidth ="100"
  4. padding : You can set the padding around the thumbnail. Example : padding="2" which means 2 pixles.

Fetch Individual Images with Title

{fullscreen image="images/woo/1.jpg,images/woo/2.jpg,images/woo/3.jpg" title="Title1,Title2,Title3" thumbheight="100" thumbwidth="100" }}{/fullscreen}

The above shortcode accepts following attributes:

  1. image: Set the complete path of the individual images.
  2. title : Set the title of the images sequentially like the images.
  3. thumbheight : Set the height of the thumbnail image. Don't use px. Example : thumbheight="100"
  4. thumbwidth : Set the width of the thumbnail image. Don't use px. Example : thumbwidth ="100"
  5. padding : You can set the padding around the thumbnail. Example : padding="2" which means 2 pixles.

 

The plugin settings are settings are same as the module settings as mentioned above.

Troublesettings

 

  • If the gallery doesn't load then in the Advanced tabs first try to set the Include Js file to Body instead of head and see if it starts working.
  • Check if the images path are correct.
  • Check properly that you have activated the module in an existing template position.