Code

Discussion on Hotspotter - Hotspot Maker jQuery Plugin

Discussion on Hotspotter - Hotspot Maker jQuery Plugin

By
Cart 880 sales

z-B supports this item

Supported

105 comments found.

Hello, We just bought the plugin but before that we read that in the documentation was included the instructions to integrated with wordpress?

we know is not supported but we wanted to try with the instructions but we couldnt find them.

where can we find them?

THanks

Hi,

The docs don’t have any reference to wordpress installation anymore since I dropped support for it more than a year ago. Not sure were you read that it’s included.

Sorry for any inconvenience but I no longer support wordpress

Hi, we read it on one of the comments and that was the only reason why we bought it. Do you think its possible you can send me the instructions or a guide (an old one if you have) just to have an idea?, we wont ask for support as we understand is not supported anymore.

Thanks in advance

Please email me from my profile page here http://codecanyon.net/user/z-B

And include your email address

could I able to set a URL for tagging my parts in my images, I mean not URL as a text, I meant, the user click on the tag when appears and move him to a page on my website ?

I am not sure I got your point clearly, but you can turn a hotspot into a link so that when you click on it the browser will go to a specific URL

You can test this feature on the editor here http://dbasem.com/my-apps/hotspotter/Editor/Editor.html

Yeas, you understand me well, but when I try to turn a hotspot into a link, I see that error: http://dbasem.com/my-apps/hotspotter/Editor/google.com

also, I have my website with only 1 page, this page is image, so could I able to use your script ?

1- You need to use a fully qualified link, ex: http://google.com NOT google.com

2- Yes you can use hotspotter with 1 page, the number of pages is not relevant in this context

Even though you no longer support it for WP are the instructions for WP integration still in the download. Not really a deal breaker if we can’t, but can we access them before we buy. Just to see if we can handle it. I will most likely buy anyway. looks great.Don’t know how I missed it..

Hi,

Thanks for your interest in hotspotter!

Actually there’s nothing complicated in installation process, you just need to add jquery “in most cases you already have it” then add a single css and single js file for hotspotter.

The problem is that mixing HTML generated from the Editor with wordpress tags breaks the generated HTML as wordpress tries to add addition “p” tags. There’s ways to overcome this but it’s not beginners friendly.

The second problem is that if you added the css and js files directly to your theme “header.php”, then when updating the theme later, the file inclusion will be remove.

If you are experienced enough and knows how to tackle those issues, I will happily support you for any hotspotter related issues you may encounter :)

I had a problem [ mine] at first but a very quick reply from z-B got it up and running and I LOVE IT. Superb plugin 10 stars

Thanks :)

A compliment to the author. Very nice product and he has been super helpful in providing guidance on a custom implementation of his product. Very responsive and has offered great input and advice. I wish all developers were as helpful as z-B.

Thanks so much :)

Hello, I just purchased this. Can you tell me where is this documentation for wordpress implementation?

WP 3.8

Unfortunately I have already discontinued wordpress installation support since July 2014 & added a warning in item page, here http://codecanyon.net/item/hotspotter-hotspot-maker-jquery-plugin/3833015

Sry about that!, U can still request a refund

Hi there,

Is it possible to make a link that is outside of the image map trigger one of the tooltips on hover?

That works perfect, thank you. How do I find your email? Only have one final query – just wondering how to speed up the fade in and out timings for the tooltip please?

You can use the form in my profile page here to email me http://codecanyon.net/user/z-B

For fading, it just use jquery functions “fadeIn” and “fadeOut” search for both and change it’s parameter, there’s only one occurence for each

Ok thank you!

Hello,

Is it difficult to implement into an Htlm or any kind of website;Wordpress,ect… and can we add our own icons ? All the best

Hi,

1- You just need to include the required js & css code and it will work fine anywhere, plz note that I no longer support installation in CMSs like wordpress or joomla. But it’s simple if u have the basics of js & css u will be able to install it ur self.

2- Yes u can use custom image spots, u can try it now in the editor, or use custom styles for any hotspot

Hi, one question.

It Works inside an iframe?

thanks

Hi,

Yes, iframe is just like a normal page

Hi, first great work, bought the plugin, thank you.

I was wondering if this can be used on an SVG or if it has to be a traditional image type? I’m a bit of a newb, my apologies if I’m missing key info.

I attenmpted to link to an SVG with a URL, but the editor won’t show the page. Thank you for any help.

Ahh, a quick search answered my question. Thank you for your time and effort!

Your welcome!, let me know if u still have any questions i will be happy to answer :)

Just email me from my profile page here http://codecanyon.net/user/z-B

As i immediately get notification for it unlike the comments here.

Really great app! Thanks….

Your welcome :)

Hi, its possible use in a big image size like a “On the ground” in greenpeace example?

Hi,

Yes, u already saw the Greenpeace example and u can try to load a large image in the Editor & check the preview before buying!

Here’s a direct link to the Editor to test: http://dbasem.com/my-apps/hotspotter/Editor/Editor.html

Can you add a feature that would allow to search inside multiple hotspots and display the result on the image.

Hi,

Unfortunately I am not available for custom work currently.

Can you add a feature that would allow scrolling of a panoramic photo like in this example? The photo can be scrolled left and right using the side arrows.

