Проста галерея на стилях без використання скриптів

Рейтинг користувача: 0 / 5

Неактивна зіркаНеактивна зіркаНеактивна зіркаНеактивна зіркаНеактивна зірка
 

Нещодавно довелося робити галерею зображень товару для одного сайту. Переглянувши посилання на побажання замовника, я дійшов висновку що зроблю галерею на самих стилях CSS без використання скриптів (тим більше що зі скриптами я не дуже :)).

Для виконання цього задуму нам знадобиться ключовий елемент, статус якого може змінити клік користувача. І цей елемент повинен мати у своєму підпорядкуванні інший елемент. Таким чином при зміні статусу елента користувачем ми можемо змінити CSS як батьківського, так і підпорядкованого йому елемента. Таким елементом я обрав <input type="radio">, який має у свєму підпорядкуванні <label>.

З елементами розібралися. Тепер приступимо до архітектури.

В якості основного контейнеру галереї я обрав звичайний <div>, а роль "несучої конструкції" виконав <ul>.

Так виглядає моя галерея
Так виглядає моя галерея на сайті замовника

Ось і сама архітектура галереї:

View source
  1. <div id="gallery">
  2.         <img  id="zero" src="images/zero.gif">
  3.         <ulclass="gallery">
  4.             <li>
  5.                 <input type="radio" id="pic-1" name="pict"  checked/>
  6.                 <label  for="pic-1"  style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c.jpg);"><img  src="/images/site/homepage/slides/wdlo7c/wdlo-7c.jpg"/><span>WDLO-7C</span></label>
  7.                 <input  type="radio"  id="pic-2"  name="pict"/>
  8.                 <label  for="pic-2"  style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c-u.jpg);"><img  src="/images/site/homepage/slides/wdlo7c/wdlo-7c-u.jpg"/><span>WDLO-7C UV</span></label>
  9.                 <input  type="radio"id="pic-3"name="pict"/>
  10.                 <label  for="pic-3"  style="background-image:url(/images/site/homepage/slides/wdlo7c/wdlo-7c-n.jpg);"><img  src="/images/site/homepage/slides/wdlo7c/wdlo-7c-n.jpg"/><span>WDLO-7C  night</span></label>
  11.             </li>
  12.         </ul>
  13.     </div>

А ось стилі які перетворюють вищенаведений скелет на доволі непогану галерею.

View source
  1. #gallery{
  2. float:left;
  3. width:590px;
  4. height:600px;
  5. position:relative;
  6. }
  7. ul.gallery{
  8. display:block;
  9. float:left;
  10. width:590px;
  11. height:auto;
  12. list-style:none;
  13. margin:0;
  14. padding:0;
  15. }
  16. ul.gallery>li {
  17. display:block;
  18. float:left;
  19. width:120px;
  20. height:auto;
  21. }
  22. input[type="radio"],label[for]>span {
  23. display:none;
  24. }
  25. label[for]{
  26. display:block;
  27. width:55px;
  28. height:73px;
  29. cursor:pointer;
  30. background-position:center;
  31. background-size:51px69px;
  32. background-repeat:no-repeat;
  33. margin:0auto20pxauto;
  34. border:solid1px#d4d4d4;
  35. box-shadow:009px rgba(0,0,0,0.3);
  36. border-radius:4px;
  37. }
  38. label[for]>img {
  39. width:0px;
  40. height:0px;
  41. }
  42. input[type="radio"]:checked+label[for]{
  43. cursor:default;
  44. border:solid1px#333;
  45. }
  46. input[type="radio"]:checked+label[for]>img {
  47. display:block;
  48. position:absolute;
  49. top:0px;
  50. left:120px;
  51. width:447px;
  52. height:594px;
  53. border:solid1px#d4d4d4;
  54. padding:2px;
  55. }
  56. input[type="radio"]:checked+label[for]>span {
  57. display:table-cell;
  58. position:absolute;
  59. top:20px;
  60. left:120px;
  61. width:auto;
  62. height:20px;
  63. color:#fff;
  64. background-color:orange;
  65. text-align:center;
  66. z-index:25;
  67. font-size:16px;
  68. vertical-align:middle;
  69. padding:5px25px;
  70. }
  71. img#zero{
  72. display:block;
  73. position:absolute;
  74. top:0px;
  75. left:120px;
  76. width:452px;
  77. height:600px;
  78. z-index:30;
  79. }

Ну і, звісно, сама галерея. Анімацію я не додавав, але звичайний transition зробить її ще цікавішою.

До речі, сьогодні з цієї ж конструкції, але з іншими CSS зробив прикольний слайдер відгуків. Пізніше додам, бо все на роботі.

Якщо виникають питання, залишайте їх у коментарях. Відповім.

Надійний фріланс

Facebook

 
 

Google +

 

Реклама від Google