jQuery (anyone?)

Hi Blocheads.
I’ve got a jQuery plug in, and I’m trying to add mouseover hotspots to an image.
The plugin gives .css, .js cut and paste code lines, and the associated files to add.
Sadly I haven’t got a clue where to put them, and what they do!
I’m happy to add code to the exported files, but I’m at a loss.
I’m trying to achieve the same as a car image on bloc users’ page
http://кузовной-ремонт23.рф/


Any guidance would be gratefully received.
Many thanks,
Andy

Can’t help you but I’d love to know, too!

@blocs-user ?

@apswoodwork

Can you PM me a zip with the files.
It’s impossible to figure this out without seeing the code involved.

Cheers

Hi, apswoodwork! Here is a link to a plugin: http://rgho.st/8XVy6rj54
Download, unarchive it. Go to “masterslider.v1.7.2\slider templates\showcase1” folder. It’s the same template that I’ve used on my page. Everything you need to do to plug in this template to your webpage is described in “demo.html” page that is located at the same folder. And then just customize it as you wish by your hand )))

“demo.html” webpage contains three links: HTML, Javascript and Required Files sections. “HTML” section contains a piece of html code that you just have to paste to your page where you’d like hotspots to be displayed. “Javascript” section contains a bit of javascript code that you need to place in the end of your page where you’d like hotspots to be displayed but before </body> teg. And “Required Files” contains a list of all nesessary files that you have to copy to your webpage’s folder and specify at page where you’d like hotspots to be displayed between <head> and </head> tegs.

P.S. Sorry for my english. I hope you will understand everything I mean ))

1 Like

Hi.
That’s fantastically helpful.
I assume most of the java code is not needed for a single image.
Very much appreciated,
Andy

I’ve noticed that point’s flickering may vary in different browsers. Sometimes it doesn’t flicker at all ((( Maybe we need to get an advice from masterslider.com support…

Hi @Blocs_User
Did you paste the code elements in Blocs via 'HTML ’ brick and page settings, or was it added after exporting?

Everything was done after exporting my website from Blocs ))

Dear @blocs-user
@Jakerlund
I’ve got this far, but I’m not sure which files I need to edit for the button colour, size and position, the image size and to remove the pesky hand icon.
http://www.apswoodwork.uk/test.html
Which ones should I edit?
The way you car image is set up is really well done, I can only hope to get that good.
I have all the master slider elements in 1 folder on my site and I’ve deleted loads of the files no longer needed.


Thanks for your help this far.
Andy

It’s difficult to me to explain everything in english ((

The easiest way to change styles of the webpage objects on the fly is using firebug addon for browser. I usually use Mozilla Firefox browser and firebug plugin for it. This plugin can very easily show you where and which css file you have to edit for your needs. Also if you have any experience in html, css, you can do changes directly in this plugin and then apply all the changes by saving everything in your favorite html/css editor.

That sounds useful.
I’m trying AddDot plugin next.

Thanks for the Firefox tip. I never realised that was a thing, and it’s turning out to be really helpful.
I’m stuck on 2 last things.

  1. Where is the code to change the colour of the hotspot box background (yours are red)?
  2. I have a small minor error when I scroll up and down again the hotspots disappear. Could you send (DM) me your page code so I can see where I’m going wrong? I think it’s a problem with the linked.js folders added before the tag.
    All your help is very much appreciated, thanks.
    A known the image is not very good yet, but I’m up to here.
    Thanks again, Andy.
    www.apswoodwork.uk/terms.html

I can see that your hot spots are already with red border ))

I’m nearly there:nerd:. I just have an issue where the hotspots disappear sometimes on iPad when I click other places.
But the Firebug trick, showing the source file and line number has been a great tip, thanks.
Just need a better image and I can upload.

So I finally found time and have it working. And I’ve worked out how to edit it.
Did you find that the hotspots disappeared after a few clicks on IOS? It seems fine on desktop screen. Apart from that all works, so thanks again for your support.
Andy

I saw where you went with the codecanyon plug-in. Im having the same problems figuring out what goes where. Any advice?

More on…jQuery