<HTML>
<HEAD>
<TITLE>Javascript Filmstrip: Example #3</title>
<style type='text/css'>
.thumbnail {
margin-right: 5px;
width: 75px;
height: 75px;
}
.filmstrip {
position: absolute;
overflow: hidden;
height: 75px;
cursor: w-resize;
}
</style>
</HEAD>
<BODY onResize='bindStrip();'>
<div id='filmstrip' class='filmstrip'></div>
<BR><BR><BR>
<UL><UL>
<table style='border: 1px solid black' width=400px height=75 cellspacing=0 cellpadding=0 id='landingZone'>
<tr><td> </Td></tr>
</table>
</UL></UL>
<BR><BR>
<script type='text/javascript'>
var _allImages = new Array(); // Holds all of the image data from server
var _filmstrip = document.getElementById('filmstrip'); // Our filmstrip layer
var _landingZone= document.getElementById('landingZone'); // Table which creates the filmstrip bondary
var _topOffset = 0; // Y position of the table in the web page
var _leftOffset = 0; // X position of the table in the web page.
var _totalOffset = 0; // Current X offset of the filmstrip.
function importData(fileName) {
var AJAX = null; // Initialize the AJAX variable.
if (window.XMLHttpRequest) { // Are we working with mozilla?
AJAX=new XMLHttpRequest(); // Yes -- this is mozilla.
} else { // Not Mozilla, must be IE
AJAX=new ActiveXObject("Microsoft.XMLHTTP"); // Wheee, ActiveX, how do we format c: again?
} // End setup Ajax.
if (AJAX==null) { // If we couldn't initialize Ajax...
alert("Your browser doesn't support AJAX."); // Sorry msg.
return false // Return false (WARNING - SAME AS ALREADY PROCESSING!)
} else {
AJAX.onreadystatechange = function() { // When the browser has the request info..
if (AJAX.readyState==4 || AJAX.readyState=="complete") { // see if the complete flag is set.
processData(AJAX.responseText);
} // End Ajax readystate check.
} // End create post-process fucntion block.
AJAX.open("GET", fileName, true); // Open the url
AJAX.send(null); // Send the request.
return true; // Everything went a-ok.
} // End Ajax setup aok if/else block
}
function processData (dat) {
allImages = dat.split('``'); // Explode the server image data into array elements
var ktr=0; // Initialize our counter
_filmstrip.innerHTML=''; // Initialize our filmstrip
_filmWidth=0; // Initiaize the film width.
var tmp = ''; // Temp variable to hold our HTML as we build it.
while ((ktr<allImages.length)&&(allImages[ktr].indexOf('EOF*EOF')<0)) { // For each record in allImages.
record = allImages[ktr].split('~|~'); // Explode record into individual fields.
// The next line builds our HTML in a variable, this is faster than doing X innerHTML insertions.
tmp+='<img src="'+record[1]+'_s.jpg" class="thumbnail" >';
_filmWidth+=80; // Increment our filmstrip Width counter.
ktr++; // Increment our counter
} // End WHILE loop
_filmstrip.innerHTML=tmp; // Insert tmp into our filmstrip layer.
}
// These functions help anchor the filmstrip to the landingZone table
function findPos(obj) {
// Credit for this function: http://www.quirksmode.org/js/findpos.html
// Visit the URL for a complete tutorial on this function
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
curwidth = obj.offsetWidth;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop,curwidth];
}
function bindStrip() { // moves filmstrip into the landingZone table.
ofs=findPos(_landingZone); // Find the left/top & width of table
_filmstrip.style.top=ofs[1]+'px'; // Set filmstrip's top location
_filmstrip.style.left=ofs[0]+'px'; // Set filmstrip's left location
_topOffset = ofs[1]; // Remember top offset globally
_leftOffset= ofs[0]; // Remember the left offset globally
// The next line crops the filmstrip and shows only a small section of it
_filmstrip.style.clip='rect(0px,'+(_landingZone.offsetWidth+_totalOffset)+'px,80px,'+_totalOffset+'px)';
_filmstrip.style.left=(_leftOffset-_totalOffset)+'px'; // set the left offset of the filmstrip
}
// End filmstrip anchor functions.
// This section is run as the web page loads.
importData("filmstrip.txt");
bindStrip();
</script>
</body>
</HTML>