To make a photo album even more memorable, it’s a good idea to mix some text within the visuals. This technique grabs the visitor’s attention and guides them through the adventure much better than pictures alone. Even though pictures can have a caption below them, showing standalone text is much more focused.
Mixing custom pages – like text clips – with thumbnails on the index page has been a unique feature of our Story skin since the beginning, but since version 8, the skin can display them in the lightbox too. Just as the mixed content appears when you scroll down the page, it now shows during a slideshow too.
Here’s the album I built: How to spice up a story
Let’s go through the steps of creating such a slideshow
The obvious first step is creating a new album. Select Story skin, and your preferred style. I have disabled the Continue button and enabled the Slideshow button on the Design / Hero settings panel. This will hint users to start the slideshow right away.
Additionally, to include all custom pages on the index page – a.k.a. the “story” -, I chose “Embed all pages” from the Design / Pages / Show pages in the story box. I’ve also enabled the new “Show pages in the lightbox” setting, which is the whole point of this post.
1. Let’s add the About page
A good story always starts with an introduction. Using right-click → New page → About.htt creates an empty template. If you double-click it, you can add your photo and edit the text right away.
Add your custom introduction text in the Text or the Comment box. Both work. Use jAlbum’s built-in rich text editor by clicking the Edit page icon in the corner!
You can also adjust the slideshow timing, as with pictures, since reading text usually takes longer than the default 4 seconds. You can specify the timing in milliseconds in the Image data panel on the right. (12 000 ms = 12 seconds)
2. Add images
This is nothing new if you have used jAlbum already; simply use drag-and-drop or the Add button. Story skin is special in one regard, though: it automatically creates different layouts based on the image’s aspect ratio. Images within the “normal” aspect ratio range are treated as thumbnails, like in other skins; however, wide images (wider than 4:3) are displayed as wide as the page content, one per row, and even wider images beyond 2:1 occupy the full browser width, with large headlines. These latter can be used as chapter separators, for example. You can control this automatic behavior through the Design / Images panel threshold setting. You can also select the image(s) in jAlbum’s explorer and decide their appearance manually with right-click → Treat image as.
3. Create text clips
If you feel like some explanation could come in handy at any stage, just add an Empty page between the photos. On an Empty page, the content is completely up to you. If you switch to Details mode, you will see all the important fields in one view: the file name, the title, and the comment. Make sure to keep file names simple — avoid apostrophes or accented characters. E.g., lead.htt or text-1.htt is perfect. Use the title for the display heading; it can contain any extra character. The comment is where the content – the long text – should go. HTML formatting is allowed here. Similarly to the About page, click the “Edit page” icon in the top-right corner of the box to open jAlbum’s rich text editor. To control the individual timings of these text clips, switch to edit mode, just like with the About page before.
Note: In older jAlbum versions, it can be tricky to reach Edit mode for an Empty page, as jAlbum opens the source editor instead. Try opening an adjacent picture by double-clicking, then navigate back or forward with the arrows.
4. Finally, add a contact page
If the visitor stayed engaged through to the end, you probably want to encourage some interaction. A Contact page is perfect for this purpose. Add it with right-click → New page → Contact.htt. After double-clicking, you’ll be able to fill in the details. You can also add your personalized text through the comment field.
In order for the slideshow to stop at the last frame, I chose “None” from the Lightbox / Settings / After the last image box.
Remember, if you can’t find a hidden setting, use jAlbum’s search box. That finds everything: albums, jAlbum settings, and skin settings too.
To copy the style of an album you found online – like the one above -, use File -> Import -> Settings from a published album.
/Laza