Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Zoom, Zoom – Magnify images in RapidWeaver

Many online stores have a useful feature – if you hover over an image of the article you're viewing, the image will enlarge underneath your mouse so that you can view details.
Image Zoom from RWextras used to do exactly that, however, it disappeared for a while. Now it's back – freshly updated and free of charge!
RWextras Zoomy

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.


Stack settings.
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.

Comments

ProGallery – A Masterful Gallery For RapidWeaver

Pro Gallery, one of Stacks4Stacks' most popular products, has just been updated to version 2. One of the performance saving enhancements is lazy loading, which results in much larger galleries being feasible. If you have a large portfolio of images, or videos, you may wish to take a closer look…

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.

ProGallery

Stack settings.

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.

Comments

HotSpotsPro 3 For RapidWeaver

HotSpots from Stacks4Stacks has been around for a while now – since 2014 to be precise. At that time, I didn't review HotSpots myself, but published a guest post from Will Woodgate. Will has just given the stack a spring clean and released it as version 3. It has been greatly improved over previous versions.

HotSpots began life as a free stack. The free version is still available, but if you're going to use hot spots more than once, you'll find the pro version much easier to use!

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.

HotSpotsPro
Stack Settings.
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.

Comments

Your Facebook Page Live In RapidWeaver

The rules that govern SEO state that a social presence will heighten your rating on the search engines. As such, most businesses have a facebook page. I hate Facebook, but I have a page all the same. Some time ago, RWtuts introduced a Facebook stack for RapidWeaver. Marvin just sent me a copy of the new version – Facebook Pages 2. I just took a look at it and I think a lot of you will like it.

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.

facebook pages
Stack settings.
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.

Comments

Smoothly Scrolling RapidWeaver Pages

Just two days ago there was a question on the Weaver's Space "How do I get a page to smoothly scroll to an anchor from a text link?"
The question was answered immediately – "SmoothScroll". Now this is strange, as I'd only received Jeroen's newsletter (Marathia's Stacks) just ten minutes before! Some people, you see, do open newsletters when they flatter into their mailbox!

SmoothScroll is a stack (or rather – a set of three stacks) that does exactly as it says on the tin – once it's placed on your page, the page will smoothly scroll to its position when a link is clicked.
Three stacks. SmoothScroll is the central stack, but it is accompanied by Anchor To TopBottom and Menu ToAnchor. Now, if I'd had these stacks three days ago, I'd have known exactly where to utilise them. As it is, I settled for a more complicated option.

SmoothScroll itself is a very simple stack. Drop it on your page and set an Anchor Name – a unique ID (you'll have more than one on your page – right?). Then all you need to do is add a link '#[Anchor Name]' to a text, image, or button. As simple as that. When the link is clicked, your page will smoothly scroll to where SmoothScroll is positioned.

SmoothScroll
Now it's difficult to make a screenshot of a smoothly scrolling webpage – just believe me – it works perfectly! I spent a couple of hours testing the various possibilities.

So what are the other two stacks?
Anchor To TopBottom is an anchor stack that can be placed at the top and/or bottom of a page. It has just two settings Set Anchor (top/bottom) and an ID. Once again, a link with '#[ID]' will send you to whichever position you have defined.

Menu ToAnchor is slightly more complicated and I needed Jeroen's demo project to get my head around it. But then, I'm thick sometimes.
Let's say you have a single page website and you want the menu bar to display the SmoothScroll sections on your page.
Define the sections using SmoothScroll and then drop Menu ToAnchor onto your page. Now add an Offsite Page for each of the sections to your project, give the pages the same name as your sections ID (just so that they are easily identifiable, then simply set '#' as the URL and activate Use Redirect Page.

Menu ToAnchor already displays a link – give this link the same Anchor Name as your first section, in the stack's settings and then go to Set Link and link to your Offsite Page.
You can now click the + button to add a child stack and repeat the process for as many SmoothScroll sections as you have on your page.

The result – your menu bar is now populated with the SmoothScroll sections on your page! When you click a menu entry, your page will smoothly scroll down (up, if you have a sticky menu) to the appropriate section.
You can, of course, combine all three linking methods as displayed in the screenshot above. I.E. in the menu bar, you'll see the chapter names then, underneath the chapters, you'll see links to each of the other chapters, plus links to the top and bottom of the page.

At first glance, SmoothScroll would seem to be a simple stack, but lot of thought has gone into it and I can highly recommend it.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.