Hi All,

I am currently working in a filmstrip applet that loads 35 thumbnails (tiny 10x10 px) in a vertical ladder of divs. Thanks to the help of those on the mailing list I have gotten much of the functionality working. I now have the images loading, and the popups popping up with a medium sized image on mouse over. What is lacking now are two things.

1. I need to store the offset value in a session variable or at least in a variable accessible by jquery. The global declaration does not seem to be updated by the activatefilmstrip() function. 

2. I need to make ajax calls and reload the filmstrip with new images when the navigation links are clicked. Currently, my code makes the ajax call to the server (seen in firebug) but the filmstrip does not update the divs image content. Below is portions of my code:

Javascript:

1. var offset = 0;
   	$(document).ready(function(){
   	loadfilmstrip(offset);
   	});
   	function activatefilmstrip(offset){
   	// Click Filmstrip nav up
   	$('#filmstrip-nav-link-up').click(function(){
   	offset = offset-35;
   	if(offset < 0)
   	{
   	offset=0;
   	}
   	$.live('click',offset, loadfilmstrip);
   	});
   	// Click filmstrip nav down
   	$('#filmstrip-nav-link-down').click(function(){
   	offset = offset+35;
   	loadfilmstrip(offset);
   	});
   	};
   	function loadfilmstrip(offset)
   	{
   	$.getJSON("http://localhost/f-stopart2//filmstrip/ajaxGet/"+offset+"",
   	function(json){
   	$('div#filmstrip > div.filmstrip-cell').each(function(index) {
   	$(this).html("<a class='preview' href='http://localhost/f-stopart2//photoshoots/s/"+json[index]+"'><img src='http://localhost/f-stopart2//photoshoots/s/" + json[index] + "'/></a>");
   	});
   	imagePreview();
   	});
   	};
   	/*
   	* Image preview script
   	* powered by jQuery (http://www.jquery.com)
   	*
   	* written by Alen Grakalic (http://cssglobe.com)
   	*
   	* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
   	*
   	*/
   	this.imagePreview = function(){
   	/* CONFIG */
   	xOffset = 10;
   	yOffset = 30;
   	// these 2 variable determine popup's distance from the cursor
   	// you might want to adjust to get the right result
   	/* END CONFIG */
   	$("a.preview").hover(function(e){
   	this.t = this.title;
   	this.title = "";
   	var c = (this.t != "") ? "<br/>" + this.t : "";
   	$("body").append("<div id='preview' class='preview'><img src='"+ this.href.replace('/s/','/o/') +"' width='400px' alt='Image preview' />"+ c +"</div>");
   	$("#preview")
   	.css("top",(e.pageY - xOffset) + "px")
   	.css("left",(e.pageX + yOffset) + "px")
   	.fadeIn("fast");
   	},
   	function(){
   	this.title = this.t;
   	$("#preview").remove();
   	});
   	$("a.preview").mousemove(function(e){
   	$("#preview")
   	.css("top",(e.pageY - xOffset) + "px")
   	.css("left",(e.pageX + yOffset) + "px");
   	});
   	};

HTML:

1. <div id="filmstrip" class="filmstrip">
   	<div id="filmstrip-up" class="filmstrip-nav"><a id="filmstrip-nav-link-up" href="#" ><img src="http://localhost/f-stopart2/application/views/f-stop2/images/filmstrip-up.png" atl="filmstrip navigation up" /></a>
   	</div>
   	<div id="i1" class="filmstrip-cell">
   	</div>
   	<div id="i2" class="filmstrip-cell">
   	</div>
   	<div id="i3" class="filmstrip-cell">
   	</div>
   	<div id="i4" class="filmstrip-cell">
   	</div>
   	<div id="i5" class="filmstrip-cell">
   	</div>
   	<div id="i6" class="filmstrip-cell">
   	</div>
   	<div id="i7" class="filmstrip-cell">
   	</div>
   	<div id="i8" class="filmstrip-cell">
   	</div>
   	<div id="i9" class="filmstrip-cell">
   	</div>
   	<div id="i10" class="filmstrip-cell">
   	</div>
   	<div id="i11" class="filmstrip-cell">
   	</div>
   	<div id="i12" class="filmstrip-cell">
   	</div>
   	<div id="i13" class="filmstrip-cell">
   	</div>
   	<div id="i14" class="filmstrip-cell">
   	</div>
   	<div id="i15" class="filmstrip-cell">
   	</div>
   	<div id="i16" class="filmstrip-cell">
   	</div>
   	<div id="i17" class="filmstrip-cell">
   	</div>
   	<div id="i18" class="filmstrip-cell">
   	</div>
   	<div id="i19" class="filmstrip-cell">
   	</div>
   	<div id="i20" class="filmstrip-cell">
   	</div>
   	<div id="i21" class="filmstrip-cell">
   	</div>
   	<div id="i22" class="filmstrip-cell">
   	</div>
   	<div id="i23" class="filmstrip-cell">
   	</div>
   	<div id="i24" class="filmstrip-cell">
   	</div>
   	<div id="i25" class="filmstrip-cell">
   	</div>
   	<div id="i26" class="filmstrip-cell">
   	</div>
   	<div id="i27" class="filmstrip-cell">
   	</div>
   	<div id="i28" class="filmstrip-cell">
   	</div>
   	<div id="i29" class="filmstrip-cell">
   	</div>
   	<div id="i30" class="filmstrip-cell">
   	</div>
   	<div id="i31" class="filmstrip-cell">
   	</div>
   	<div id="i32" class="filmstrip-cell">
   	</div>
   	<div id="i33" class="filmstrip-cell">
   	</div>
   	<div id="i34" class="filmstrip-cell">
   	</div>
   	<div id="i35" class="filmstrip-cell">
   	</div>
   	<div id="filmstrip-down" class="filmstrip-nav"><a id="filmstrip-nav-link-down" href="#"><img src="http://localhost/f-stopart2/application/views/f-stop2/images/filmstrip-down.png" atl="filmstrip navigation down" /></a>
   	</div>
   	</div>

A non working version of the filmstrip can be seen on www.f-stopart.com 

Thanks for your help