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: ivalue_40[selectedRegion]
});
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.
Check this image for more details on how the other option were set up in the administration panel of the Interactive World Maps plugin.
15 Responses to “Clickable World Map Example with Lightbox Effect”
Well it seems so beneficial for our wordpress sites.Could I add picture any point on the map ?
Hello Baris.
See the other examples on the website, you can add markers to any city or latitude/longitude coordinates and together with a lightbox plugin and a custom action, you can make a lightbox open like in this example, if that’s what you mean. In the tooltip it is not possible to add images. Only opening in lightbox, or displaying below/above (or any other place if you build a custom action) the map, when a user clicks.
let me know if you have any more questions.
Hello Carlos,
Are there any more in depth instructions on how to link to a lightbox gallery? I don’t really understand the action value part. The photo link above for further details isn’t working for me.
Thank you!
Hello Michele!
I re-uploaded the image. It got deleted by accident. If after seeing the screenshot you still have questions let me know. Important steps: install fancybox, choose and set custom action in the map and place that action above, if it’s an image.
greetings
Carlos
Thank you so much Carlos! From the screenshot, I see that I was not putting the custom code in the right place, however, it does not work for me anyway as I simply have no clue which code I need from my theme files. Instead of launching an image through Fancybox, I’d like to launch a slideshow gallery, has this been done before?
This is a great plug-in btw, I will be so excited if I can get it to work.
Thanks,
Michele
Hi Michele!
Could you make at least the image open like in the example? Sometimes the copy/paste of the function takes bad ‘quotes’ and you need the replace the ‘image’ quotes parte again, once you paste it.
As for opening a gallery, it might be possible, but I couldn’t figure out how it is, since it’s something that depends on how the lightbox plugin is built also, and I don’t have total knowledge of that. However, if I find out, i’ll create an example.
Hi Carlos,
Thanks for the reply! I didn’t actually try it with an image since I’m not using Fancybox, but rather a theme that uses the Galleria framework and I haven’t been able to decipher the code needed for the action. I may have to consult a pro at this point. Thanks again for your help!
Hi
I’m using Striking theme and it has a built in lightbox function in shortcode [lightbox]…[/lightbox]
Can I use this buitl in function and how?
Or should I install Fancybox?
Thanks!
Hello Gui
With the shortcode it wont work for sure. You have to check if the built in lightbox function as an API similar to this: http://fancybox.net/api from where you can build your own javascript function to open items with a lightbox, like in this example with fancybox. You can try to ask the author of the theme if the lightbox as an API or what’s the sintax to build a custom javascript function to open the content with lightbox. I’m also not sure installing lightbox would solve the problem, as it might have some conflict with the already existing lightbox.
Hey Carlos.
The Plugin is amazing and is all coming together.
One issue that is coming up is that we are putting details in more most of europe/Africa and the America’s the problem is that about 1/3rd of the input list has vanished so we can not update it anymore to match the rest of the map.
The thing is i can add new “Regions” it just seems that some of the old can not be found.
Any tips??
Hi Kevin! Thanks for the positive feedback!
It’s possible that the html is broken by some of the content you included.
The content is still probably in the advanced tab, but there might be something that it’s breaking it in the simple mode.
Can you check if everything is still there in the advanced tab? If you have trouble finding out where the code is breaking it, you can send it to me via the contact form and I can try to help you.
Hi Carlos,
Great job on the plugin! So far, I’ve been able to do exactly what I want, except for one thing.
I am trying to create a map like you created above with the ability of the user to click the mark and bring up the picture. I have done everything you stated in the tutorial above (install fancybox, create the custom action, insert the jQuery code). However, this is still not functioning. The map looks fine, but the image is not popping up. I replaced the quotes like you stated in the comments above, too. I’m using a JPG picture but also tried a PNG. Any ideas?
Best regards,
Trent
Hello Trent! Thanks for getting the plugin and glad you like it so far. The problem you describe could be from a simple conflict of Fancybox with another plugin or some small typo in the code. I would need to see the page to evaluate better what could be the problem. Can you send me a message from the contact form of my profile at codecanyon with the link to your map if possible?
I am currently traveling on vacation, until May 1st, and I might take longer than usual to reply. Sorry for the slow support, but I’ll help as possible.
Greetings
Carlos
What is the main difference between stand alone and wordpress plugin. Can I still use the stand alone in wordpress.
Is there zoom available to the map. If I want the world map it would be to small.
THanks.
Hello! With the wordpress version, you have an administration for the maps, you can create multiple maps and edit then whenever you need. With the standalone version you generate the code necessary and you need to copy/paste it to the place you need. If you need to change anything on the map, you would have to go back and generate the code again and copy/paste again. In theory, yes you can use the standalone in wordpress, but the plugin version is much easier to use, if you will be using wordpress. The maps unfortunately don’t have a zoom function yet. But you can set the size as big as you need, as they are vector maps. If you have any other question feel free to ask. Greetings
Carlos