Implementing Smoothgallery into a Domino application

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
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
html head section

Add also the following JS function somewhere on your form:

 

JS Function
JS Function

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

 

gallery position
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
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:

bildr06

bildr07

bildr08

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

About these ads

3 thoughts on “Implementing Smoothgallery into a Domino application

  1. Michael 2009-March-20 / 9:27 pm

    share the DB?

  2. Mike Amberg 2009-March-22 / 10:19 pm

    The first gallay image is not working.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s