Fred LeBlanc tarafından hazırlanan RoundAbout ile oluşturulabilen özelliklerden sadece bir tanesidir 3D slayt örneği. Belirli bir div alanı içerisinde kolayca kurulabilen ve çok eğlenceli görünen bir özellik. Fred Leblanc bu örnekte yapmanız gerekenleri minimum seviyeye indirmiş body etiketleri içerisinde sadece ul ve li elementleri ile RoundAbout uygulamasını kullanabilmeniz mümkün.
Desteklediği Tarayıcılar : İE – Cherome – Opera – Safari – Mozilla Firefox
- Head etiketleri arasına eklenmesi gereken bölümler.
Js dosya adresleri :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery.roundabout.min.js"></script>
Javascript :
<script>
$(document).ready(function() {
$('ul').roundabout();
});
</script>
Stil :
<style>
ul {
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 24em;
}
li {
height: 20em;
width: 30em;
background-color: #ccc;
text-align: center;
cursor: pointer;
-webkit-box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49);
box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49);
}
li.roundabout-in-focus {
cursor: default;
-webkit-box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49);
box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49);
}
li img
{ width: 100%; height: 100%; -moz-box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49); -webkit-box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49); box-shadow: 22px 10px 30px rgba(0, 0, 0, 0.49) }
#carbonads-container .carbonad {
margin: 0 auto;
}
</style>
- Body etiketleri arasına eklenmesi gereken bölüm.
Html :
<ul> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> </ul>
Ne kadar li elemanını fazla kullanırsanız o kadar fazla resim görünecektir. Eklenti için bir sınır yok. Sadece daha açıklayıcı olsun diye iki tane demo kullandım. Birinde li elemanını beş kere kullandım diğerinde ise 15 kere bunu yirmide yapabilirsiniz karar sizin.
<ul> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> <li><img src="img url "> </li> </ul>
