FancyBox Example Placeholder
FancyBox Example

With Interactive World Maps Worpress plugin and standalone version it’s possible to create custom javascript actions to ‘on click’ events on active regions of the map. In this example I created a lightbox effect to display a picture when the user clicks in one of the highlighted countries.

To achieve that, I installed Fancybox for wordpress free plugin. After I created a map of the world and created a custom action with the following details:

jQuery.fancybox(
{
type: 'image',
href: value
});

If you want to display the content and not an image, the code would be:
jQuery.fancybox(
{
content: value
});

An Iframe:

jQuery.fancybox(
{
type: 'iframe',
href: value
});

I followed the Fancybox API details to build this code. It says the link type will be an image and I set the href as the Action Value for the entries of the map (1st code example). Or I simply set the content to be the ‘value’ of the action value (2nd code example).

Check this image for more details on how the other option were set up in the administration panel of the Interactive World Maps plugin.

lightbox-fancybox    interactive_world_maps_lightbox

 

 

If you are using Foobox plugin, you can check out this code provided by user Kernel-Debugger.

Get Interactive World Maps Today - $21

Get this premium WordPress plugin today with 6 months support included.

Buy Now