Главная » Файлы » Прочие скрипты » CSS

Фотогалерея с помощью CSS, без использования java script
22.06.14, 20:12:17





Для начала посмотрите ПРИМЕР

Если понравилось - переходим к установке

1) Переключение при наведении:

В head:
Код
<style type="text/css">  
  body{  
margin:0;  
padding:50px;  
text-align:center;  
font-family:Arial, Helvetica, sans-serif;  
color:#FFF;  
background:#000;  
  }  
  a img{border:none;}  

  #gallery1{  
width:663px;  
height:400px;  
overflow:hidden;  
position:relative;  
z-index:1;  
margin:0 auto 100px auto;  
  }  
  #tabs1{  
list-style:none;  
padding:0;  
margin:0;  
width:130px;  
height:400px;  
float:left;  
  }  
  #tabs1 li{  
padding:0;  
margin:0;  
float:left;  
  }  
  #tabs1 li a img{  
display:block;  
width:120px;  
height:90px;  
  }  
  #tabs1 li a{  
display:block;  
border:5px solid #999;  
width:120px;  
height:90px;  
  }  
  #tabs1 li a:hover{border:5px solid #fff;}  
  #tabs1 li a img.fullPic, #gallery1 div{  
position:absolute;  
z-index:1;  
left:130px;  
top:0;  
width:533px;  
height:400px;  
  }  
  #tabs1 li a:hover img.fullPic{z-index:3;}  
  #gallery1 div{  
z-index:2;  
background:#242424;  
  }  
  </style>


Сама галерея прописывается так:
Код
<div id="gallery1">  
<ul id="tabs1">  
<li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li>  
<li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li>  
<li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li>  
<li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li>  
</ul>  
<div></div>  
  </div>


2) Переключение при клике:

В head вставьте:
Код
<style type="text/css">  
  body{  
margin:0;  
padding:50px;  
text-align:center;  
font-family:Arial, Helvetica, sans-serif;  
color:#FFF;  
background:#000;  
  }  
  a img{border:none;}  

  #gallery2{  
width:663px;  
height:400px;  
overflow:hidden;  
position:relative;  
z-index:1;  
margin:0 auto 100px auto;  
  }  
  #tabs2{  
list-style:none;  
padding:0;  
margin:0;  
width:130px;  
height:400px;  
float:left;  
  }  
  #tabs2 li{  
padding:0;  
margin:0;  
float:left;  
  }  
  #tabs2 li a img{  
display:block;  
width:120px;  
height:90px;  
  }  
  #tabs2 li a{  
display:block;  
border:5px solid #fff;  
width:120px;  
height:90px;  
  }  
  #fullPicBlock{  
width:533px;  
height:400px;  
overflow:hidden;  
float:left;  
background:#242424;  
  }  

  </style>


Сама галерея прописывается так:
Код
<div id="gallery2">  
<ul id="tabs2">  
<li><a href="#pic1"><img src="images/pic1s.jpg" alt="" /></a></li>  
<li><a href="#pic2"><img src="images/pic2s.jpg" alt="" /></a></li>  
<li><a href="#pic3"><img src="images/pic3s.jpg" alt="" /></a></li>  
<li><a href="#pic4"><img src="images/pic4s.jpg" alt="" /></a></li>  
</ul>  
<div id="fullPicBlock">  
<div><a name="pic1"></a><img src="images/pic1.jpg" alt="" /></div>  
<div><a name="pic2"></a><img src="images/pic2.jpg" alt="" /></div>  
<div><a name="pic3"></a><img src="images/pic3.jpg" alt="" /></div>  
<div><a name="pic4"></a><img src="images/pic4.jpg" alt="" /></div>  
</div>  
  </div>


Всё smile

Категория: CSS | Добавил: Apocalypse | Теги: CSS, Script, использования, Java, помощью, Без, фотогалерея
Просмотров: 315 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email: