Video Transcript:

EverWeb’s Responsive Image Gallery widget is specifically designed for use in responsive pages.

You can also use the regular Image Gallery widget in a responsive page, but it has to be placed within a responsive row widget and it does not include the responsive capabilities of the Responsive Image Gallery widget.

Here are some of the gallery layouts that are available with the Responsive Image Gallery widget

To use the Responsive Image Gallery widget drag and drop it on to a responsive page. You can also drag and drop the widget into a Responsive Row widget if you want to add top and bottom padding.

With the widget on the page, first add some image files. Use the ‘Choose…’ button beneath the Assets List to add images to the widget. As you add image files you will see them listed in the widget’s Assets List and the images will be added to the widget in the editor window.

You can add the following options to a selected image in the widget’s Assets List:

Add a Caption to an image by filling in the caption box.

Set a Maximum display width for the image within the widget by setting the Maximum Width field.

Add an optimised thumbnail by clicking on the ‘Optimized Thumbnail’s ‘Choose…’ button. Select the image you want to use. The optimised thumbnail displays the thumbnail instead of the image. Your visitor has to click on the thumbnail to see the image behind it.

You can reorder images in the Assets List just by drag and dropping the image file name to its new location.

If you have added an image by mistake, just highlight it in the list and press the backspace key to delete it.

As you add images to the Assets List, the widget will update.

When you have finished adding images files to the list, use the Widget Settings to style the image gallery.

Above the Assets List are the settings that define the appearance of the Image Gallery.

The Gallery Padding option sets the number of pixels that the gallery will be away from the left and right margins of the page.

The Image Spacing option specifies the distance between each image, and the Style option gives you six different gallery styles to choose from. In this example I am using the Masonry style.

Some styles, such as the Cover style, allow you to set the maximum number of columns and the minimum width of the images in the gallery. These options are greyed out if they are not available for the Style you have chosen.

As with EverWeb’s regular Image Gallery widget, the Responsive Image Gallery widget also has a Slideshow feature, but with different options.

You can choose to let your users open the slideshow by check marking ‘Click to open slideshow’.

Tick ‘Auto Play Slideshow’ if you want the slideshow to automatically run when opened.

The Slideshow speed is displayed in milliseconds. Use the slider or enter a value in the SlideShow speed box to set the desired speed.

When a visitor clicks on the image Gallery to open the slideshow you can set an animation to run with 6 different effects. You can also choose None.

When you close the slideshow any opening animation that you have set will reverse to become a closing animation.

Set the speed of the animation by entering the value in milliseconds in the Animation Speed checkbox or by using the slider.

Use Transition settings to set how one slide transitions in to the next slide. The same six options are available as with Open Animation.

Adjust the transition speed by entering a value in the Transition Speed box or by using the slider.

The Slideshow can also be customised to show navigation arrows, thumbnails and an image counter by checking or unchecking the options in the Appearance section of the widget.

When running the slideshow your visitor can download the image, share the image on FaceBook, Pinterest or Twitter, pause the slideshow, make the slideshow full screen, show or hide the slideshow thumbnails and close the slideshow using the options in the top right of the slideshow window.