iCarousel
One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”UTF-8″><head>
<base href=”http://www.ajaxdaddy.com/web20/mootools/icarousel/”>
<style type=”text/css”>
body {color: white;background: #52616F;}
a { color: white; }
</style>
<link href=”css/reset-fonts.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/icarousel1.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/icarousel2.css” rel=”stylesheet” type=”text/css”/>
<script src=”javascript/mootools.js” type=”text/javascript”/>
<script type=”text/javascript” src=”javascript/shCore.js”></script>
<script type=”text/javascript” src=”javascript/iCarousel.js”> </script>
</head><body>
<center>
<h3> V. Vertical text scroller</h3>
<div id=”example_5″>
<div id=”example_5_content”>
<div class=”example_5_item”>
<h4> What is Lorem Ipsum?</h4>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book…</p>
<p> <a href=”http://www.lipsum.com”>more information</a></p>
</div>
<div class=”example_5_item”>
<h4> Where does it came from?</h4>
<p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked…</p>
<p> <a href=”http://www.lipsum.com”>more information</a></p>
</div>
<div class=”example_5_item”>
<h4> Why do we use it?</h4>
<p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’,…</p>
<p> <a href=”http://www.lipsum.com”>more information</a></p>
</div>
<div class=”example_5_item”>
<h4> Where can I get some?</h4>
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure…</p>
<p> <a href=”http://www.lipsum.com”>more information</a></p>
</div>
</div>
<div id=”example_5_frame”>
<img id=”example_5_previous” src=”images/ex4_previous.gif” alt=”move previous” />
<img id=”example_5_next” src=”images/ex4_next.gif” alt=”move next” />
</div>
</div>
<h3> Vertical carousel – images scroller</h3>
<div id=”example_4″>
<div style=”top: -860px;” id=”example_4_content”>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/1.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/2.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/3.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/4.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/5.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/6.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/7.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/8.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/9.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/A.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/B.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/C.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/D.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/E.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/F.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/G.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/H.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/I.jpg” alt=”flower 2″></a>
</div>
<div class=”example_4_item”>
<a href=”#”> <img src=”images/J.jpg” alt=”flower 1″></a>
<a href=”#”> <img src=”images/K.jpg” alt=”flower 2″></a>
</div>
</div>
<div id=”example_4_frame”>
<img id=”example_4_previous” src=”images/ex4_previous.gif” alt=”move previous”>
<img id=”example_4_next” src=”images/ex4_next.gif” alt=”move next”>
</div>
</div>
</center>
<script type=”text/javascript”>
window.addEvent(“domready”, function() {
new iCarousel(“example_4_content”, {
idPrevious: “example_4_previous”,
idNext: “example_4_next”,
idToggle: “undefined”,
item: {
klass: “example_4_item”,
size: 86
},
animation: {
direction: “top”,
duration: 250,
amount: 2
}
});
});
window.addEvent(“domready”, function() {
new iCarousel(“example_5_content”, {
idPrevious: “example_5_previous”,
idNext: “example_5_next”,
idToggle: “undefined”,
item: {
klass: “example_5_item”,
size: 172
},
animation: {
direction: “top”,
duration: 1000,
amount: 1
}
});
});
</script>
</body> </html>
Buy Yankee Candles at Half Off…
[...]the time to read or visit the content or sites we have linked to below the[...]…
Awesome website…
[...]the time to read or visit the content or sites we have linked to below the[...]……
Buy Yankee Candles at Half Off…
[...]the time to read or visit the content or sites we have linked to below the[...]…
Online Article……
[...]The information mentioned in the article are some of the best available [...]……
online sales…
[...]the time to read or visit the content or sites we have linked to below the[...]…
Quick Cures For Sleep Apnea…
[...]you’ll find plenty extra cost-free inbound links to get provided, as you can view from your subsequent[...]…
Buy Yankee Candles Cheap…
[...]below you’ll find the link to some sites that we think you should visit[...]…
Read was interesting, stay in touch……
[...]please visit the sites we follow, including this one, as it represents our picks from the web[...]……
Awesome website…
[...]the time to read or visit the content or sites we have linked to below the[...]……
TV Lamps…
The Truth behind Television Replacement Lamps….
adult friend…
[...]while the sites we link to below are completely unrelated to ours, we think they are worth a read, so have a look[...]…