<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Помогите с галереей в отдельном модальном окне
25.03.2016 14:21:32 Помогите с галереей в отдельном модальном окне Сообщение #1
sympathy_bush

sympathy_bush

Новичок

Новичок

Дата регистрации:
25.03.2016 14:16:59

Сообщений: 1

http://imagizer.imageshack.com/img922/8511/MRVj4w.png
Всем привет!
Помогите пожалуйста с галерей. Нужно сделать так, чтобы при нажатии на
одну фотографию раскрывалась целая галерея с фото, а не одна фотография.

Код ниже. Написано только с использованием css. Скин как выглядит все сейчас -во вложении.
<!-- Projects -->

<div id="tf-works" class="text-center">
<div class="container">
<div class="section-title center">
<h2 id="ff">Галерея</h2>
<div class="line">
<hr>
</div>
<div class="clearfix"></div>

<div class="container" style="text-align: center">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6" id="iii"
<a href="#win1"><img src="img/gallery/wed/01.png"  width="320" height="200" alt="" /></a>
<a href="#x" class="overlay1" id="win1"></a>
<div class="popup">
<img class="is-image"  src="img/gallery/wed/01.png" alt="" />
<a class="close" title="Закрыть"  href="#close"></a>
</div>
<div><h4>Свадьбы</h4></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6" id="iii">
<a href="#win2"><img src="img/gallery/kids/01.png"

width="320" height="200" alt="" /></a>
<a href="#x" class="overlay1" id="win2"></a>
<div class="popup">
<img class="is-image" src="img/gallery/kids/01.png"

alt="" />
<a class="close" title="Закрыть" href="#close"></a>
</div>
<div><h4>Детские праздники</h4></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6" id="iii">
<a href="#win3"><img src="img/gallery/birth/01.png"

width="320" height="200" alt="" /></a>
<a href="#x" class="overlay1" id="win3"></a>
<div class="popup">
<img class="is-image" src="img/gallery/birth/01.png"

alt="" />
<a class="close" title="Закрыть" href="#close"></a>
</div>
<div><h4>Дни рождения</h4></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6" id="iii">
<a href="#win4"><img src="img/gallery/corp/01.png"

width="320" height="200" alt="" /></a>
<a href="#x" class="overlay1" id="win4"></a>
<div class="popup">
<img class="is-image" src="img/gallery/corp/01.png"

alt="" />
<a class="close" title="Закрыть" href="#close"></a>
</div>
<div><h4>Корпоративные</h4></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6" id="iii">
<a href="#win5"><img src="img/gallery/team/01.png"

width="320" height="200" alt="" /></a>
<a href="#x" class="overlay1" id="win5"></a>
<div class="popup">
<img class="is-image" src="img/gallery/team/01.png" alt=""

/>
<a class="close" title="Закрыть" href="#close"></a>
</div>
<div><h4>Тимбилдинги</h4></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-6" id="iii">
<a href="#win6"><img src="img/gallery/back/01.png"

width="320" height="200" alt="" /></a>
<a href="#x" class="overlay1" id="win6"></a>
<div class="popup">
<img class="is-image" src="img/gallery/back/01.png"

alt="" />
<a class="close" title="Закрыть" href="#close"></a>
</div>
<div><h4>Бэкстейдж</h4></div>
</div>

</div>
</div>
</div>
</div>
</div>

/* Projects */

#tf-works{
padding: 80px 0;
background-color: #f9f9f9;
}
#iii {
margin-top: 20px;
}


/* Базовые стили слоя затемнения и модального окна */
.overlay1 {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
visibility: hidden;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
position: fixed; /* фиксированное поцизионирование */
cursor: default; /* тип курсара */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay1:target {
visibility: visible;
opacity: 1;
}
.is-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
display:block;
margin: auto;
width: 100%;
height: auto;
/* скругление углов встроенных картинок */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}
/* стили модального окна */
.popup {
top: 0;
right: 0;
left: 0;
font-size: 14px;
z-index: 10;
display: block;
visibility: hidden;
margin: 0 auto;
width: 90%;
min-width: 320px;
max-width: 800px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 15px;
border: 1px solid #383838;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
background-color: #FFFFFF;
/* внешняя тень */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);
/* полная прозрачность окна, появление при клике */
opacity: 0;
/* эффект перехода (появление) */
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.overlay1:target+.popup {
top: 20%;
visibility: visible;
opacity: 1;
}
/* формируем кнопку закрытия */
.close {
position: absolute;
top: -10px;
right: -10px;padding: 0;
width: 30px;
height: 30px;
border: 2px solid #272727;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(59, 59, 59, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font-weight: bold;
line-height: 20px;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
Профиль Ответить