Хаки и Скрипты Next Generation CMS

Красивая галерея в стиле полароид

irbees2008 irbees2008 Опубликовано - 14 - августа Слайдшоу и анимация
1938 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Вот нашел интересный стиль галереи, где изображения разбросаны случайным образом . Когда определенный элемент выбран, он будет двигаться к середине, а другое изображение освободит для него место, перемещаясь в стороны,и там кроме этих эффектов есть описание изображения или любой текст на обратной стороне нашего изображения.

Приступим.
1. Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. распаковываем и смотрим примеры.
2.В хеад подключаем стиль

Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/component.css" />
3.В body где хотим видеть галерею добавляем этот код галереи
Код:
<section id="photostack-3" class="photostack">
<div>
<figure>
<a href="http://goo.gl/NJ1Dhf" class="photostack-img"><img src="{{ tpl_url }}/img/5.jpg" alt="img05"/></a>
<figcaption>
<h2 class="photostack-title">Speed Racer</h2>
<div class="photostack-back">
<p>Here he comes Here comes Speed Racer. He's a demon on wheels. Wouldn't you like to get away? Sometimes you want to go where everybody knows <span>the</span> your name. And they're always glad you came! </p>
</div>
</figcaption>
</figure>
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img"><img src="{{ tpl_url }}/img/2.jpg" alt="img02"/></a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<div class="photostack-back">
<p>These Happy Days are yours and mine Happy Days. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine?</p>
</div>
</figcaption>
</figure>
<figure>
<a href="http://goo.gl/Jmvr4u" class="photostack-img"><img src="{{ tpl_url }}/img/3.jpg" alt="img03"/></a>
<figcaption>
<h2 class="photostack-title">Beautywood</h2>
<div class="photostack-back">
<p>It's a neighborly day in this beautywood a neighborly day for a beauty. Would you be mine? Could you be mine. Now the world don't move to the beat of just one drum.</p>
</div>
</figcaption>
</figure>
<figure>
<a href="http://goo.gl/Qw3ND4" class="photostack-img"><img src="{{ tpl_url }}/img/1.jpg" alt="img01"/></a>
<figcaption>
<h2 class="photostack-title">Serenity Beach</h2>
<div class="photostack-back">
<p>I have never been to a place so serene in my entire life before. Swimming in clear waters opened my mind to nature and reminded me of my and <span>eveybody</span> everybody else's mortality.</p>
</div>
</figcaption>
</figure>
<figure>
<a href="http://goo.gl/49lN3k" class="photostack-img"><img src="{{ tpl_url }}/img/4.jpg" alt="img04"/></a>
<figcaption>
<h2 class="photostack-title">Heaven of time</h2>
<div class="photostack-back">
<p>What might be right for you may not be right for some. And we know Flipper lives in a world full of wonder flying there-under under the sea.</p>
</div>
</figcaption>
</figure>
<figure>
<a href="http://goo.gl/Ms7VDl" class="photostack-img"><img src="{{ tpl_url }}/img/6.jpg" alt="img06"/></a>
<figcaption>
<h2 class="photostack-title">Forever this</h2>
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/7.jpg" alt="img07"/></a>
<figcaption>
<h2 class="photostack-title">Lovely Green</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/8.jpg" alt="img08"/></a>
<figcaption>
<h2 class="photostack-title">Wonderful</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/9.jpg" alt="img09"/></a>
<figcaption>
<h2 class="photostack-title">Love Addict</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/10.jpg" alt="img10"/></a>
<figcaption>
<h2 class="photostack-title">Friendship</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/11.jpg" alt="img11"/></a>
<figcaption>
<h2 class="photostack-title">White Nights</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/12.jpg" alt="img12"/></a>
<figcaption>
<h2 class="photostack-title">Serendipity</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/13.jpg" alt="img13"/></a>
<figcaption>
<h2 class="photostack-title">Pure Soul</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/14.jpg" alt="img14"/></a>
<figcaption>
<h2 class="photostack-title">Winds of Peace</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/15.jpg" alt="img15"/></a>
<figcaption>
<h2 class="photostack-title">Shades of blue</h2>
</figcaption>
</figure>
<figure data-dummy>
<a href="#" class="photostack-img"><img src="{{ tpl_url }}/img/16.jpg" alt="img16"/></a>
<figcaption>
<h2 class="photostack-title">Lightness</h2>
</figcaption>
</figure>
</div>
</section>
Я использовал код из третьего варианта галереи,здесь можно подключить и lightbox,ну это отдельная тема.
4.Перед закрытием body добавляем скрипты
Код:
<script src="{{ tpl_url }}/js/classie.js"></script>
<script src="{{ tpl_url }}/js/photostack.js"></script>
<script>
// [].slice.call( document.querySelectorAll( '.photostack' ) ).forEach( function( el ) { new Photostack( el ); } );


new Photostack( document.getElementById( 'photostack-3' ), {
callback : function( item ) {
//console.log(item)
}
} );
</script>
5.Вроде все ,смотрите исходники,задавайте вопросы

Можешь почитать и вот эту статейку "Бегущая строка на Jquery с эффектом набора текста"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3319 дней
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [9]
  • Гости: [7]
  • Поисковики: [2] Яндекс, Яндекс
  • Были сегодня : [4] Яндекс, Google, irbees2008, Яндекс
  • SQL запросов: 35
  • Генерация страницы: 0.163сек
  • Потребление памяти: 4.956 Mb 
  •   яндекс.ћетрика