Dopeless Hotspots is Jquery plugin, that allows you to convert any static image to interactive presentation. It features:
Please feel free to contact me about bugs. (Current ver. 1.0)
12.03.2013 - Update to version 1.1
Touch device detection fixed.
06.02.2013 - Version 1.0 released
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.png – expand hotspot icon
hotspot_minus.png – collapse 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
