Dopeless Hotspots is Jquery plugin, that allows you to convert any static image to interactive presentation. It features:

  • Ease of use
  • Unlimited hotspots amount
  • Support of touchscreen devices
  • Ability to use multiple instances on a single page
  • Automatic positioning of hotspots based on hotspot content and image size
  • Ability to add images to hotspots content to sow detailed view of your product
  • Nice modern design


Please feel free to contact me about bugs. (Current ver. 1.0)

Dopeless Hotspots usage examples

Dopeless Hotspots

News

12.03.2013 - Update to version 1.1

Touch device detection fixed.

06.02.2013 - Version 1.0 released

How to use

1. Download Dopeless Hotspots, that includes:

  • dopelessHotspots

    • css

      • style.css –main CSS

      • arrow.png – arrow icons for zoom-in image frame

      • hide_hotspots.png – hide hotspots icon

      • show_hotspots.png –unhide hotspots icon

      • hotspot_plus.pngexpand hotspot icon

      • hotspot_minus.pngcollapse hotspot icon

    • scripts

      • dopelessHotspots.js – Jquery plugin

      • dopelessHotspots.min.js –Plugin minified version

         

2. Extract package contents somewhere on your server.
 

3. Include dopelessHotspots.js plugin in <head> section of your HTML after Jquery main library connection.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript" src="dopeless_hotspots/scripts/dopelessHotspots.min.js"></script>
 

4. Provide Link to CSS file in <head> section of your HTML

<link rel="stylesheet" href="dopeless_hotspots/css/style.css" type="text/css" media="screen" />
 

5.Add <div> container to your HTML, specify it's ID:

<div id='my_hotspot'></div>
 

6. Add an image to newly created <div> element

<div id='my_hotspot'>

   <img src='images/my_image.jpg'/>

</div>
 

7.Add an<a> element with a class 'sethotspot' after an image for every hotspot you want to appear. You must specify some attributes for every <a> element:

title: hotspot title

posix: horisontal position (in percents, relative to image width)

posiy: vertical position (in percents, relative to image height)

href: relative path to hotspot zoom-image (optional)

content of an <a> element: text to appeat on hotspot (optional)
 

<div id='my_hotspot'>

   <img src='images/my_image.jpg'/>

   <a class='sethotspot' href='#' title='My Title' posix='12' posiy='72'></a>

   <a class='sethotspot' href='dopeless_hotspots/images/ethernet.jpg' title='Other title' posix='46' posiy='76'>My hotspot text</a>

</div>
 

8. Add plugin call somewhere after image

<script>

   $(document).ready(function() {

      $('#my_hotspot').dopelesshotspots({

      });

   });

</script>
 

To use multiple instances on a single page you have to add several <div> containers with unique IDs. Then you have to run plugin for every image. For example:
 

<script>

   $(document).ready(function() {

      $('#my_hotspot').dopelesshotspots({

      });

      $('#my_second_hotspot').dopelesshotspots({

      });

   });

</script>
 

9. You can specify theese options:

 

option

default value

description

hotspotsTitle

Highlights

Title of hotspots menu

maxHotspotWidth

30

Maximal width of hotspot, relative to image width

showMenu

true

If to show navigation menu

showHideBut

true

If to show hide button

 

Example of using options:

<script>

   $(document).ready(function() {

      $('#hotspot_1').dopelesshotspots({

         'hotspotsTitle':'Hotspots',

         'showMenu':false

      });

   });

</script>

Dopeless Hotspots licensed under Creative Commons Attribution-NonCommercial 3.0 license.

You can freely use Dopeless Hotspots for your personal non-commercial projects.
If you want to use Dopeless Hotspots for commercial purposes, you have to pay a fee.

You must provide a link to this page by repost.

Created by Dopeless Design