What are hotspots, I hear you ask. Hotspots are active areas positioned over an image. They can be activated to display information, when the mouse hovers over them, or they can contain an external link that is activated on mouse click. The external link may, of course, be a lightbox or a gallery that opens on the same page.
A word of warning – If you have a previous version of HotSpots installed, uninstall it before you install the new version to avoid conflicts.
The stack settings have been greatly simplified since the original version – in part, of course, due to the release of Stacks3.
When you drop HotSpots onto a Stacks page, you'll see a container with an 'add child' + button.
I recommend that you first add an image to the image well in the settings panel. The image may be local, or warehoused.
Once you have an image loaded, you can begin to add your hotspots by clicking the + button.
The main stack's settings will allow you to set up the general appearance of the hotspots. The very first setting is Edit Highlight. This is the highlight colour of the hotspot that you are currently editing – it makes it more obvious in edit mode, which of your 50 spots is currently active.
Lightbox – when activated, will enable the following lightbox settings:
Gallery adds next and previous arrows to the lightbox, enabling users to move to the next, or previous image.
Content Type is set to Auto[detect] by default. The options are AJAX, iFrame, Images, Inline, or Video. The lightbox function is demonstrated on the HotSpots product page.
Effect offers seven options for the image changes.
Next follow the colour options for the Window Shade, Title Fill and Title text.
Toggle will allow your visitor to toggle the annotations on and off to view the main image undisturbed.
Toggle Button and Toggle Fill let you set the colours for said toggle. The instruction text may be freely defined.
Tooltips – the hotspot info that is displayed on hover – may be deactivated.
The hotspots may display an icon which may be an image, or a font awesome icon. Place Icon Bottom Centre does just as it says.
The next eight settings are for the tooltip appearance.
Then finally, you will find the settings for the HotsSpot Global Styling and Mouse Cursor.
Once you have activated your first hotspot, you can click it (a great advantage over previous versions) and check the settings panel again.
The first settings are for the positioning, in percent, from the Left and from the Top of the image.
Then you have the Width, the Height and the Tooltip Position, the HotSpot Link settings, the Title Text and the Content Or Icon.
These settings are all best made in preview mode.
Each of the hotspots can be set to Custom Settings – an override that allows you to set the Background Fill, Borders and the Content settings individually for each HotSpot.
HotSpotsPro 3 is a great improvement over previous versions and well worth taking a look at.
Liquid Gallery is an attractive, responsive and versatile gallery that is simple to set up, yet offers options and silky smooth transitions that other gallery stacks don't have. Twenty eight transitions in all, including a simple fade, blinds and mosaics. Options include animated captions that gently slide up into view once an image has loaded and thumbnails. Images and thumbnails may be dragged into the stack or loaded from warehoused images.
Once Liquid Gallery is dragged into your project, you'll find a stack with extensive setup instructions (which, of course, may be hidden) and the Stacks 3 + button to add a child stack. The child stack has two options: Dragged And Dropped Image, or Warehoused Image. Choosing Dragged And Dropped presents you with an Image Container, a Thumbnail Container and a Caption Container, whilst Warehoused has the same Caption Container plus the settings for your linked image/thumbnail. There is also an option for both dragged and warehoused images to set an external link.
The instructions advise that the Caption may be added via either simple text, an HTML, or a Markdown stack. I'm lazy, so I tried adding a paragraph stack – which worked equally well. The caption formatting is governed by the theme that you choose.
Liquid Gallery first requires you to choose where your gallery should be positioned. The default setting is Normal Page Flow. The options are Theme Extra Content Container, or Theme Flood Freestyle Banner.
Next you can agonise over the Transition Effect. Did I mention that you have a choice of 28 transitions? All silky smooth? The Transition Speed and the Interval are set in milliseconds. A Progress Indicator is added by default, but may be deactivated. The Loader Type may be set to Pie (default), or Bar. The Pie position can be set further down in the stack's settings, the progress bar is displayed below the images.
The next stack options include nine settings for the navigation display and an option to crop portrait images.
The Liquid Gallery Style Settings include Button Theme with a myriad of colours to choose from, Pie Position, Loader Padding, Loader Stroke, Pie Size and Loader Colour. The remaining settings cover the Caption Content colours, the Pagination colours and the Thumbnail settings.
As already mentioned above, both captions and thumbnails are optional.
Liquid Gallery is well thought through. It's settings are quite minimalistic, but the results are beautiful. And – as with all RWE stacks – Great value for money.
At first glance, CaptionOnImage is a very simple stack. Drop it into your RW project; add an image – local, or warehoused; add a text stack with a caption and, with the standard settings, when you hover over the image, just as with some other caption stacks, your caption will appear.
CaptionOnImage, however, isn't finished there. You can also set the caption to disappear on hover, but that isn't all. By nesting the CaptionOnImage stacks, you can also have the image change on hover – with, or without a caption. Just hover over the image above and you'll see what I mean.
If you wish to go easy on the grey matter, you can open Jeroen's detailed example project – it comes with the stack – copy the example that you wish to use, drop it into your project and replace the images and the caption text. Otherwise, drag CaptionOnImage into your project and play around with the stack settings.
To do so, drag an image into the upper part of the stack and a text stack into the lower part.
First up: The General Settings are for the positioning of the caption; Top, Bottom, or Centre. If you choose Top or Bottom, you can set the distance in either % or to Fixed [px]. You then have settings for T/B, Left and Right. Force Fluid Image will ensure that your image remains responsive. Set Link will allow you to add an URL.
Hover Effect: Static sets the caption to appear on page load and disappear on hover. Hover sets the caption to appear upon hover and Both gives you a permanent caption. Show Effect enables Image Hover Effects, either for the static, or the hovered image. You have a choice of four image effects: Opacity, Blur, Sepia, or Greyscale. Hover Delay is defined in milliseconds and there are five transitions to choose from.
You may add a border to the image and the border colour may also be changed upon hover. And finally, the image can have a colour overlay – once more, you can choose between a static and a hovered colour.
If you wish to have the image change, as in the first example above, you can nest a CaptionOnImage within the lower stack, add a text caption that will appear together with the second image and you're good to go. The opposite is also possible: an image with a caption that disappears when the new image appears upon hover.
A great deal of thought has gone into CaptionOnImage. It's a great stack that makes exceedingly versatile captioning very simple without stressing those grey cells. It is a welcome addition to my stacks library!
Now — How do I add CaptionOnImage to my blog page? Oh look! There's a description for that on the demo pages too!
[Note – The images displayed here are screenshots, not the actual stack]
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16