As a learning experience (and to get the look I wanted), I hand wrote
HTML/CSS/jQuery code for a photo gallery with a thumbnail filmstrip. I
started with a few ideas of how to slide the thumbnails underneath the
main panel of the gallery, and figured the easiest and smoothest way
would be to initiate a draggable() function call on the <ul> selector
or containing <div> of the list of thumbnails, constraining the motion
along the x-axis.
This works well, but I have a few problems which I'm not quite sure
how to attack. I want to set a left and right bound for how far the
filmstrip can be dragged and stop animation (even while mid-drag) once
this point has been reached. I know this is possible if the parent
<div> is larger than the draggable element, but the parent <div> I'm
working with is smaller than the draggable element.
I'll start with the HTML code for the filmstrip:
<!-- Thumbnail Filmstrip -->
<div id="viewing-area">
<div id="thumbnails">
<ul id="thumb-strip">
<li><img src="images/thumb-1.jpg" width="130px"
height="80px" /></li>
<li><img src="images/thumb-2.jpg" width="130px"
height="80px" /></li>
<li><img src="images/thumb-3.jpg" width="130px"
height="80px" /></li>
<li><img src="images/thumb-4.jpg" width="130px"
height="80px" /></li>
<li><img src="images/thumb-5.jpg" width="130px"
height="80px" /></li>
<li><img src="images/thumb-6.jpg" width="130px"
height="80px" /></li>
<li><img src="images/thumb-1.jpg" width="130px"
height="80px" /></li>
<li><img src="images/thumb-2.jpg" width="130px"
height="80px" /></li>
<li class="last"><img src="images/thumb-3.jpg"
width="130px" height="80px" /></li>
</ul>
</div>
</div>
First, I initialize the thumbnail filmstrip by calculating the width
of the strip and setting the width of the parent <div> (#thumbnails),
using the following code:
function calculateWidth(){
// Accumulate width of each list item to get total width of
filmstrip
$("#thumb-strip li").each(function(i){
listWidth += parseInt($(this).width())
+ parseInt($(this).css("marginRight"))
+ parseInt($(this).css("paddingLeft"))
+ parseInt($(this).css("paddingRight"));
});
largestMargin = (viewingArea - listWidth);
$("#thumbnails").css("width", listWidth);
}
The #thumbnails div is a child of a div with the id "viewing-area",
which is the static width window where the filmstrip is viewable - for
this particular case, the viewingArea is 800px and the listWidth is
1238px. I want to ensure that the filmstrip cannot be dragged outside
this viewing area, and the variable largestMargin is used to account
for the largest amount the filmstrip can be shifted left before the
LAST picture is completely viewable in the viewing-area.
I have found that it is difficult to stop the filmstrip from dragging
past the point where the last thumbnail list item is. I tried to
assign a function to the 'drag' event which checks the "left" CSS
property to determine if it has passed this point, but the filmstrip
still drags beyond this point.
Also, when you release the mouse button after dragging, the thumbnail
on which the mouse is over is clicked and loaded in the main panel. If
possible, I would like to disable this so you cannot select an image
on the start or stop event of dragging.
Suggestions anyone? Help is much appreciated, Thanks!
