• 1365
  • 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.Вроде все ,смотрите исходники,задавайте вопросы

Можешь почитать и вот эту статейку "Заработать на бирже Миралинкс"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

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

Облако тегов

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