Open Image Map links in FooBox?

Hi John,

FooBox Pro adds the ability to open inline HTML in the FooBox lightbox and image maps can be displayed. We’ve helped another client with a very similar request not too long ago.

I don’t believe there’s any way we can open image maps in FooBox Free but I’ll double check with the development team and will come back and confirm.

Hi John,

I’ve checked with the development team and have confirmed that this is possible with FooBox PRO but not FooBox Free.

FooBox PRO offers additional features such as the ability to set specific CSS classes to target very specific elements in your site.

So, for example, if you have FooBox Pro and had an image map like this:

<map name="FPMap0">
<area href="https://example.com/wp-content/uploads/2018/03/image1.jpg" shape="rect" coords="19, 15, 230, 193">
<area href="https://example.com/wp-content/uploads/2018/03/image2.jpg" shape="rect" coords="383, 65, 650, 245">
<area href="https://example.com/wp-content/uploads/2018/03/image3.jpg" shape="rect" coords="72, 371, 305, 556">
<area href="https://example.com/wp-content/uploads/2018/03/image4.jpg" shape="rect" coords="397, 402, 719, 568">
<area href="https://example.com/wp-content/uploads/2018/03/image5.jpg" shape="rect" coords="70, 684, 320, 882">
<area href="https://example.com/wp-content/uploads/2018/03/image6.jpg" shape="rect" coords="331, 817, 754, 961">
<area href="https://example.com/wp-content/uploads/2018/03/image7.jpg" shape="rect" coords="86, 1039, 286, 1238">
<area href="https://example.com/wp-content/uploads/2018/03/image8.jpg" shape="rect" coords="474, 1143, 674, 1340">
<area href="https://example.com/wp-content/uploads/2018/03/image9.jpg" shape="rect" coords="147, 1382, 344, 1586">
<area href="https://example.com/wp-content/uploads/2018/03/image10.jpg" shape="rect" coords="499, 1492, 665, 1657">
<area href="https://example.com/wp-content/uploads/2018/03/image11.jpg" shape="rect" coords="115, 1770, 286, 1939">
<area href="https://example.com/wp-content/uploads/2018/03/image12.jpg" shape="rect" coords="477, 1870, 641, 2038">
</map>
<img src="/images/image.jpg" usemap="#FPMap0" width="800" border="0" height="2350">

…you can then use the FooBox Pro settings under General > Specific CSS Classes and JS & CSS > Custom FooBox Selector.

In the Specific CSS Classes option enter the selector to target the map element, in this case: map[name=”FPMap0″]
Then update the Custom FooBox Selector to also target area elements, so the new selector would be: a, area

That should be it, if you like you can even skip having to set the Specific CSS Classes value by instead adding class=”foobox” to your map element.

You can also use the data-title and data-description attributes on the area elements to get captions to appear, for example:

<map name="FPMap0">
	<area data-title="My Title" data-description="My description goes here." href="..." shape="rect" coords="19, 15, 230, 193">
</map>

So in summary, yes it’s possible but only with the PRO version of FooBox at this time.

We have FooBox Pro, I’ll give it a try and see what happens

Ya, way to complicated to me.