The Widgetkit Map provides a simple solution for adding a map to your website. Various features let you customize the map like changing colors and adding markers or directions.

Features

• Location selection with auto geocoding
• Support for multiple map markers with text popups
• Option to get the direction to the active marker
• Support for custom map styles and colors
• Uses the latest Google Maps API
• Built with HTML5, CSS3, PHP 5.2+, and the latest jQuery version
• Works with Joomla and WordPress

Direction Example

This map features all map controls, multiple markers and you can get the direction.

Color Scheme Example

Set or invert the hue, saturation, lightness and gamma of a map.

Could not load widget with the id 55.

Minimal Example

This map has a fixed width, no controls and no markers.

Could not load widget with the id 54.

How To Use

With the Widgetkit Map you can quickly create and manage simple maps with features like multiple markers, text popups and custom color schemes. Once you have created a map you can load it anywhere on your website using shortcodes or the universal Widgetkit Joomla module or WordPress widget.

The Widgetkit Lightbox allows you to view images, HTML and multi-media content on a dark dimmed overlay without having to leave the current page.

Features

• Display images, videos, HTML, Iframes, Ajax requests and SWF
• Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies
• Group lightboxes and mix different content types
• Responsive design to fit images great on mobile devices
• Load other widgets in lightbox
• 3 different opening and closing transitions
• 4 different caption styles
• Keyboard and mouse scroll wheel navigation
• Build on the latest jQuery version
• Works with Joomla and WordPress

Examples

Different animations - fade, elastic and none

Different title positions - float, inside and over

Various examples in one gallery (try also using the keyboard and mouse scroll wheel)

• YouTube
• Vimeo
• MP4 (h.264)
• Swf
• Inline
• Iframe

Load Widgets In A Lightbox

Use #wk-ID to load widgets like slideshows or galleries in a lightbox. For example: Widgetkit Slideshow

<a data-lightbox="width:600;height:300;" href="#wk-10">Lightbox</a>

How To Use

Use the HTML5 custom data attribute data-lightbox to activate the lightbox. You can set various lightbox parameters to the data attribute. For example:

<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">Lightbox</a>

Here is a list of the most common parameters:

• titlePosition - How should the title show up? (float, outside, inside or over)
• transitionIn - Set a opening transition. (fade, elastic, or none)
• transitionOut - Set a closing transition (fade, elastic, or none)
• overlayShow - Set to true or false
• scrolling - Set to yes or no
• width - Set a width in pixel
• height - Set a height in pixel
• padding - Set a padding in pixel

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc et magna in turpis varius accumsan. Vestibulum hendrerit ullamcorper mi. Fusce varius mollis enim, a aliquet odio tempor at. Ut euismod velit quis magna mollis ac tristique tellus dictum. In in leo neque, in bibendum purus. Vivamus ut lectus nibh. Nam sed erat nec dui pharetra interdum.

---

Vestibulum at est at magna blandit pulvinar. Vivamus metus orci, pharetra at pellentesque eget, consequat ut lorem. Suspendisse potenti. Aenean venenatis lobortis turpis eget varius. Nunc commodo purus sit amet odio gravida at vestibulum justo pellentesque. Aliquam eu consequat sapien. Phasellus tempus cursus malesuada. Fusce auctor posuere orci, ac tempus lorem fermentum eget. Nullam luctus fringilla magna, quis aliquet enim blandit non. Phasellus quis nulla lectus. Nunc facilisis ipsum rutrum dolor consectetur sit amet eleifend nisl mollis.