In my previous DeepZoom & SeaDragon post I explained how to build a web gallery using SEADragon.
Show thumbs in JCarousel
I dont like the thumbs to be displayed all at once, so I decided to use a jCarousel instead. jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
jCarousel is quite simple to use. In order to have a carousel you include the JCarousel libraries (available for download in ) and build a code like the following.
1 2 3 4 5 6 7 8 | <ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
</ul> |
Its very simple: an <il> for each <img>, everything wrapped in an <ul> called, for instance, mycarousel.
You can see a super-simple example of JCarousel HERE.
JCarousel & SEADragon
Before you continue reading you should understand the code shown in
my first DeepZoom & SeaDragon post. You can see it working HERE.
The modifications to show the thumbs in a JCarousel are quite simple (I will only show the relevant part of the new code):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <script type="text/javascript" src="ajax/0.8/seadragon-branded.js"></script>
<script type="text/javascript" src="data2.js"></script>
<script type="text/javascript">
var viewerDiv = document.getElementById('viewer');
var thumbsDiv = document.getElementById('thumbs');
var titleDiv = document.getElementById('title');
var descDiv = document.getElementById('desc');
var botonesDiv = document.getElementById('botones');
viewerDiv.innerHTML = ""; // for the CMS
var viewer = new Seadragon.BrandedViewer(viewerDiv);
var selectedItem = null;
var thumbsPath = 'http://155.210.85.31/dzi/miguel/mini/';
function doOpen(item, anchor)
{
if(selectedItem)
selectedItem.button.src = thumbsPath + selectedItem.thumb + '_rest.png';
if(item)
{
viewer.openDzi(item.dzi, item.xml);
titleDiv.innerHTML = item.title;
descDiv.innerHTML = item.desc;
item.button.src = thumbsPath + item.thumb + '_selected.png';
selectedItem = item;
if (anchor) {
window.location.hash = "#" + item.thumb;
}
}
}
/* here begins the IMPORTANT PART... */
var ul = document.createElement('ul');
ul.id = "mycarousel";
ul.className = "jcarousel-skin-tango";
thumbsDiv.appendChild(ul);
var count = data.length;
var dataMap = {};
var a;
for (a = 0; a < count; a++)
{
var item = data[a];
var image = document.createElement('img');
// index item by its thumb name
dataMap[item.thumb] = item;
image.src = thumbsPath + item.thumb + '_rest.png';
image.className = "thumb";
image.title = item.title;
image.id = a;
image.name = a;
Seadragon.Utils.addEvent(image, "click",
Seadragon.Utils.createCallback(null, doOpen, item, true));
thumbsDiv.appendChild(image);
item.button = image;
var li = document.createElement('li');
li.appendChild(image);
ul.appendChild(li);
}
// if the page's hash is set, open image with that hash
// if there is one. otherwise, just open the first image.
// note that if there's a hash, it'll begin with #.
var hash = (window.location.hash || " ").substr(1);
doOpen(dataMap[hash] || data[0], false); // don't anchor
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
</div> |
- Lines 36 to 40 create the new
<ul>and append it to thethumbsDiv - Lines 68 to 71 create every
<li>element and append it to the recently created<ul> - Lines 81 to 85 create the jCarousel using jQuery
- Note1: in the previous version of the code we used
xandyvariables (defined in lines 134, 135 and used to set the thumbs position -lines 147, 148- so the thumbs where shown in rows of ten elements). These variables are no longer needed, as the thums are managed by jCarousel.Now you can see a full working example HERE.
In my next article I will explain how to remove the annoying SEADragon logo in the bottom left of the viewer
![;)]()
