waynegm
commented
10 years ago Hi,
Here is the demo.html file from master hacked to include a second image. This works for me as expected. Give this a try and let me know how you get on.
<!DOCTYPE html>
<html>
<head>
<title>jQuery imgNotes - Interactive Base</title>
<style type="text/css" media="all">@import "css/marker.css";</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" media="screen">
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="libs/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="libs/jquery.fs.zoetrope.min.js"></script>
<script type="text/javascript" src="libs/toe.min.js"></script>
<script type="text/javascript" src="libs/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="libs/imgViewer.min.js"></script>
<script type="text/javascript" src="src/imgNotes.js"></script>
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<h1 style="text-align: center;">jQuery imgNotes - Basic Interactive Example</h1>
<p>
This example demonstrates a no frills note editor with a button to toggle the widget mode between view
and edit and a button to export the notes to a table below the image.
</p>
<div id="imgdiv" style="text-align: center">
<img id="image" src="image/test_image.jpg" style="border: 30px solid #ccc; padding:20px;" width="80%"/>
<br/>
<button id="toggleEdit">Edit</button> <button id="export">Export</button>
</div>
<div id=txt></div>
<div id="imgdiv2" style="text-align: center">
<img id="image2" src="image/image2.jpg" style="border: 30px solid #ccc; padding:20px;" width="80%"/>
<br/>
<button id="toggleEdit2">Edit</button> <button id="export2">Export</button>
</div>
<div id=txt2></div>
<script type="text/javascript">
;(function($) {
$(document).ready(function() {
var $img = $("#image").imgNotes();
$img.imgNotes("import", [ {x: "0.5", y:"0.5", note:"AFL Grand Final Trophy"},
{x: "0.322", y:"0.269", note: "Brisbane Lions Flag"},
{x: "0.824", y: "0.593", note: "Fluffy microphone"}]);
var $toggle = $("#toggleEdit");
if ($img.imgNotes("option","canEdit")) {
$toggle.text("View");
} else {
$toggle.text("Edit");
}
$toggle.on("click", function() {
var $this = $(this);
if ($this.text()=="Edit") {
$this.text("View");
$img.imgNotes("option", "canEdit", true);
} else {
$this.text('Edit');
$img.imgNotes('option', 'canEdit', false);
}
});
var $export = $("#export");
$export.on("click", function() {
var $table = $("<table/>").addClass("gridtable");
var notes = $img.imgNotes('export');
$table.append("<th>X</th><th>Y</th><th>NOTE</th>");
$.each(notes, function(index, item) {
$table.append("<tr><td>" + item.x + "</td><td>" + item.y + "</td><td>" + item.note + "</td></tr>");
});
$('#txt').html($table);
});
var $img2 = $("#image2").imgNotes();
$img2.imgNotes("import", [ {x: "0.5", y:"0.5", note:"AFL Grand Final Trophy"},
{x: "0.322", y:"0.269", note: "Brisbane Lions Flag"},
{x: "0.824", y: "0.593", note: "Fluffy microphone"}]);
var $toggle2 = $("#toggleEdit2");
if ($img2.imgNotes("option","canEdit")) {
$toggle2.text("View");
} else {
$toggle2.text("Edit");
}
$toggle2.on("click", function() {
var $this = $(this);
if ($this.text()=="Edit") {
$this.text("View");
$img2.imgNotes("option", "canEdit", true);
} else {
$this.text('Edit');
$img2.imgNotes('option', 'canEdit', false);
}
});
var $export2 = $("#export2");
$export2.on("click", function() {
var $table = $("<table/>").addClass("gridtable");
var notes = $img2.imgNotes('export');
$table.append("<th>X</th><th>Y</th><th>NOTE</th>");
$.each(notes, function(index, item) {
$table.append("<tr><td>" + item.x + "</td><td>" + item.y + "</td><td>" + item.note + "</td></tr>");
});
$('#txt2').html($table);
});
});
})(jQuery);
</script>
</body>
</html>
micer
Is it somehow possible to add multiple images with imgNotes on one page? From what I've tried ($('#image').notes(...) and $('#image1').notes(...)) it works only for the last image. Thanks!