Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный
Практическая работа 2:

Разработка галереи изображений

< Лекция 2 || Практическая работа 2 || Практическое занятие  >
Аннотация: В ходе выполнения данной работы учащиеся познакомятся со способами создания галереи изображений.

Примеры

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

Пример 1(sample_1)

Создаем папку images и помещаем в нее 15 изображений с именами от 1.jpg до 15.jpg. Далее, в блокноте создаем файл index.html со следующим кодом:

index.html

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Галереяизображений</title>
<linkhref="myStyle.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divclass="container"id="container">
<divclass="gallery">
<atabindex="1"><imgsrc="images/1.jpg"/></a>
<atabindex="1"><imgsrc="images/2.jpg"/></a>
<atabindex="1"><imgsrc="images/3.jpg"/></a>
<atabindex="1"><imgsrc="images/4.jpg"/></a>
<atabindex="1"><imgsrc="images/5.jpg"/></a>
<atabindex="1"><imgsrc="images/6.jpg"/></a>
<atabindex="1"><imgsrc="images/7.jpg"/></a>
<atabindex="1"><imgsrc="images/8.jpg"/></a>
<atabindex="1"><imgsrc="images/9.jpg"/></a>
<atabindex="1"><imgsrc="images/10.jpg"/></a>
<atabindex="1"><imgsrc="images/11.jpg"/></a>
<atabindex="1"><imgsrc="images/12.jpg"/></a>
<atabindex="1"><imgsrc="images/13.jpg"/></a>
<atabindex="1"><imgsrc="images/14.jpg"/></a>
<atabindex="1"><imgsrc="images/15.jpg"/></a>
<spanclass="close"></span>
</div>
</div>
</body>
</html>
    

После этого вновь открываем блокнот и создаем каскадную таблицу стилей myStyle.css:

myStyle.css

.container {
margin:5pxauto;
padding:20px;
position:relative;
width:800px;
}

.gallery {
width:800px;
margin:0auto;
}

.gallerya {
display:inline-block;
position:relative;
width:200px;
height:150px;
}

.galleryaimg {
border:1pxsolid#fff;
cursor:pointer;
display:block;
height:100%;
left:0px;
position:absolute;
top:0px;
width:100%;
z-index:1;
-moz-user-select: none;
-khtml-user-select: none;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:1s;
-o-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index, border;
transition-duration:1s;
}

.gallerya:focusimg {
border:15pxsolid#fff;
cursor:default;
height:500%;
position:absolute;
width:500%;
z-index:25;
box-shadow:1px1px5px#888;
-moz-box-shadow:1px1px5px#888;
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index, border;
transition-duration:1s;
}

.gallerya:focus:nth-child(3n+1)img {
left:150px;
}

.gallerya:focus:nth-child(3n+2)img {
left:-50px;
}

.gallerya:focus:nth-child(3n+3)img {
left:-250px;
}

.gallerya:focus:nth-child(-n+3)img {
top:140px;
}

.gallerya:focus:nth-child(n+7)img {
top:-150px;
}

.gallerya:focus:nth-child(n+10)img {
top:-295px;
}


.gallery.close {
background:transparent;
cursor:pointer;
display:none;
height:360px;
left:180px;
position:absolute;
top:160px;
width:500px;
z-index:30;
}

.gallerya:focus~.close {
display:block;
}
    

Пример 2 (sample_2)

Запустите программу WebMatrix, создайте веб-сайт Gallery. Создайте папку images и поместите в нее 18 изображений домов с именами от 1.jpg до 18.jpg. Создайте файл Gallery.cshtml со следующим кодом.

Gallery.cshtml

@{varmyPath= "";
if( Request["SelectPhoto"] != null){
myPath = @"images\"+ Request["SelectPhoto"];
}
}
<!DOCTYPEhtml>
<html>
<head>
<title>Картиннаягалерея</title>
<styletype="text/css">
h1 {
font-family: 'Comic Sans MS';color: #0094ff;
    }
</style>
</head>
<body>
<h1>Галерея</h1>
<formmethod="post"action="">
<div>
<selectname="SelectPhoto">
<optionvalue="1.jpg">Дом 1</option>
<optionvalue="2.jpg">Дом 2</option>
<optionvalue="3.jpg">Дом 3</option>
<optionvalue="4.jpg">Дом 4</option>
<optionvalue="5.jpg">Дом 5</option>
<optionvalue="6.jpg">Дом 6</option>
<optionvalue="7.jpg">Дом 7</option>
<optionvalue="8.jpg">Дом 8</option>
<optionvalue="9.jpg">Дом 9</option>
<optionvalue="10.jpg">Дом 10</option>
<optionvalue="11.jpg">Дом 11</option>
<optionvalue="12.jpg">Дом 12</option>
<optionvalue="13.jpg">Дом 13</option>
<optionvalue="14.jpg">Дом 14</option>
<optionvalue="15.jpg">Дом 15</option>
<optionvalue="16.jpg">Дом 16</option>
<optionvalue="17.jpg">Дом 17</option>
<optionvalue="18.jpg">Дом 18</option>
</select>

<inputtype="submit"value="Смотреть"/>
</div>
<divstyle="padding:10px;">
@if(myPath != ""){
<imgsrc="@myPath"alt="Дом"width="800px"/>
}
</div>
</form>
</body>
</html>
    

Запустите проект


< Лекция 2 || Практическая работа 2 || Практическое занятие  >
Александр Лобанов
Александр Лобанов

Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново?

Анна Королева
Анна Королева
Беларусь, Минск, Беларуский Государственный Университет Информатики и Радиоэлектроники, 1998
Аббас Гусенов
Аббас Гусенов
Казахстан, Алматы, Казахский национальный технический университет имени К.И. Сатпаева, 2013