RoundAbout.js – Daire gibi dönen fotoğraflar

roundabout1

roundabout
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

Kullanım
  • 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>

 

0 Comments

Leave a Comment