Zoomy is the new name for a simple stack that enables an attractive magnification effect for RapidWeaver images. Magnification can take place on mouseover, grab, or click. There are also a couple of other settings built in to change aspects such as the zoom amount, animation speed and mouse cursor.
Zoomy will work either with images you drag and drop into RapidWeaver or images stored in a warehouse location. Compatibility is offered with all major web browsers. And Zoomy is responsive.
Image source allows you to add either Dragged and Dropped Images, or Warehoused Images.
Mouse Cursor gives you the option of seven different cursor styles.
Zoom Trigger has the options Click, Grab, Mousover, or Toggle – Grab is my favourite.
Duration sets the fadeout time once the cursor leaves the image.
Magnification is a percentage of the original size for the enlargement.
Looking for further settings? You'll be hard pressed to find any, the above are all that's needed.
Zoomy is a neat little stack that does exactly as it says on the tin and has the advantage of being both responsive and free.
Will's demo gallery contains 117 images and is close to 400MB in size. Quite a risky and time consuming undertaking in most cases, however, with ProGallery a gallery of this magnitude is not only possible, it's also quite simple to set up.
With lazy loading/progressive loading, the image, or video that is currently requested is called from the server on demand, thus preserving bandwidth.
The ProGallery lightbox itself has been completely rebuilt and the clutter has been removed. The controls and the titles are no longer within the displayed image, but are placed outside of it, thus allowing the viewer to focus on the image itself. Keyboard navigation has been implemented, as has swipe actions on mobile devices. In addition to an image title, a caption text can now be added.
Once you've dragged a ProGallery stack to your page and clicked the + button to add a child stack, you'll see that there are now four options to add images to your Gallery.
Single Image is the simplest solution. The settings panel displays three image wells for local, or warehoused images. Thumbnail, Large Lightbox Image and High Resolution Lightbox Image. Below these options you can add both an Image Title and an Image Caption. You will then see Alternative Link: Set Link button?
The Lightbox can be disabled. Setting a link to the thumbnail then gives you the option of linking to external pages. These pages could be product pages, or further galley pages.
Single Video is similar to Single Image. The thumbnail can be a local or a warehoused image. The Video Link will accept any video that can be embedded within a page. ProGallery will automatically discern the video format. Once more, both a Title and a Caption may be added.
Directory Of Images. One means of simplifying building a large gallery of images, is to upload the images, high-res images and thumbnails (with _thumb, or @2 appended to the name) to a server and add a .php-relative path to the Directory Path in the settings panel (html will not functions here). Then set the options Use Thumbnails and/or Use Retina Images accordingly. Your index page must then be set to .php instead of .html
ProGallery will then automatically load your images into a gallery.
CSV File. As before, ProGallery will accept a CSV file as a gallery source. The file format has now been extended to include Retina Images and Captions.
The ProGallery main stack settings are too numerous to list here, but you can take full control of your gallery appearance. The settings include Gallery ID (you may have more than one gallery on a page) Grid Type, Special effects (only for modern browsers), Transition Speed and multitudinous settings for the Lightbox.
It remains to be said that – apart from the thumbnails – there are three further options to trigger the ProGallery Lightbox. You may use a link, or a button to open the lightbox, you may do the same to open a specific image from the gallery, and you can trigger a specific slide on page load. These options are all explained in detail on the product page.
ProGallery, then, has now advanced from being one of the best gallery stacks available for RapidWeaver to one of the very best.The magnitude of possibilities make it a pleasure to set up and its reliability when building large galleries makes it second to none.
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.
Facebook Pages displays a live facebook page on your RapidWeaver Stacks page, which is great because instead of having to search for your facebook page, your visitor can see your latest posts directly on your homepage without getting distracted by all the cute kittens and clever dog posts. And, he/she can like your page directly from the homepage and/or access the Facebook page directly by clicking the link provided.
I know that a lot of clients are going to like Facebook Pages and the great thing is – it's simple to set up; there are only a few settings, but some of great options. And it updates instantaneously.
The only setting that you need is the name of your facebook page. Finished.
However, you do have some options. You might, for instance, wish to set the Width, Height and Alignment of the stack. A word of warning – don't set the width wider than the container it is in, Facebook Pages is not fully responsive and it can overflow.
Enable Small Header will reduce the height of the page header (active in the screenshot above).
Hide/Cover Header image deactivates the header image and leaves just the page logo visible.
Hide Call To Action Button will hide a CTA button, if you have on your fb page.
Show Facepiles will activate/deactivate the images of those that have liked your page.
Finally, you can decide which page tabs you would like visible within the stack – Timeline, Messages, or Events, or different combinations of each.
Facebook Pages will only display, well, facebook pages. It will not display personal pages or timelines, so if you want your visitors to see your cute cat, or how intelligent your goldfish is, you'll need to create a page to do so.
I can see this stack becoming very popular – even without those cute pets.
Kube is a modern, minimalistic framework that – according to the Kube's own blurb – is easy to use.
Starting up with Kube is ridiculously fast — you can start in under a minute.
White Space, then, is a minimalistic theme that is easy to use – and it is the minimalism that makes the theme attractive.
There are three things to note about the White Space theme:
• The stacks that are delivered with White Space are built specifically for the Kube framework and will not work without the theme.
• Most, of the stacks from your stacks library will work well with White Space.
• Kube will only render correctly with modern browsers.
As I said above, White Space is now accompanied by ten Kube based stacks.
Kube Auto Columns is a nifty little stack that will allow you to define up to four columns. You just need to drop a paragraph stack into it and your text automatically flows into equal length columns.
Kube Button in its default form is a rounded ghost button. The rounding can be deactivated, as can the ghost setting (Outline). It has settings for Size, plus active and hover states. The button's width is set in percent.
Kube Message is a message box that is displayed when the page is opened. When the message box is closed, the page content slides up to fill the space it took.
Kube Modal has a standard rectangular button (the colour is set in the theme settings) that triggers a modal lightbox. The lightbox will house text, images, video and other stacks. However, tests showed that the video continues to play when the modal is closed.
Kube Offcanvas is an off canvas stack that pushes the page content to the side when it is triggered. It can be triggered by a button or a text link. You will need to follow the instructions very carefully to link the trigger.
Kube Quotes is, well, a quote stack. Add your quote in the upper container and its origin in the lower container. The quote is displayed with a grey bar at its left edge.
Kube Simple Grid is an interesting grid stack that may contain up to eight columns. The width of each column may be set individually using the 12 column framework that Kube is based on. The Grid stack allows a complicated page structure to be built very easily.
Kube Tabs is, as the name states, a minimalistic Tab stack. New tabs are added by adding a child stack. The tab container height is flexible (i.e. it adjusts to the height of the content) and the tabs will also accept text, images, video and other stacks. The tabs morph into an accordion style on mobile.
Kube Toggle is a toggle box that is also triggered by its own, standard Kube button. Once again, you can drop just about anything into it.
Kube Video Container is a responsive iFrame container for video playback. It may be set to autoplay in the theme settings.
It's been a while since I used a prefabricated theme, but I took a look at both the standard RW Blog Page that White Space puts together and the Contact Form. Both look appealing and the demo pages that Christoph has placed online all look very good.
It would be great if some of the stacks could be adapted for global usage.
If you are looking for a minimalistic theme for a modern browser, it's well worth taking a look at White Space.
And for a short while it still costs the same as version 1.0.
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