<HTML>
<HEAD>
<TITLE>Javascript Filmstrip: Example #4</title>
<style type='text/css'>
.thumbnail {
margin-right: 5px;
width: 75px;
height: 75px;
}
.filmstrip {
position: absolute;
float: left;
overflow: hidden;
height: 75px;
cursor: w-resize;
}
</style>
</HEAD>
<BODY onResize='bindStrip();'>
<div id='filmstrip' class='filmstrip'></div>
<BR><BR><BR>
<center>
<table style='border: 1px solid black' width=50% height=75 cellspacing=0 cellpadding=0 id='landingZone'>
<tr><td> </Td></tr>
</table>
</center>
<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.
var _totalChange = 0; // Total pixels moved/changed
var _savedTarget = null; // Target object of drag event
var _orgCursor = null; // Original cursor Style
var _dragXOffset = 0; // X offset of the move event
var _dragYOffset = 0; // Y offset of the move event
var _scrollOK = false; // True if we can scroll filmstrip
var _originalOffset=0; // Original offset (before drag event)
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.
// Begin Drag/Scroll Handlers
function scrollHandler(e) {
// This function handles the draging of the filmstrip from left to right
if (e == null) { e = window.event; } // Get event data
if (e.button<=1&&_scrollOK){ // Is mouse down and scroll enabled?
_totalOffset=_originalOffset+(_dragXoffset-e.clientX); // Find the distance mouse has moved
if ((_totalOffset) < 0) { // Are we scrolling too far left?
_totalOffset=0; // Yes, set the offset to 0
_originalOffset=0; // and the original
_dragXoffset=e.clientX; // and reset the mouse.
}
if ((_totalOffset+_landingZone.offsetWidth)>=(_filmWidth-5)) { // Are we too far right?
_totalOffset=(_filmWidth-_landingZone.offsetWidth-5); // Yes, set offset to max
_originalOffset=(_filmWidth-_landingZone.offsetWidth-5);// and the original
_dragXoffset=e.clientX; // reset the mouse
}
_totalChange=(_dragXoffset-e.clientX); // Calculate total movement
// Set the visible clip here.
_filmstrip.style.clip='rect(0px,'+(_landingZone.offsetWidth+_totalOffset)+'px,80px,'+_totalOffset+'px)';
// And set the left offset
_filmstrip.style.left=(_leftOffset-_totalOffset)+'px';
// return false so the browser won't try to do it's events!
return false;
}
}
function cleanup(e) {
// called when user releases a mouse button after a drag event
_scrollOK = false; // Setting this to false disables scrollHandler
_savedTarget.style.cursor=_orgCursor; // Change back to the original cursor shape
document.onmousemove=null; // Disable the mousemove handler
document.onmouseup=null; // Disable the mouseup handler
}
function dragHandler(e) {
_totalChange=0; // Total pixels moved
var cursorType='-moz-grabbing'; // Set hand to "grab"
if (e == null) { e = window.event; cursorType='w-resize';} // Package event for IE
var target = e.target != null ? e.target : e.srcElement; // Get the target object
//Handle filmstrip
if (target.className=="filmstrip"||target.className=="thumbnail") { // Check if event over filmstrip
_savedTarget=target; // This is our target object
_orgCursor=target.style.cursor; // This was our orginal cursor
_originalOffset=_totalOffset; // Mark the current offset
target.style.cursor=cursorType; // Set mouse to grab if possible
_scrollOK=true; // flag filmstrip as scrollable
_dragXoffset=e.clientX; // remember original X position
document.onmousemove=scrollHandler; // set up a mouse-move handler
document.onmouseup=cleanup; // set up a button-up handler
return false; // return FALSE -- IMPORTANT!!!!
}
}
// End drag/scroll Handlers
// This section is run as the web page loads.
importData("filmstrip.txt");
bindStrip();
document.onmousedown = dragHandler; // Call dragHandler on mouse down
</script>
</body>
</HTML>