Tim Maxey .NET Technology Blog & Resources
Cool thing I found and broke it up for easy copy and use... Check out the code below and the links. Just grab the js and css files yourself off my server...
Take a look at the ImageFlow IPhone like Photo viewer you can view the source and get the goods, but below is the just of the code:
In the HEAD tag:
<link rel="stylesheet" href="imageflow.css" type="text/css" />
<script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
<script type='text/javascript' src='jquery.cycle.js?ver=1.0'></script>
<script type='text/javascript' src='jquery.thumb-hover.js?ver=1.0'></script>
<script type='text/javascript' src='imageflow.js?ver=1.0'></script>
<script type="text/javascript">
jQuery(function($){
//sliding content
$('#image').cycle({
timeout: 5000,
fx: 'fade'
});
});
</script>
Then somewhere in the BODY TAG:
<div id="slider" class="imageflow">
<img src="images/1.jpg" width="600" height="450" alt="One" />
<img src="images/2.jpg" width="600" height="450" alt="Two" />
<img src="images/3.jpg" width="600" height="450" alt="Three" />
<img src="images/4.jpg" width="600" height="450" alt="Four" />
<img src="images/5.jpg" width="600" height="450" alt="Five" />
<img src="images/6.jpg" width="600" height="450" alt="Six" />
<img src="images/7.jpg" width="600" height="450" alt="Seven" />
<img src="images/8.jpg" width="600" height="450" alt="Eight" />
<img src="images/9.jpg" width="600" height="450" alt="Nine" />
<img src="images/10.jpg" width="600" height="450" alt="Ten" />
<img src="images/11.jpg" width="450" height="600" alt="Eleven" />
</div>
You can have as many images as you like, but they do "pre-load..." Have fun!