It’s not related to hotspotter but it could be added on top of code generated from it, as the Editor is already able to work with wide images.

Email me if u wanted to do it as separate custom work, u can do so using contact form in my profile page here

http://codecanyon.net/user/z-B

Great plugin. I’m using this to display testimonials from around the country however there was some interfering CSS in my code, so I just put the HotSpotter code in an iframe. However, now the pop-up windows are hidden by the iframe. Can you help me figure out how to display the HotSpotter popup windows overtop the Iframe? Here is the URL http://www.helicopterflightschool.com/testimonials.htm – Thanks in advance!

Hi,

that’s actually not possible as iframes are treated as separate document so content in it cannot overflow out of the iframe.

u will need to resolve the CSS conflict that will ease maintenance of code in the future beside allowing the popups to flow normally in page

Hi, thank you for the quick reply. I’ve removed the code from the iframe but I cannot for the life of me figure out where the conflicting code is. Can you find it? It’s on the same URL as above

The DIV element before hotspotter code which has class “main_W1004_h” & contain text “TESTIMONIALS / CAREER TRACKS”

just add “clearfix” class to it so end result is

class=”main_W1004_h clearfix”

and have fun!

I just purchased this item. I am not an expert coder or WordPress master. Some customers here have found it easy to install others like me maybe not so. In any case, z-B assisted me beyond my expectations and was cheerfully willing to help me all the way.

If you are interested in this plugin don’t hesitate or let anything hold you from purchasing it. I am incredibly thankful and must point out that as a customer to a customer, you don’t have to worry when you buy this item. Personally speaking, I am not only satisfied with your product z-B but you went as far as assisting me personally to get me started using the plugin.

Thank you for the great support!!! :)

u r welcome!

Hello, I have successfully installed the plugiin on my wordpress site, I have verified the page, both .css file and .js were found. i have verified the image, it does load the style. BUT i only get a normal image with no effects on it.

http://bde-mis.fr/test/ Can you plase help me?

Hi,

u add it successfully, but the problem is that u run the plugin very early on the page before jQuery loads.

i mean the code
<script>
jQuery(document).ready(function ($) {
    $('.hs-area').hotspotter();
});
</script>

need to run AFTER u load jquery, just add it before ’</head>’ in ‘header.php’ file as suggested in docs.

let me know if u faced any trouble i will be happy to help!, u can always email me from my profile page here http://codecanyon.net/user/z-B

Hi. Nice plugin. It was the best hotspot plugin I’ve found on CodeCanyon. But I have some questions:

1 – I would like to know how can I insert a WYSIWYG editor inside Hotspotter’s editor. I would like to insert images, links, styling and other stuff without recurring to HTML. 2 – When I paste the code generated in Hotspotter Editor, it displays a black border when I use Shadow Spot. How can I change that? 3 – When I preview a high resolution image in Hotspotter Editor, it doesn’t displays well the page. It cuts part of the image. Can you take a look at this? Thank you.

Hi, glad u liked it!

1- Actually i installed “TinyMCE” for a client a while ago, just follow their installation instruction nothing specific to hotspotter

2- u can change the styles for shadow spot just search in the accompanying css file “jquery-hotspotter.css” for ”.shadow-spot”

3- yes it do, and it should because the image is larger than the drawing canvas so the image is cut and it show horizontal and vertical scrollers so u can access the whole image

let me know if u still have any questions, just email me. u can do so from my profile page here http://codecanyon.net/user/z-B

Hi there! First, thanks for the plugin. I have successfully installed it on my wordpress installation.

I cannot seem to make the tooltips responsive. They are fine until the image resizes. Also, is there a way to make the image stretch to the full resolution of whatever window/browser it is viewed in? (In other words, 100 percent width, while retaining correct proportions…not over stretched to fit?) My page is here: http://lamandorla.ca/

Any help would be appreciated, thanks!

Hi,

glad u liked it!

- the tooltip position relative to image will be adjusted according to current used image size, however the tooltip dimension wont change as it’s highly context dependent & no single solution that fit all proposes so u will need to provide necessary css for it

- just give the image 100% width and the browser will scale proportionally, also u will need to add js code provided in docs so if the user resized browser window the spots will resize as well & tooltips adjust position

plz use email, u can do so from my profile page here http://codecanyon.net/user/z-B

thanks

An addition to this. It seems to work on page load, in other words, when I load it on a phone, or a laptop, the image is correctly sized, but if I try to resize my browser on the computer, the image map doesnt dynamically resize. Also, it would be great if the image stretched to the browser width by default.

yes that’s why i asked u to add the js in docs specifically this one
jQuery(window).bind('resize', function() {
    setTimeout(function() {
        jQuery('.hs-area').hotspotter();
    }, 400);
});

that way the spots will scale with the image as the browser resize, and to stretch image to browser width just add css ‘width:100%’

Hi,

I’m going to build a website where people can mark and annotate on pictures and maps. Does your plugin support marking by visitors and uploading their works?

Hi,

it’s only for single user, but it could be easily customized for multiuser and uploads.

i will be happy to provide support for you or your developer if u go for customization. just email me from my profile page when u get ready.

http://codecanyon.net/user/z-B
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey