Print this page

Banzai! SS Gallery Plugin

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