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

Born in Holland, current country of residence is Sweden. IBM Notes Consultant since 1997. Main focus is Xpages development. Other interests: computers, motorcycles, music (bass guitar) & cooking.

Posted in @Formula, Applications, JavaScript, Lotus Domino
3 comments on “Implementing Smoothgallery into a Domino application
  1. Michael says:

    share the DB?

  2. Mike Amberg says:

    The first gallay image is not working.

  3. […] a comment » For my ‘photogallery’ application I got a bit tired of the Smoothgallery implementation. Basically I was looking for sometime more attractive and less ‘busy’. That is when I […]

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

Introduction
I am Patrick Kwinten. I am a IBM Notes Domino Product Specialist since 1996. With this blog I am trying to give my contribution to the community.

The posts in this blog project my personal opinions, not the company I work for.
.

C U in Orlando

ibmconnected

CV
OpenNTF
Follow my projects on OpenNTF. Below are some examples:

Categories
RSS Feed
Follow

Get every new post delivered to your Inbox.

Join 245 other followers

%d bloggers like this: