ШИФРА ЗАДАТКА: ЕИТ-A2
НАЗИВ ЗАДАТКА: КРЕИРАЊЕ ВЕБ АПЛИКАЦИЈЕ –ФОТО ГАЛЕРИЈА
Креирати веб апликацију са називом “Фото галерија” која се састоји од три странице: Почетна, О аутору и Упутство.
На страници Почетна поставити контејнер за смештај галерије величине 640x480 px. На средини контејнера поставити централну фотографију величине 320x200px, а испод ње распоредити десет малих фотографија величине 64x40 px. Фотографије се учитавају из посебног фолдера и произвољних су димензија а урађене су ЈPG формату. Фотографије имају називе slika1,jpg, slika2.jpg, ……… i slika10.jpg.
На страници О аутору написати основне податке о аутору.
На страници Упутство написати кратко упутство за коришћење веб апликације.
Веб апликација треба да има следећу фукционалност: Левим кликом миша на доњу (малу) фотографију та фотографија се приказује на месту централне фотографије, а такође се исписује њен назив изнад централне фотографије.
CSS код и код за функционалност издвојити у посебне екстерне датотеке а учитати их у HTML при стартовању апликације.
Готову апликацију поставити на Веб сервер инсталиран на локалном рачунару.
Прибор за рад:
Рачунар са потребним програмима и прикључком на Интернет.
Време за израду задатка:
Максимално време за израду задатка је 180 минута. По истеку максималног времена задатак се прекида и бодује се оно што је до тада урађено.
За оцењивање користити образац за оцењивање број ЕИТ-A2
Folderi: Fja | Slike
Stranice: Pocetna.html | Oautoru.html | Uputstvo.html
Pocetna stranica:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Pocetna</title>
<link rel="stylesheet" href="fja/style.css">
</head>
<body>
<div class="container">
<div class="feature">
<figure class="featured-item image-holder r-3-2 transition"></figure>
</div>
<div class="gallery-wrapper">
<div class="gallery">
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 active transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
<div class="item-wrapper">
<figure class="gallery-item image-holder r-3-2 transition"></figure>
</div>
</div>
</div>
</div>
<button class="button "><a href="O autoru.html">O autoru</a></button>
<button class="button "><a href="Uputstvo.html">Uputstvo</a></button>
<script src="fja/index.js"></script>
</body>
</html>
O autoru:
<!DOCTYPE html>
<html>
<body>
<h2>Autor stranice je Marijana Petojevic 4/08</h2>
<p><a href="Pocetna.html">Nazad</a></p>
</body>
</html>
Uputstvo:
<!DOCTYPE html>
<html>
<body>
<h2>Klik na malu sliku otvara je u formatu 320px sa 200 px!</h2>
<p><a href="Pocetna.html">Nazad</a></p>
</body>
</html>
U folderu fja: index.js
var gallery = document.querySelector('.gallery');
var galleryItems = document.querySelectorAll('.gallery-item');
var numOfItems = gallery.children.length;
var itemWidth = 23; // percent: as set in css
var featured = document.querySelector('.featured-item');
var leftBtn = document.querySelector('.move-btn.left');
var rightBtn = document.querySelector('.move-btn.right');
var leftInterval;
var rightInterval;
var scrollRate = 0.2;
var left;
function selectItem(e) {
if (e.target.classList.contains('active')) return;
featured.style.backgroundImage = e.target.style.backgroundImage;
for (var i = 0; i < galleryItems.length; i++) {
if (galleryItems[i].classList.contains('active'))
galleryItems[i].classList.remove('active');
}
e.target.classList.add('active');
}
function galleryWrapLeft() {
var first = gallery.children[0];
gallery.removeChild(first);
gallery.style.left = -itemWidth + '%';
gallery.appendChild(first);
gallery.style.left = '0%';
}
function galleryWrapRight() {
var last = gallery.children[gallery.children.length - 1];
gallery.removeChild(last);
gallery.insertBefore(last, gallery.children[0]);
gallery.style.left = '-23%';
}
(function init() {
var images = [
'slike/slika1.jpg',
'slike/slika2.jpg',
'slike/slika3.jpg',
'slike/slika4.jpg',
'slike/slika5.jpg',
'slike/slika6.jpg',
'slike/slika7.jpg',
'slike/slika8.jpg',
'slike/slika9.jpg',
'slike/slika10.jpg'
];
//Set Initial Featured Image
featured.style.backgroundImage = 'url(' + images[0] + ')';
//Set Images for Gallery and Add Event Listeners
for (var i = 0; i < galleryItems.length; i++) {
galleryItems[i].style.backgroundImage = 'url(' + images[i] + ')';
galleryItems[i].addEventListener('click', selectItem);
}
})();
U folderu fja: style.css
*,
*::before,
*::after {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
margin: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
color: #707070;
background-color: #333;
}
.container {
margin: 20px auto;
width: 640px;
height: 480px;
background-color: white;
}
/* Useful Classes */
.xy-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition {
transition: all 350ms ease-in-out;
}
.r-3-2 {
width: 100%;
padding-bottom: 66.667%;
background-color: #ddd;
}
.image-holder {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.gallery-wrapper {
position: relative;
overflow: hidden;
}
.gallery {
position: relative;
white-space: nowrap;
font-size: 0;
}
.item-wrapper {
cursor: pointer;
width: 64px;
height: 40px; /* arbitrary value */
display: inline-block;
background-color: white;
}
.gallery-item { opacity: 0.5; }
.gallery-item.active { opacity: 1; }
.controls {
font-size: 0;
border-top: none;
}
.featured{
background-repeat: no-repeat;
background-size: 320px 200px;
}
a{
background-color: #d91c71;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;}
Korišćene slike:
Коментари
Постави коментар