Media Frame

The widget has a two column grid layout when viewed on browser/device screen widths above the break point. One column is a <figure> element with the image and markers. The other column has the frame in which the media will appear.
The position of the items can be switched and on screen widths below the break point either the image or the frame can be positioned on top.
Media
The frame can display an image, a slideshow or a video. The frame is created using an intrinsic aspect ratio to make it responsive so all the media files MUST have the same aspect ratio and the width and height of one of the media files has to be inserted in the widget settings.
In the example, the media file whose aspect ratio is the MP4 video with a 16:9 ratio. In thids case the width can be entered as 16 and the height as 9.
Markers
The markers are added using a modified version of the EverWeb API Assets List. The marker can show a title on hover when viewed on computers.
Each item has a field for entering the marker label - number or letter. The marker are position be setting their position relative to the left or right and top or bottom. Sliders are used to position them using percentage values.
The last item is a box to enter the file path to the page that contains the item to be displayed.
Note that the first item - which is displayed on page load - has its URL entered in two places in the widget settings.
Marker Styles
The markers have controls for font family, fallback font, font size and color and background color. There are controls for marker size and for the border width and color. By checking a box, each marker can have a different border color.
Animation
The markers can have a scale on hover animation when viewed on computers. This is set with a value of 1.0 through 1.5 using a slider.
Frame Pages
Each item is set up on a page of its own. The item's maximum width should should be at least as wide as half of the media frame's maximum width.
NOTE: Make sure the page content height is set to zero or the frame content will scroll.