jQuery CoverSlide
Emulating Apple's Cover Flow using jQuery [In Progress]
Example
Download
Notes
- • Tested in:
- IE 7, 8(Compatibility & Non-Compatibility Modes)
- Firefox 3.6.3
- Safari 4.0.5
- • Look into Canvas and IE's VML for persepctive
- • Size of next/previous button states depends on width of first image. Changing the state size for each "cover" could lead to confusion over the UI while setting it to be a certain size to either overlap the current or expose background images/links.
- • author was removed on request of client to make extra space for wrapping titles. Considering resizing or toggling whether author info is present.
Usage
<div class="coverslide" rel="speed::10000">
<img src="Council_March_30_web.jpg" rel="author::author;;href::../index.asp" title="title"/>
<img src="Commish_march_30_web.jpg" rel="author::artist;;href::http://thespiritx.com" title="album"/>
<img src="Elmer_march_29_web.jpg" rel="author::timestamp;;href::http://www.wgte.org" title="video"/>
<img src="Council_March_30_web.jpg" rel="author::whatever;;http://www.loremipsum.net" title="text text"/>
<img src="Commish_march_30_web.jpg" rel="author::nombre;;href::about:mozilla" title="mi"/>
<img src="Elmer_march_29_web.jpg" rel="author::something!;;href::../" title="type"/>
<img src="Council_March_30_web.jpg" rel="author::;;href::about:blank" title="*whisper*"/>
<img src="Commish_march_30_web.jpg" rel="author::beep beep;;href::http://youtube.com" title="boop boop"/>
<img src="Elmer_march_29_web.jpg" rel="author::you are looking for;;href::http://google.com" title="These are not the droids"/>
</div>