Search

What the Quote?

"It's unlucky to be superstitious."

Paul Hannan

"It's an enzyme that keeps you from farting when you eat chili."

Devin Olson

"Who does she think she is, a vending machine?"

Mike Koenig

« looking over Nathan's shoulder | Main| thoroughly disturbing »

SnTT: Lightbox image gallery for Notes

Category show-n-tell thursday
If you've listened to the latest episode of Yellowcast, you already know that I occasionally tinker with the (admittedly weak) JavaScript support in the Notes client, and today's SnTT showcases a few fun things it allows us to do at run-time during a button click, field event (i.e. onBlur), and various other events:

  • document.bgColor is read-write, allowing us to change the background of a page/form.
  • Button.value is read-write, allowing us to actually change the label of a button.
  • As mentioned on the podcast, we can call LotusScript and Formula from within JavaScript by simulating a click event on a hidden button containing that code.
Many of you are likely familiar with the Lightbox approach to displaying images and image galleries on a web page. For the first time, I was actually going to show and tell, using the video below to demonstrate how the aforementioned techniques can be used - in combination with layers and embedded editors - to create similar image galleries from within the Notes client. Sadly, I'm a CamStudio noob, and while the video recorded fine, the audio recorded at 4x speed, so hopefully the connection between the code and the resulting behavior is still obvious despite the silence. NOTE: since the video includes a code walkthrough (visually, anyway), you'll probably want to watch it in fullscreen mode... popcorn optional.



The example database shown in the tutorial is available for download... it's 11 MB, so it'll take slightly longer than most of my downloads, but the original version contained 36 wallpapers, which made the database 44 MB, so I figured 9 was enough to illustrate the point.

Comments

Gravatar Image1 - @Chris/Erskine/Jack, thanks for the feedback. I'm mostly hoping this sparks some ideas for "businessy" uses of JavaScript in the Notes client; there's seldom a true need for an image gallery in a Notes app context, but perhaps something like this could be a more pleasing interface for end user instruction materials... (sorry, "Using This Database", it was fun while it lasted, but we've just grown apart these last few years...)

Gravatar Image2 - Awesomely awesome!

Tim...great work and way to think outside (or is it inside) the box. Emoticon

I love it. A simple and elegant solution. You are a patient man, playing with JavaScript inside the client. If only we had full JS support...

I started messing around with an idea for this last year, and gave up because I wanted the transparent background/can't edit anything underneath to work. Unfortunately, I couldn't figure it out, but I did end up hiding everything and throwing a layer on top. The idea of changing the background color is nice.

As always, thank you for sharing!

Gravatar Image3 - Geez, that's pretty impressive. thanks for overview. I can't believe you didn't get a LOT of positive responsive for such a remarkable demo. Maybe I should just repeat this posting about 20 times.

Gravatar Image4 - Tim,

If you keep this up I am going to start calling you Santa Claus.

Great stuff.

E

Post A Comment

:-D:-o:-p:-x:-(:-):-\:angry::cool::cry::emb::grin::huh::laugh::lips::rolleyes:;-)