The ThemeKit UI Photo Scroller differes from the Image Scoller in that it can display images with different aspect ratios.
Scrollers can display a lot of images in a small on load space with no commplicated, download speed sucking scripts.
Vertical mouse/trackpad scrolling is as familiar to computer users and horizontal scrolling is to mobile device users.
In case scrolling is not obvios to computer users the hrizontal scrollbar is made visible with a control for setting the scrollbar's thumb color on Firefox and webkit browsers - Safari and Chrome.
Webskit browsers also allow for setting the scrollbar track background color
Sometimes it's usefull to show an image at a fairly small size and have a tkuiZoom 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 containing a main heading, optional full width text, an image, heading, wrap text and an optional row of links.
When viewed in computer browsers and on tablets in landscape mode, the image shows a spyglass 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 have a caption, border and/or a bottom box shadow.
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.
Icons
Both the close tab and the spyglass have their icons created using pure CSS so that they can have their color and background color editable.
Breakpoint
At browser/device window widths above the break point the image is floated left and occupies 50% of the width to allow the text to wrap around it.
On phones the display becomes block, the image becomes full width, the text slides below the image and the spyglass icon is hidden. The zoom function is removed since the image is shown at full device width anyway.
Spans
Paragraph breaks can be created using HTML span tags. These have their own controls for font size and color.
Marks
The widget has controls for styling mark tags with controls for the text color and the background color.
Follow the liink below to the Text and the Content pages to see examples and find out more about creating and using the <span> and <mark> tags.
Optional Links
The optional links can open internal/external links. They have controls for max width and horizontal spacing.
