[jQuery] jq stripviewer

[jQuery] jq stripviewer


Hi all.
Yesterday i was playing with jquery to create a slideshow component,
some sort of strip viewer.
The firts 30 minutes i ended up with this:
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imagestrip.html
After a bit a realised it would be better to try with a LIST of images
rather than with a single 900x100 jpg:
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imagestriplist.html
Inspired by the "sliding pages" on that site http://www.hotel-oxford.ro/
and also from the 'bouncy' flash interfaces from the past, i created
the two examples above. The last one is the one i want work onto.
One weird thing:
on IE6 the first click on any link of the "interface" moves the image
without any easing effect, after that it works like a charm.
On Opera 9 and FF/Mozilla it is ok.
Another thing:
How do you create a component (plugin)? Is there a tutorial on how to
build plugins?
An yet another thing:
it would be GREAT to create such 'bouncy' interfaces by just writing
the markup for ONE list and having jQuery draw the interface to view
the images.
That way when somebody wants to build a gallery like the one in the
example, he should only create it's list (UL) of images with a class
name. Na let jQuery dinamically draw the list with the links to "move"
the gallery.
Something totally parametric and reusable.
I'll work on it.
The last thing:
In the example posted i used such code
var steps = $("#stripViewer>ul > li > img").attr("width");
to get the width of an image. Is that correct?
Inside div#stripViewer there is a list with images. How to i get the
width of the FIRTS image (all images are the same width)? The code
above works but i' in doubt regarding the code.
Thanks for any suggestion.
Also, if you got the time:
with jQuery how do you build (on page load) a list with sucj
structure?
<ul>
<li><a href="#">Picture one</a></li>
<li><a href="#">Picture two</a></li>
<!--eccetera-->
</ul>
GC