imgspect
The imgspect project is the home of two closesly related jQuery plug-ins, the eponymous imgspect and its friendly helper, imgbit.
imgspect
imgspect builds an application for captioning / transcribing select areas of large images.
imgbit
imgbit is the plugin used to display areas you highlight with imgspect as if you cropped them with Photoshop and saved them as new files.
Use imgspect for...
- Serious research
- Art critiques
- Amusing your friends
Requirements
-
jQuery ( http://jquery.com )
-
jQuery UI Draggable ( http://jqueryui.com/draggable )
- I have experienced problems with jQuery UI 1.10.3 hosted by Google version 1.10.2 is stabler.
-
menumucil ( https://github.com/caesarfeta/menumucil )
-
jslib ( https://github.com/caesarfeta/jslib )
-
plopup ( https://github.com/caesarfeta/plopup )
Install
Clone the repository and submodules
cd {% js-dir %}
git clone https://github.com/PerseusDL/imgspect.git imgspect
cd imgspect
git submodule update --init
Include the necessary files
imgspect
<!-- CSS -->
<link rel="stylesheet" href="{% js-dir %}/imgspect/third_party/menumucil/css/menumucil.css">
<link rel="stylesheet" href="{% js-dir %}/imgspect/css/imgspect.css">
<link rel="stylesheet" href="{% js-dir %}/imgspect/css/imgbit.css">
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="{% js-dir %}/imgspect/imgspect.js"></script>
<!-- HTML -->
<img id="imgspect" src="{% url-to-some-image %}" />
<!-- Start imgspect once image has loaded -->
<script type="text/javascript">
$(window).load( function(){
$( '#imgspect' ).imgspect();
});
</script>
imgbit
<!-- CSS -->
<link rel="stylesheet" href="{% js-dir %}/imgspect/css/imgbit.css">
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="{% js-dir %}/imgspect/imgbit.js"></script>
<!-- HTML -->
<a class="imgbit" href="{$ url-to-image %}?x1=0&y1=0&x2=100&y2=100">{% caption %}</a>
<a class="imgbit" href="{$ url-to-different-image %}?x1=0&y1=0&x2=100&y2=100">{% caption %}</a>
<!-- Start imgbit -->
<script type="text/javascript">
$(document).ready( function(){
$( '.imgbit' ).imgbit();
});
</script>
For further documentation browse the examples
View the examples here.
imgspect
... see ./examples/imgspect
imgbit
... see ./examples/imgbit