Home Joomla SmoothGallery
SmoothGallery + LightBox
Written by Stacy Coil   
Tuesday, 17 February 2009 11:12
Article Index
SmoothGallery + LightBox
Getting Started
Examples
History
Credits
Mostly Original Page
All Pages

Introduction

SmoothGallery + LightBox Joomla plugin is a combination of 2 scripts packaged together: SmoothGallery by Jonathan Schemoul and Slimbox by Christophe Beyls.

This a re-release of what I found in the extension directory for 1.5.

I waited for someone to implement Smooth Gallery + Lightbox from Oscandy.com for Joomla 1.5. When I finally found it, I tried it; but it is severely broken. I've fixed it as best as I can.


Getting Started

Use the following instructions to quickly start using SmoothGallery + LightBox on your website.

1. Download the plugin.

2. Install it on your Joomla site.

  • Log in to the Joomla administrator panel. 
  • Click on Extensions -> Install/Uninstall.
  • Upload file & install the zip file.
    note: If you installed the smoothgallery2 plugin, remove it first!

3. Enable the plugin.

  • Click on Extensions -> Plugin Manager
  • Click on Content - SmoothGallery Plugin
  • Enable and Save
    note:  change the default light box height and width to your liking

4. Upload your pictures to your folder of choice.

5. Add {smoothgallery folder=your folder of choice} to your code.


Examples

The following are some examples of how I use smooth gallery.  This should help you get started.  If you would like to see it in action, check out beta.InvitationToDance.com/Gallery/gallery.html.


Slide show of a folder

{smoothgallery folder=images/stories/planes}


A single image

{smoothgallery image=images/stories/thestudio.jpg&title=InvitationToDance.com&caption=Our dance studio from above}


Slide show of a Picasa Web Album by Album Name

{smoothgallery username=sdcoil&album=StacyAndDana}


Slide show of a Picasa Web Album by Album ID

{smoothgallery username=sdcoil&albumid=5306877643460906433}

note: make sure to set the album on Picassa Web as public.


Slide show using the Ultimate Gallery Manager

{smoothgallery album=1&timed=true&delay=5000}


Turn off SmoothGallery for a single page.

{ smoothgallery off}

