Implementing Smoothgallery into a Domino application

2009-March-20 at 6:23 pm · Filed under @Formula, Applications, JavaScript, Lotus Domino

It was a while since I opened my Designer client for developing a new project due to other responsibilities. At this time I am prototyping a basic Notes application where users can upload images via the Notes client and browse through them via a Web browser.

So what is the status? Well in a couple of days I have come pretty far:

 

• a project name for the application (you have to start with something)
• upload (of multiple ) images via the Notes client and automatically creating thumbnails – checked
• a nice interface for the Notes client – checked
• an attractive layout for the Web client – checked
• a lightbox function for display the high resolution images with a faded application in the background – checked
• different ways to navigate trhough the application (by categorie, tags, by author, archive, calendar) – checked
• additional features as RSS, simple search, option to leave comments – checked
• login function so a user can easily see his/hers contributions – checked

 

In the startpage I have the following features:

 

• a sliding gallery based upon Smoothgallery more about this later 
• overview of the last 3 added pictures
• an overview of the last 3 comments
• an archive overview
• a section with some contact information

 

Well I still have something left in my wishlist:

• XPaginate (is that correct?) the application ofcourse haha
• add an option to send email to people with a link of the image
• upload functionality from the Web client
• improve the search functionality (at this point it searches a view)
• … some more spice probably

Smoothgallery

Well this post is about the Smoothgallery which was really easy to implement. The gallery has the follwoing functions:

• a (main) slider for showing medium sized images, with previous and next image function
• a slider for showing thumbnails, this slider has a mouse-over sliding function
• some text / description that will be displayed as a layer on top of the current image in the (main) slider

Let me start by showing you some end-result, here is an image of the gallery as it will be presented by default. I marked the 3 sections described above:

 

gallery image

 

So how did I get this to work?

Start coping the files under the directories CSS, Images and Scripts in the download to your Shared Resources \ Files section. The gallery uses the  MooTools JS Framework.

To get the files loaded add the following references in your HTML Head Content:

 

html head section

Add also the following JS function somewhere on your form:

 

JS Function

And drop the follwoing code where you want to have the gallery displayed:

 

gallery position

The Computed Text is a @DbColumn to a view:

@Implode(@DbColumn(“”:”";”":”";”$v-pixsmoothgallery”;1))

On the view we say we want to have its content to be displayed as HTML and the view has only one column with the following code:

 

formula in column

(My upload agent creates 3 kind of images for each upload: 1) the original size 2) a medium size 3) a thumbnail size. You can forget the firstline here in the code)

Is that’s it? Yeah! In practically half an hour job I had the complete gallery up and running.

Here are some screendumps of the app:

Just let me know if you are interested in more code-drops…

About these ads

Permalink