The Image Gallery widget debuted with the first release of EverWeb back in 2013! The original widget was incredibly simple and only allowed you to change the thumbnail size, the spacing of the images and the slide show timing. Since its initial release, the Image Gallery widget has added new features and with recently EverWeb 3.3, there’s more to enjoy!
How and When To Use The Image Gallery Widget
The Image Gallery widget can be used in any of EverWeb’s Page Layout styles, be it Centered, Left Aligned and Responsive). The first two Page Layout styles are known as Fixed Width styles as you manually set the width of the page in the Content Width field of the Page Settings tab of the Inspector Window. This means that you can drag, drop and resize the widget anywhere on the page. Once you’ve placed the widget on the page, you can move the widget around the page using the widgets compass direction icon in the widget’s top right hand corner. This icon replaces the old ‘+’ icon seen in previous releases. Using the icon helps stop you from accidentally clicking on one of your image gallery images when you actually want to move the whole widget itself.
If you want to use the Image Gallery widget on a Responsive page, you will need to place it in a Responsive Row widget in order for it to work correctly. First add a Responsive Row widget to your page if you have not done so already, then drag and drop the Image Gallery widget on top of the Responsive Row widget to place it inside it. If you forget drag and drop the Image Gallery widget inside of a Responsive Row widget, EverWeb will display a warning message. The reason why the Image Gallery widget needs to be inside a Responsive Row widget is that the widget is not a Full Width object. If you try to make it so using the Metrics Inspector-> Full Width option, the widget will not expand to the full width of your page. Therefore, as with other non-Full Width objects (e.g. the PayPal and FaceBook Like widgets) you need to contain it within the Responsive Row widget.
If you want to have a truly responsive image gallery on your responsive page, EverWeb includes the Responsive Image Gallery widget. This is a full width widget so it is recommended that you only use this on a responsive page.
Image Gallery Widget LightBox
When you add images to your Image Gallery widget then publish the page, each image in the gallery can be clicked upon to enlarge it. The enlarged image appears in what is known as a Lightbox. The Lightbox in EverWeb 3.3 has been completely redesigned and now sports a modern look and feel. The new Lightbox is also responsive so will automatically resize if you resize the browser.
The LightBox prior to EverWeb 3.3 displayed images in a Polaroid style frame with all of the controls below the image. In the new Lightbox, the controls are now located in the top right hand corner of the browser window. The previous Lightbox only allowed you to share an image on Twitter whilst the new Lightbox adds FaceBook and two additional share options can now share the image with FaceBook and Pinterest. There are also options to zoom the image in or out or as the original size, features that were not previously present. There’s even a fullscreen toggle mode. A new download option is also included bringing the functionality of the LightBox up to the needs of website visitors today!
In addition to the new options, you also have the ability to choose which you want to display. Just use the Image Gallery’s Widget Settings to toggle the AutoPlay option, Share Button, Zoom button, Full Screen button and Download button on of off as you want.
The widget’s Pagination Options that debuted in EverWeb 3.2 adds a new option so that you can set the Disabled Background color.
The best thing about the Image Gallery widget’s new features is that they are automatically applied when you republish your website in EverWeb 3.3 so you don’t need to do anything yourself, unless you want to disable some of the Lightbox features, such as the Download image button. As the code used for the Image Gallery widget has been updated, you should find it better than ever!