note: remove the space between { and smooth

To find out about more options, read on.


History

The following are the changes I have made, what I would like to do, and problems that need to be fixed.  If you have any suggestions, feedback, patches, requests, etc, please contact me or use the Joomla forums.

Version 1.5

Marc's version is 2.0, but after looking at the code, I reverted my version back 1.5.  It is just a port to Joomla 1.5.x with some minor new features.  When I rewrite it for the new MVC model and upgrade the SmoothGallery scripts, I'll change the version to 2.0.

Changes

  • Fixed get single image
  • Fixed get folder images (didn't always read the info)
  • Fixed get UGM Album
  • Fixed data access in plugin
  • Fixed get picassa web albums
  • Add get picassa web albums by id
  • Add a shutoff feature
  • Fixed problem with upper case extensions

To Do

  • Fix pictures form menu feature
  • upgrade SmoothGallery script to 2.1dev
  • add new features of SmoothGallery Script
  • read text file with description for getImagesFromFolder
  • Fix escaped special characters in caption

Known Problems

  • Slide show from menu doesn't work
  • Special characters are escaped in captions
  • Galleries from Picassa Web sometimes have to load twice
  • The off feature seams to replace more than once

Credits

A big thanks goes out to Jonathan Schemoul and Christophe Beyls who wrote SmoothGallery and Slimbox respectively.

Thanks to the people at osCandy for writing the original mambot for Joomla 1.0.x.

Thank you to Marc Stroz of phpaugusta.com for porting the mambo to Joomla 1.5.x.


The Mostly Original Page

The following is the original page from osCandy.  I've only made a few minor changes (remove the Google ads, etc.)

SmoothGallery + Lightbox Mambot Instructions

SmoothGallery + Lightbox Joomla Mambot is a combination of 2 scripts packaged together for your convenience. Namely, SmoothGallery by Jonathan Schemoul and Slimbox by Christophe Beyls.

See Gallery in Action

beta.InvitationToDance.com

Credits

First and foremost, I have to thank Jonathan for all of this help. A side from making SmootGallery, he has been patient with me going crazy about IE errors and all other Mootools related stuff. Jonathan also created the close button for me. Thank you. Next, I gotta thank Valerio for giving us a great framework to make this possible. I have to thank Christophe Beyls for making Slimbox, without which Slightbox - lightbox for smoothgallery, would not be possible. Last but not least, I have to thank Azzam for making the great box image for SmoothGallery Joomla Mambot and for all your support. Thank you!

Why Smoothgallery + Lightbox Joomla Mambot?

This product follows my experience with Couloir Module for Joomla. It was a great ride, but it was bloated and inflexible. I've taken everything that I learned from that gallery and put it into this Mambot. It has every feature that everyone ever asked for and it's intended to be extremely easy to use.

How easy to use is it?

Well, extremely. The syntax is easy, most of the time {smoothgallery} in your content text is enough to trigger creation of a gallery. It utilizes Mosimage setup feature, so you don't have to go into a different component to manipulate your image description. It also can generate a gallery from a folder and extract title and description from image IPTC Caption and Title.

What else should I know?

It's extremely customizable. Jonathan's original code had 28 options, I added at least 15 of my own. (But you don't need to manipulate any of them, they are completely optional)

Installation Instructions

  1. Install the mambot
    1. Log into your Joomla administration page
    2. Go to Installers->Mambots
    3. Browse and point to the downloaded file
    4. Hit Upload and Install File
    5. It should say Mambot installed successfully
  2. Go to Mambots->Site Mambots
  3. Find SmoothGallery & go into it
  4. Publish it from here and hit save Important

How to Install on Frontpage

To make the gallery works on the front page you need to add some code to your template. This is because there is a problem with Joomla Frontpage Caching. For some reason, joomla does not cache the head on Frontpage, so your mambot will load all of the images but the javascript and css will not load. This is why you need to do this.
This goes right before /head in your index.php template file.

Copy and paste code from this text file into your template right before /head tag

note: I don't think the above code will work with Joomla 1.5. If you need it, let me know.

How do I use it?

There are many different ways to use this mambot, here are some of the most important once.

Gallery from Ultimate Gallery Manager(UGM)

We wrote Ultimate Gallery Manager to make it easier for you upload and manage galleries. This is the easest way to create slideshows.

You need to a flashplayer enabled browser to view this YouTube video

 

example: {smoothgallery album=1} (1 is the album id, it's in top left corner of each gallery in UGM)

Images from Folder

This option will generate a gallery from a folder. It will select all .jpg, .png, and .gif files and include them in the gallery. The title and caption will be generated from IPTC title and caption, respectively. If IPTC information is not present, the file name will be used as caption.

example: {smoothgallery folder=images/stories/fruit}

Important Parameters
sort - parameter that's unique to folder parameter - specifies what order the images from the folder will be displayed in

  • random - images will be in random order * will change at every refresh
  • asc - images will be sorted in ascending order
  • desc - images will be sorted in descending order
example: {smoothgallery folder=images/stories/fruit&sort=random}

Images from Images Tabs (Mosimage)

This will include all images that you have added in Mosimage Setup. The mambot will use Alt Title as Title in the Gallery and Caption as Caption underneath the title. All other options in Mosimage Setup are not used, changing them will not make any difference to the mambot. If you use this option, {smoothgallery} is sufficient to trigger the mambot to generate a gallery. If you do not specify an Alt Title or Caption, these options will be taken from IPTC Title and Caption, respectively. If you would like to use Mosimage Mambot and SmoothGallery Mambot at the same time, then you need to change the order of mambot loading so SmoothGallery Mambot loads before Mosimage mambot.

example: {smoothgallery}

Individual Image with lightbox

This option will allow you to show an image with a lightbox and a pretty caption. Also, you can specify width and height as you would on any other gallery

example:{smoothgallery image=images/stories/folder/image.jpg&title=Nice title&caption=Nice caption}

Individual image with link

This option will allow you to show an image with a pretty caption and on click the user will be taken to the website you specify in the link. Also, you can specify width and height as you would on any other gallery

example:{smoothgallery image=images/stories/folder/image.jpg&title=Nice title&caption=Nice caption&link=http://www.oscandy.com}

Gallery from Menu

This option is a bit tricky and it's a first time I'm trying this, so we'll see how you like it. This will generate a gallery from a menu that you create. Menu image will be shown in the gallery and the title of the menu item is the title of the image, link in the menu is link.

{smoothgallery menu=yourgallerymenu&caption=click on image to go to gallery}

What is the syntax?

{smoothgallery} in content intro text or full text is enough to trigger the mambot to generate a gallery Mosimage Setup and using default settings. If you would like to add options, separate options with &, for example: {smoothgallery alignment=left&timed=true}

You can see more examples of syntax on Syntax Demo

What can I customize?

Please note:
1. You must seperate parameters with & symbol ie {smoothgallery id=someid&timed=true}
2. Parameter order does not matter
3. I do not recommend spaces between parameters even though it might work.

You can customize your gallery using parameters that you specify when you write the content. There are 2 types of parameters, mambot parameters and SmoothGallery parameters. Mambot parameters will specify how the gallery is displayed on the page and where the images are taken from. SmoothGallery parameters allow you to configure mechanics of the gallery.

SmoothGallery Parameters

showArrows true or false : default true
showCarousel true or false : default true
showInfopane true of false - contains Title and Caption : default true
thumbHeight in pixels : default 75
thumbWidth in pixels : default 100
thumbSpacing in pixels : default 10
embedLinks true or false : default true
fadeDuration in milliseconds : default 500
timed true of false - makes automatic slideshow: default false
delay in milliseconds : default 9000
preload true or false - preload next image : default true
slideInfoZoneOpacity ratio : default 0.7
carouselMinimizedOpacity ratio : default 0.4
carouselMinimizedHeight in pixels : default 20
carouselMaximizedOpacity ratio : default 0.7
useThumbGenerator true or false : default false * (actually by default the mambot generates thumbs, but this is referring to using an outside thumb generator. If default works for you, I don't recommend that you waste your time with this.)
thumbGenerator path to thumb generator : default 'resizer.php' (default will not work. refer to above comment for useThumbGenerator. Also if you choose to use this option you need to specify complete path, such as http://www.somesite.com/

Mambot Parameters

width in pixels : default "460"
height in pixels : default "345"
lightbox true or false : default "true" this is for center link
alignment left, right, center : default "center"
sort random, asc, desc : default "asc"

Examples

Here are few examples of passing parameters to the SmoothGallery Mambot.
Example 1: Let's say you want to create a slideshow where images change at time interval. You would use {smoothgallery timed=true}
Example 2: Now, let's say you wanted to turn off Lightbox. Then you would use {smoothgallery timed=true&lightbox=false}, see how that works?
All you have to do is loop up the parameter in the table above and include in your parameter string.
Example 3: Let's say you want to get images from a folder, then you would use {smoothgallery folder=images/stories/foldername}, if your Joomla installation is in a subfolder then your string would look like this {smoothgallery folder=subfolder/images/stories/foldername}.
Example 4: Let's say you want to create a timed slideshow from a folder without lightbox and arrows, {smoothgallery folder=images/stories/foldername&lightbox=false&showArrows=false&embedLinks=false&timed=true}

If you haven't already done so, please go to my page on extensions.joomla.org to review and vote for this mambot. It's extremely important. Thank you

Last Updated on Sunday, 01 March 2009 16:44
 
If you like the Joomla! port of SmoothGallery + LightBox and the Ultimate Gallery Manager, please consider making a donation.