If a responsive slideshow is the full width of the browser or content area it must load a smaller version of the image for mobile devices.
Using a two column grid with the slider in one column above the breakpoint allows the use of just one image file per slide.
A standard slideshow is no use for responsive pages since the required image size would be far to large for downloading on mobile devices.
The options are to supply a smaller image file for mobile devices or amke the slider about half the content width when viewed on computers.
Images
For a full size slider the image file width should be reduced to the maximum content width setting and the mobile image about half that size.
The images should be optimised before importing into EverWeb.
Lazy Loading
All the images on a responsive page should be lazy loaded but this especially important for a slideshow. If a slideshow does not have a lazy load function - don't use it!
This slider is for the professional designer or photographer who wants to show their images off at their best with no embarrassing delays.
Images
The slides load a large image, a medium image for tablets and has the option to add a portrait image for mobile phones in portrait mode to give a much better viewing experience.
The images in the demo were resized and optimised before importing into EverWeb. The sizes are 960 x 640px, 720 x 480px and 375 x 600px for the portrait image.
The images are lazy loading by default since this is essential for a mobile website slideshow.
Captions
The captions are centered at the bottom and their background color has an opacity slider.
Navigation
The previous/next action tabs have the same styling as the captions and icons and can be removed for mobile devices where the slides can be swiped.
Links
The images can be configured as links if required. Links are indicated by an icon at the top right.
The captions, icons and action tabs can appear on hover when viewed on computers.
Sometimes it's usefull to show an image at a fairly small size and have a zoom up function to show it larger in an overlay. It's hardly worth loading the scripts for a lightbox function for one image so this design uses a very simple, custom jQuery plugin.
The widget creates a container using an HTML5 <article> element with an image, heading, text and an optional link.
When viewed in computer browsers and on tablets in landscape mode, the image shows a zoom icon at the top right. Clicking/tapping the image opens it at a larger size in an overlay.
Zoom
The zoomed image has a maximum width setting to control its size and can be scrolled if it is larger than the browsser/device window height.
Overlay
The overlay has controls for background color and its opacity and has a close button at the top right. The overlay can be closed by clicking or tapping it anywhere. This option can be turned off if required so that the close button is the only way to dismiss the overlay.
Icons
Both icons are created using SVG code so the colors can be changed if required to suit the image and the overlay color.
Break Point
At browser/device window widths above the break point the image is floated left and occupies a percentage of the width to allow the text to wrap around it.
On tablets in portrait mode and phones the display becomes block, the image becomes full width, the text slides below the image and the zoom icon is hidden and the zoom function is removed since the image is shown at full device width anyway.
Optional Link
The optional link can open internal or external pages, can be aligned left, center or right and has a new window option
Wrap Text
The way in which text wraps itself at the bottom of the image will depend on the font size and the line height. Experiment with different values for line height to get the best result.
Spans
Paragraph breaks can be created using spans. These have their own controls for font size and color.
The Zoom Wrap widget can be used as a text container without the zoom function or the wrap image. In this example the image is inserted without the wrap function and has a maximum width of 800px.
The image has been given a maximum width equal to the width of the image file - in this case 800px - and the image is automatically centered when the wrap function is turned off.
Lazy Loading
All three of the image files should be resized and optimised befor importing into EverWeb and the widget' lazy loading control turned on before publishing the page if the image isn't in view at page load.
Menu
