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