ThemeKit More

Images

dBox Image Scroller

dBox Scroller 1
Image [1]
dBox Scroller 2
Image [2]
dBox Scroller 3
Image [3]
dBox Scroller 4
Image [5]
dBox Scroller 5
Image [5]
dBox Scroller 5
Image [6]
dBox Scroller 7
Image [7]

Image Scroller

An image scroller is a much better choice for a responisve website than a jQuery/Javascript powered carousel since it requires less code and battery viewing device power to drive it.
On computers the scroller can be driven using vertical swipe on the mouse or trackpad or by using the scrollbar. Images are swipe horizontally on nobile devices.
Images
The images can have variable width but need to all have the same height. They can be spaced out and can be configured as links.
The images have a lazy loading function - of course!
Links
The optional image links are made visible for mobile ddevice users by an icon at the top right which can appear on hover on computers.

More Images

  • ThemeKit More Images 1
    Optional Caption
  • ThemeKit More Images 2
    Captions On Hover
  • ThemeKit More Images 3
    Link Icon
  • ThemeKit More Images 4
    Icon On Hover
  • ThemeKit More Images 5
    Variable Items
  • ThemeKit More Images 6
    Items To Show
Show Less
Show More

More/Less Images

When there are more than one or two images to show on a page a more/less grid can cut down on the onload content and save visitors using small devices a lot of unnecessary scrolling.
Above the breakpoint there are two images per row. Any more would reduce the image size too much for a good user experiemce.
The images in the demo were cropped and resized to 600 x 400px. The image has a lazy loading option if the item is not in the viewport at page load.
The images have the option of adding a border and/or a bottom box shadow and the grid column gap and row gap have separate controls.
The text in the more/less acton tabs can be changed and they can be styled for font size, color, background color and border radius.

Options

Both the captions and the link function are optional and can show on hover when viewed on computers.
It is essential to show a link icon on images inserted in responsive pages - otherwise mobile users won't know that it is a link. The link icon has a rotate on hover animation.
Items
The widget requires the number of items to show per click and the total number of items to be entered.
When editing on the EverWeb design canvas make the number of items to show equal to the total number of items so that they can all be viewed.

Social Links

The ThemeKit More Social Links widget has an action tab with a share icon which appears at the right or left at an adjustable percentage distance down from the top.
The flyout appears as a horizontal line of links.
The links are SVGs with a common icon color and the option for different background colors.
There are controls for icon padding, border radius and a checkbox to make them round.
To insert an SVG …

  • Open the SVG icon download folder
  • Select the icon
  • Double click it to open it in TextEdit.app set in plain text mode …
  • … or use a code editor
  • Copy the code and paste it into the widget settings

SVGs

SVG icons should be used to replace all PNG icons and are more efficient and have better quality than font icons like FontAwesome.
Free Icons
There are 100s of icons in the folder which can be downloaded from the link in the "Read Me First" file in the widgets folder.
The social side menu also uses SVG icons.
SVG ixon code can be quickly copied and pasted using the freeware app CotEditor which can be download from the link below or from the Apple App Store.

Social SideCotEditor