bootstrap

Websitenizin herhangi bir yerine ekleyebileceğiniz  küçük bir  galery örneği.  Emaj tarafından Bootstrap kütüphanesi kullanılarak hazırlanmış bu minik galeri örneği o kadra küçük ki websitenizin sidebar bölümüne dahi ekleyebilirsiniz. Akordiyon bir görünümde olan bu mini galeri örneğinde mouse ile reismlerin üzerne geldiğinizde  sol tarafa  doğru resimler kayıyor. bu işlem sırasında resimlerin açıklamalarıda üst üste  geçerken bir önceki resmin açıklaması kayboluyor ve görüntülediğiniz resmin açıklaması beliriyor.

 

Kullanım

  • Head etiketleriarasına eklemeniz gereken bölümler.

Bootstrap js ve css adresleri :

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />

Css :

#main {
 background-color: #222f33;
 height: 100%;
 width: 100%;
 position: absolute;
}
#main h1 {
 color: #FFF;
 font-weight: 100;
 letter-spacing: 3px;
 padding: 20px 0;
}
#main #gallery {
 overflow: hidden;
 height: 280px;
 background-color: #000;
 width: 400px;
 margin: auto;
 margin-top: 30px;
 -webkit-box-shadow: 0 2px 3px #12181b;
 -moz-box-shadow: 0 2px 3px #12181b;
 box-shadow: 0 2px 3px #12181b;
}
#main #wrapper {
 position: relative;
 width: 1000px;
 height: 250px;
}
#main #wrapper li {
 float: left;
 width: 50px;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 cursor: pointer;
}
#main #wrapper li:last-child {
 width: 250px;
}
#main #wrapper li p {
 position: absolute;
 top: 255px;
 left: 40px;
 font-size: 16px;
 color: #FFF;
 font-weight: 100;
 opacity: 0;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}
#main #wrapper li:hover {
 width: 250px;
}
#main #wrapper li:hover p {
 opacity: 1;
 left: 10px;
}
#main #wrapper li:first-child {
 width: 250px;
}
#main #wrapper li:first-child p {
 opacity: 1;
 left: 10px;
}
#main #wrapper:hover li:first-child {
 width: 50px;
}
#main #wrapper:hover li:first-child p {
 opacity: 0;
 left: 40px;
}
#main #wrapper:hover li:first-child:hover {
 width: 250px;
}
#main #wrapper:hover li:first-child:hover p {
 opacity: 1;
 left: 10px;
}

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id="main">
 <div id="gallery">
 <ul id="wrapper" class="list-unstyled">
 <li>
 <img src="http://lorempixel.com/250/250/nature" />
 <p>Photo 1 : nature</p>
 </li>
 <li>
 <img src="http://lorempixel.com/250/250/animals" />
 <p>Photo 2 : animals</p>
 </li>
 <li>
 <img src="http://lorempixel.com/250/250/fashion" />
 <p>Photo 3 : fashion</p>
 </li>
 <li>
 <img src="http://lorempixel.com/250/250" />
 <p>Photo 4 : suprise :)</p>
 </li>
 </ul>
 </div>
</div>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla