It's time to get great presentations on your content, it's time to free your creativity and show to the world your amazing galleries, it's time to Banzai! SS Gallery


Syntax:

{bss_gallery [width],[height],[autoplay],[showinfo],[carousel],[transition]}[gallery_file]{/bss_gallery}


Each Parameter is defined by:
[width]: Optional - Width of the gallery in for example 800px, 100%, 12in etc
[height]: Optional - Height of the gallery You can set an exact value, f.ex 200, and it will apply this exact height in pixels. You can also set a relative ratio value which is anything below 2. If you set a relative ratio value, the gallery height will be calculated by multiplying this value with the width at any given scaling process.
[autoplay]: Optional - Set the miliseconds to wait until the next automatic transition (default 5000), to deactivate set false
[showinfo]: Optional - Define if you want to show the information of the images, default true, to deactivate set it as false
[carousel]: Optional - You can hide the carousel of thumbnails with this parameter, default true to deactivate it set it false
[transition]: Optional - Choose 1 of 5 amazing animations, Default: fade But you can use:

  • 1 - fade: crossfade betweens images
  • 2 - flash: fades into background color between images
  • 3 - pulse: quickly removes the image into background color, then fades the next image
  • 4 - slide: slides the images depending on image position
  • 5 - fadeslide: fade between images and slide slightly at the same time


[gallery_file]: Mandatory - The file that contains the gallery information, this file MUST exist on the directory: /media/bss_gallery/galleries/

The gallery_file is just a txt file that contains the information that the gallery will take, sounds complex? is not, you need it an easier way? we are working on that! (just need a bit more of time), the structure of this file couild be as follow:

{
	video: 'https://www.youtube.com/watch?v=PjvhsEg_OFE',
	title: 'My first title',
	description: 'My frist description'
},
{
	video: 'https://vimeo.com/200658247',
	title: 'My second title',
	description: 'My second description'
},
{
	video: 'http://www.dailymotion.com/video/x3mi3qi_best-of-vocal-deep-house-music-chill-out-2015-3_music',
	title: 'My third title',
	description: 'My third description'
},
{
        image: '/j35/images/galleria/normal-1.jpg',
        thumb: '/j35/images/galleria/small-1.jpg',
        big: '/j35/images/galleria/big-1.jpg',
        title: 'my first image',
        description: 'Lorem ipsum caption',
        link: 'http://banzaiss.com'
},
{
        image: '/j35/images/galleria/normal-2.jpg',
        thumb: '/j35/images/galleria/small-2.jpg',
        big: '/j35/images/galleria/big-2.jpg',
        title: 'my second image',
        description: 'Lorem ipsum caption',
        link: 'http://banzaiss.com'
},
{
        image: '/images/galleria/normal-3.jpg',
        thumb: '/images/galleria/small-3.jpg',
        big: '/images/galleria/big-3.jpg',
        title: 'my third image',
        description: 'Lorem ipsum caption',
        link: 'http://banzaiss.com'
},
{
        image: '/images/galleria/normal-4.jpg',
        thumb: '/images/galleria/small-4.jpg',
        big: '/images/galleria/big-4.jpg',
        title: 'my forth image',
        description: 'Lorem ipsum caption',
        link: 'http://banzaiss.com'
},
{
        image: '/images/galleria/normal-5.jpg',
        thumb: '/images/galleria/small-5.jpg',
        big: '/images/galleria/big-5.jpg',
        title: 'my fivth image',
        description: 'Lorem ipsum caption',
        link: 'http://banzaiss.com'
}

Notice that what you need to set is the kind of element video or images, for the case of video you will notice that you have a block like this:

{
	video: 'https://www.youtube.com/watch?v=PjvhsEg_OFE',
	title: 'My first title',
	description: 'My frist description'
}

To include videos you need to set 3 parameters:

  • video          - Is the url of the video that you want to include, supported sources are: YouTube, Vimeo and DailyMotion
  • title            - Set the title that you want for the video
  • description  - Want to show a description for the video? Add it on this parameter

 For the case of images you need to add them using a block like this:

{
        image: '/images/galleria/normal-1.jpg',
        thumb: '/images/galleria/small-1.jpg',
        big: '/images/galleria/big-1.jpg',
        title: 'my first image',
        description: 'Lorem ipsum caption',
        link: 'http://banzaiss.com'
}

What you need to indicate is these:

  • image         - The path to the image that you want to show
  • thumb        - You can use the same path that on image parameter but we strongly recomend to set another image in a smaller size to get a better performance
  • big             - You can use the same path that on image parameter but we strongly recomend to set another image in a bigger size to get a better experience, this is the one that is show on fullscreen
  • title            - Have a name for you image? Here you can set it
  • description  - Have more to comment? Set the description of the image on this parameter
  • link             - In additional, if you want to rediret to another place, here you can set the url


Example:

{bss_gallery 100%,0.5625,7000}gallery.txt{/bss_gallery}

Here is the result of the configuration:

Last modified on Tuesday, 02 January 2018 18:01

Related items

Follow Us

  

Joomla! is Free Software released under the GNU/GPL License. Joomla is a trademark of Open Source Matters and the name is used under a limited license from Open Source Matters in the United States and other countries. Banzai! Software Solutions is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.