aniruddhanath / jquery-hotspot Goto Github PK

Hello,
First of all, thank you for sharing your code. This is not an issue. But there is no place to ask, so I am using this area to ask. I am new to jquery hotspot. I would like to add code to open website when user clicks the hotspot. How can I add href link? Can I add href link to where you have under data: [ {"x", "y"}] in basic_usage.html?

Please advise how can we add a click event for each property box opens. The scope behind this is to open particular modal on clicking a button which will be presented on the property box.

Thanks in advance. Really appreciate your work.

Hello, I am using v2.0.2 and the dots are not responsive on your examples or on my own. When I shrink down the browser, the spots move off the images. If you could advise, that would be wonderful thanks

Hi all,

I have a siema (https://github.com/pawelgrzybek/siema) slider running on my page. Adding hotspots to the visible slides is not an issue at all - adding them for slides that are not visible (visible as in not shown in the browser since overflow is set to hidden in the parent DIV - from a css perspective I believe they are set to visible) does not work.

I tried using siemas onChange event which fires every time slides change, but without any luck.

Within the onChange event I added this code:

$("#tattoo-slider-3").hotspot({
                        data: [
                            { "x":10, "y":10, "Title":"Travel Mugs","Message":"<a href='/dinnerware/tattoo-cilla-marea/?_bc_fsnf=1&Product=Mugs' class='button button--primary' style='line-height: 0.5rem;padding: 0.5rem;'>see details</a>" }
                        ],
                        tag: 'img', //optional (default is img)
                        interactivity: "hover", // options : click, none (default is hover),
                        pulse: true // this is a customization I added
                    });

I have a feeling the hotspots are not being set for items which are not visible on screen...

Can you point me into the right direction?

Thanks!
Marc

EDIT: here the link to the plugin in my production environment:
https://www.rosenthalusa-shop.com

I have added few hotspot on image and saved them, now i want to edit the Title and description of that hotspot, but currently i am not able to edit hotspot, so is there any solution for this ?

Hello,
First of all, thanks for this very nice plugin.
I work under wordpress and have tried to use the jquery-hotspot, but I have some problems.
If I write the following html in the php file of my page:

`

		    <div class="col-md-6">

			<div id="theElement">
				<img src="IMG_5990.JPG" width="480" height="400">
			</div>
			</div>
	</div>
</div>`

I am using this plugin in IE 8, but is is showing error in calling hotspot function.
error is "expected identifier, string or number"

Hello,

How can we delete individual hotspot?
Please advice.

Thanks

Hello, I am using v2.0.2 and the dots are not responsive on your examples or on my own. When I shrink down the browser, the spots move off the images. If you could advise, that would be wonderful thanks

How to bind points to the background image div?

Living example

<section>
    <div class="container main-background" id="main_foto_hotspots">
      // img background
    </div>
</section>

.main-background {
  background-image: url(main_foto.webp);
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: top;
  background-size: 50%;
}

jQuery('#main_foto_hotspots').hotspot({
  data: [
    { "x":18, "y":38, "Title":"The Title","Message":"Create the Message here" },
    { "x":43, "y":40, "Title":"jQuery Hotspot","Message":"This jQuery Plugin lets you create hotspot to any HTML element." }
  ],
  tag: '**div.background**', //optional (default is img)
  interactivity: "click", // options : click, none (default is hover)
  hotspotClass: 'Hotspot'
});

Hi,

When i'm trying to fetch the data using AJAX, i need to pass data to the webservice that i'm calling but when the webservice is called it says no parameter is found and throws an error. The code i'm using is as follows:

var values = { imageId: "HotspotPlugin-b" };
$("#divHotspotTest").hotspot({
mode: "admin",
// uncomment
ajax: true,
ajaxOptions: {
url: 'QuestionPack.aspx/GetHotspotData',
data: JSON.stringify(values),
type: 'GET',
contentType: "application/json; charset=utf-8",
dataType: "json",
processData: false,
success: function (response) {
console.log("Success Hotspot b: ", response);
alert("Success Hotspot ", response.d);
},
error: function (response) {
console.log("Error Hotspot b: ", response);
alert("Error hotspot b ", response.status);
}
},
LS_Variable: "HotspotPlugin-b",
done_btnId: 'done-b',
remove_btnId: 'remove-b',
server_btnId: 'server-b',
done_btnClass: 'btn btn-success controls',
remove_btnClass: 'btn btn-danger controls',
sync_btnClass: 'btn btn-info controls',
afterSave: function (message) {
alert(message);
},
afterRemove: function (message) {
alert(message);
window.location.reload();
},
afterSyncToServer: function (message) {
alert(message);
}
});

Any help would be appreciated. Thanks in advance!

Hi,
I want to save posted data to mysql database. I activate ajax method. My code:
$(document).ready(function(){
var TreatmentID = $("#theElement-a").attr("TreatmentID");
$("#theElement-a").hotspot({
mode: "admin",
schema: [
{
'property': 'TreatmentID',
'default': TreatmentID
},
{
'property': 'Date',
'default': '12/11/2018'
},
],
// uncomment
ajax: true,
ajaxOptions: {
'url': 'saveguide.php'
},
interactivity: "click",
LS_Variable: "HotspotPlugin-a",

		afterSave: function(err, data) {
			if (err) {
				console.log('Error occurred', err);
				return;
			}
			alert('success');
			// `data` in json format can be stored
			//  & passed in `display` mode for the image
			console.log(data);
		},
		afterRemove: function(err, message) {
			if (err) {
				console.log('Error occurred', err);
				return;
			}
			alert(message);
			window.location.reload();
		},
		afterSend: function(err, message) {
			if (err) {
				console.log('Error occurred', err);
				return;
			}
			alert(message);
		}
	});

});

how to print posted values in saveguide.php file?

Thank you
Mansour

Hi,
I want all existing spots be cleared after the client click on the remove button without page reload.

Thanks
Mansour

Hi,
I need this Hotspot creator in responsive view, how to get X,Y Positions in Percentage ?
i want to host this in mobile based app.
please help me.

Hi, I have the system installed on my website and when I log in as a user, add and save spots and log out, the spots are there when I login as a different user before I choose any spots. They are being 'remembered' for the next user. Is there a way to clear them out of the browser after I leave the page? many thanks

Hi,
My website direction is RTL.
After clicking on the image , all input fields are left to right. How may I change the input fields appearance and add "form-control" to them?
Thanks
Mansour