EverWeb Widgets
This is a simple solution for zooming up an image on click. The small, text wrapped image appears at page load and the large image doesn't have to download until its trigger is clicked.
The image is inserted in an HTML5 <figure> so it can have an alt text attribute and a figcaption for keywords for the search engines and a description for the visitors.
On mobile phones, the small image becomes full width so the phone user doesn't even have to download the larger version - saving time and their data allowance.
The image expand icon in the top right of the image is optional and is hidden when the page is viewed on mobile phones in portrait mode.
The optional CTA style link can be aligned left, center or right and can open an internal or external page and in a new window if required. It can have rounded corners and there is a control for adding a hover color when viewed on computers.
The container can have a box shadow and/or border and can be vertically spaced from the items above and below it. Like most other responsive widgets, it has a full width wrapper with settings for background color and opacity for use when items are required to scroll over a fixed item like a hero image.
Images
The small image should be cropped to the maximum size that it will be displayed at - in this case 600px. The zoom image is responsive up to the maximum width of the image file - in this case 1600px.
An alternative to this widget would be to use the Lightbox Module …
Scrolling Text
Scrolling text used to be created using the <marquee> tag which was non standard and is now very much redundant. Nowadays scrolling is usually created using javavscript - or a jQuery plugin.
Since we try to keep the use of external scripts to a minimum on pages that will be viewed on mobile devices, this widget uses CSS animation to create the scroll effect.
The speed at which scrolling text travels across the page depends on the time set for one cycle and the distance it has to travel. This means that text set to travel at a reasonable speed when viewed on a desktop browser will be far too slow for mobile phones since the time remains the same but the distance is much less.
Speed Control
First of all, there is a maximum width control which is used to prevent the item spreading out too much at wide browser settings on large screens. If full width is required, set this to about 2400px but check out the result on a large screen using a narrow and wide browser setting before deciding to go with it!.
The animation time can be set for each device type - computer, tablet and phone. Use the defaults to begin with and checkout the results in the desktop browser and the iOS Simulator.
Extra Text
The amount of text that can be displayed obviously depends on the browser/device screen width and the amount that can be used when displayed on a smart phone is fairly restricted.
The widget adds a <span> element for extra text which can be displayed on computers and tablets and hidden on phones.
Using Responsive Widgets
It's important to realise why responsive items are centered in the browser and have a maximum width setting.
If the content was allowed to spread out to the width of the browser, when viewed on a computer like an iMac 27 at full screen, text lines would become too long to easily find the next one and images would disappear off the bottom of the screen.
Always test responsive pages using the browsers responsive mode and in the iOS Simulater. For more info, see the links below …