Now if you were expecting FancyIntro to be a larger, more luxurious version of Curtains (think VW Passat/Phaeton), think again. FancyIntro is an entirely different stack. More of a Mercedes AMG.
Curtains can display a line of text and opens it's curtains horizontally. FancyIntro can display two lines of text, or two images – or one image plus a single line of text (or stacks content), and opens vertically. However, if you're expecting FancyIntro to open two curtains and reveal the underlying content, you'll be disappointed. Instead, a line travels across the page from left to right, dividing the upper and lower section, then expands vertically to create a coloured page overlay. The page overlay then fades out to reveal the underlying webpage.
Having just taken Curtains through its paces and expecting similar results, it took me a couple of minutes to work out exactly how FancyIntro works. However, once you've put away the curtain concept, FancyIntro is very easy to use.
The default setting displays a white to grey gradient and two lines of text. A mauve coloured line then travels across the page, expands to fill the page and then fades to reveal the content.
Both the initial background and the line have colour settings for top and bottom, so that the line can expand to a gradient too. Obviously, the gradients don't need to be so blatant as below.
I soon tried dragging two 'halved' images into both the upper and lower content wells. In the latest version of FancyIntro this is possible (the 1.0 version duplicated the upper image). Of course, with an image in both sections, no accompanying text is possible. If images are to be present in both upper and lower containers, it is recommended that they are kept as small as possible. In fact an image size of max 150px is recommended by S4S.
SVG images can be loaded as warehoused images, but be warned – if you have stripped out the pixel sizes, they will scale to fill the screen width.
Overlay Fill Top/Bottom. Whilst the colour palette displays transparency settings, they are ignored by FancyIntro.
Line Fill Top/Bottom
Breakpoint. FancyIntro is hidden below the breakpoint.
Line Height. Set the height of the dividing line in %.
Line Slide Speed
Line Grow Speed
Fade Speed. All of the speed settings are in ms and would seem to be unlimited. Hence, with inappropriate settings, you could sit all day, waiting for the dividing line to travel across the page.
Challenge Mode. The same as Asynchronous Mode in Curtains.
Hide period. Sets a hide cookie for Days (default), or Hours.
Upper Content. Styled Content (default), Dropped Image, HTML, Markdown, None, Stacks, Warehoused Image.
Offset. In %
Text Colours. Text / Shadow
Text Sizing / Spacing
Lower Content analogue to above.
FancyIntro is less gimmicky than Curtains and is ideal for splash screens that make way for an underlying web page. Announcements such as special offers, upcoming events, or just an attractive 'welcome' message.
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