Sortable images with jquery sortable in HTML
I'm trying to make sortable images with jquery in HTML. What is wrong with
the source here? I've defined the jquery sortable function in a
functions.js file and tested it on this page with text, so I know it
works. But I can't get it to work with the divs of the images and their
respective titles. Do I have to set up the CSS for the image divs a
certain way?
Here is the source. See "sortable" for the sortable div, which surrounds
the image divs.
<html xmlns:exist="http://exist.sourceforge.net/NS/exist">
<head>
<title>William Blake Archive Comparison of The First Book of
Urizen (1794): electronic edition</title>
<script src="/blake/applets/lightbox/lb.js"></script>
<link rel="stylesheet" type="text/css" href="/blake/style.css" />
<link rel="stylesheet" type="text/css" href="/blake/slider.css" />
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
/>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
type="text/javascript"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"
type="text/javascript"></script>
<script src="/blake/jQueryRotate.2.1.js"
type="text/javascript"></script>
<script src="/blake/binaryajax.js" type="text/javascript"></script>
<script src="/blake/imageinfo.js" type="text/javascript"></script>
<script src="/blake/exif.js" type="text/javascript"></script>
<script src="/blake/accessibleUISlider.jQuery.js"
type="text/javascript"></script>
<script src="/blake/functions.js"></script>
<style type="text/css"></style>
<meta lang="en" />
<script type="text/javascript"></script>
<link rel="meta" type="application/rdf xml"
href="/exist/blake/archive/rdf.xq?req=&mode=obj" />
</head>
<body onLoad="window.name=''">
<div>
<table cellpadding="25" style="width:auto;" id="comparison">
<tr>
<div id="sortable" class="ui-state-default">
<td valign="top" align="center"
style="font-size:smaller;">
<div style="min-width:350px;">
<p>The Book of Urizen, copy G,
c. 1818 (Library of Congress): electronic edition <br />
<a
href="/exist/blake/archive/object.xq?objectid=urizen.g.illbk.21&java=no"
target="wbamain">object 21 (Bentley
21, Erdman 21, Keynes 21)</a>
</p>
<img
src="/blake/images/urizen.g.p21.100.jpg"
/>
<p>
<a
href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.g')">
<span
style="font-size:smaller">©<date>1998</date>
</span>
</a>    
</p>
</div>
</td>
<td valign="top" align="center"
style="font-size:smaller;">
<div style="min-width:350px;">
<p>The First Book of Urizen, copy B,
1795 (Morgan Library and Museum): electronic edition <br />
<a
href="/exist/blake/archive/object.xq?objectid=urizen.b.illbk.23&java=no"
target="wbamain">object 23 (Bentley
21, Erdman 21, Keynes 21)</a>
</p>
<img
src="/blake/images/urizen.b.p23-21.100.jpg"
/>
<p>
<a
href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=urizen.b')">
<span
style="font-size:smaller">©<date>2003</date>
</span>
</a>    
</p>
</div>
</td>
<td valign="top" align="center"
style="font-size:smaller;">
<div style="min-width:350px;">
<p>A Large Book of Designs, copy A,
1796 (British Museum): electronic edition <br />
<a
href="/exist/blake/archive/object.xq?objectid=bb85.a.spb.02&java=no"
target="wbamain">object 2 (Bentley
85.2, Butlin 262.3)</a>
</p>
<img
src="/blake/images/bb85.a.2.ps.100.jpg" />
<p>
<a
href="javascript:START('/exist/blake/archive/userestrict.xq?copyid=bb85.a')">
<span
style="font-size:smaller">©<date>2012</date>
</span>
</a>    
</p>
</div>
</td>
</div>
</tr>
</table>
</div>
<p>
<script language="JavaScript">
datestamp( );
</script>
</p>
</body>
</html>
No comments:
Post a Comment