Галерея фотографий для uCoz сайта

Всем привет! Давайте покажу еще один эффект для фото который можно применить на сайте uCoz. Подойдет такая галерея для сайта в стиле скрапбукинг, мною так любимый. ツ Смотрится как беспорядочно разбросанные фотографии, красиво и как-то по человечески, что-ли. Ишачок начиная с 9 версии держит, firefox, chrome, opera тоже, а вот safari некорректно отображает. Какие ещё минусы..., если фотографий много то могут закрывать друг-друга, поэтому и рассказываю как разместить 10 фото, да и если размещать больше 10 фоток в отдельном псто или странице, то придется в ручную прописывать урлы картинок, что согласитесь несколько гемморойно в плане сначала загрузить, а потом редактировать прописывая url. Все фото кликабельны и открываются обычным путем. Пример галереи

 

Сначала качаем архив

Затем загоняем в корневую папку три скрипта: jquery-css-transform.js, jquery-animate-css-rotate-scale.js, main.js, вообще используется 4 скрипта, но так как jquery-1.7.2.js присутствует по умолчанию (либо надо подключить в общих настройках), то грузим только три. Идем в админку - Главная » Управление дизайном » Редактирование шаблонов » Верхняя часть сайта. В самый верх вставляем

Код
<script type="text/javascript" src="/папка/jquery-css-transform.js"></script>
  <script type="text/javascript" src="/папка/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="/папка/main.js"></script>

 

Далее прописываем стили, в исходнике они не выведены в отдельный файл, поэтому все-что между ‹style type="text/css"›‹/style› в общий файл стилей - Главная » Управление дизайном » Редактирование шаблонов » Таблица стилей (css).

Код
#gallery {
height:600px;
position:relative;
width:460px;
}
#gallery div,#gallery div a {
height:128px;
overflow:hidden;
width:192px;
}
#gallery div {
background-color:#fff;
background-position:50% 50%;
background-repeat:no-repeat;
border:2px solid #000;
left:100px;
padding:5px;
position:absolute;
top:200px;</p> <p> border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;</p> <p> -moz-box-shadow:3px 3px 4px #444;
  -webkit-box-shadow:3px 3px 4px #444;
  box-shadow:3px 3px 4px #444;
  }
  #gallery div a {
  display:block;
  text-indent:-1000px;
  }

 

И уже на место где хотите видеть фотографии пишем html код

Код
<div id="gallery">
<div id="1" style="background-image:url('http://mendog.ru/_bl/1/92923883.jpg'); background-size:cover; border: solid 5px #fff; z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/92923883.jpg" target="_blank">photo 1</a>
</div>
<div id="2" style="background-image:url('http://mendog.ru/_bl/1/28989717.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/28989717.jpg" target="_blank">photo 2</a>
</div>
<div id="3" style="background-image:url('http://mendog.ru/_bl/1/47858756.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/47858756.jpg" target="_blank">photo 3</a>
</div>
<div id="4" style="background-image:url('http://mendog.ru/_bl/1/10751722.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/10751722.jpg" target="_blank">photo 4</a>
</div>
<div id="5" style="background-image:url('http://mendog.ru/_bl/1/25860444.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/25860444.jpg" target="_blank">photo 5</a>
</div>
<div id="6" style="background-image:url('http://mendog.ru/_bl/1/45157878.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/45157878.jpg" target="_blank">photo 6</a>
</div>
<div id="7" style="background-image:url('http://mendog.ru/_bl/1/78868949.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/78868949.jpg" target="_blank">photo 7</a>
</div>
<div id="8" style="background-image:url('http://mendog.ru/_bl/1/01741413.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/01741413.jpg" target="_blank">photo 8</a>
</div>
<div id="9" style="background-image:url('http://mendog.ru/_bl/1/07964143.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/07964143.jpg" target="_blank">photo 9</a>
</div>
<div id="10" style="background-image:url('http://mendog.ru/_bl/1/86297982.jpg'); background-size:cover;border: solid 5px #fff;z-index:999;">
<a class="ulightbox" href="http://mendog.ru/_bl/1/86297982.jpg" target="_blank">photo 10</a>
</div>

</div>

 

Все, любуемся фотографиями. Удачи!

Источник

Изображения

Оценка: 2.0 / 4

avatar
0
•admin• написал в 20:54, 11.01.2014
Баг выявился, конфликт с share42, кнопок соц. сетей не видно.
avatar