diff --git a/index-gallery.html b/index-gallery.html
new file mode 100644
index 0000000..7d3bb45
--- /dev/null
+++ b/index-gallery.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Пример фотогалереи
+
+
+
+
+
+
+ Пример фотогалереи
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..1451f26
--- /dev/null
+++ b/main.js
@@ -0,0 +1,40 @@
+var displayedImage = document.querySelector('.displayed-img');
+var thumbBar = document.querySelector('.thumb-bar');
+
+btn = document.querySelector('button');
+var overlay = document.querySelector('.overlay');
+
+/* Looping through images */
+ var imgSrc = ['images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg', 'images/pic5.jpg'];
+ for (var i = 0; i < imgSrc.length; i++) {
+ var newImage = document.createElement('img');
+ newImage.setAttribute('src', imgSrc[i]);
+ thumbBar.appendChild(newImage);
+ newImage.onclick = function(e) {
+ var srcCurrent = e.target.getAttribute('src');
+ displayImage(srcCurrent);
+ }
+
+ }
+
+ function displayImage(srcCurrent) {
+ displayedImage.setAttribute('src', srcCurrent);
+ }
+
+
+
+/* Wiring up the Darken/Lighten button */
+
+ btn.onclick = function() {
+ var classCrt = btn.getAttribute('class');
+ if (classCrt === 'dark') {
+ btn.setAttribute('class', 'light');
+ btn.textContent = 'Светлее';
+ overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
+ }
+ else {
+ btn.setAttribute('class', 'dark');
+ btn.textContent = 'Темнее';
+ overlay.style.backgroundColor = 'rgba(0,0,0,0)';
+ }
+ }
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d3fe774
--- /dev/null
+++ b/style.css
@@ -0,0 +1,43 @@
+h1 {
+ font-family: helvetica, arial, sans-serif;
+ text-align: center;
+}
+
+body {
+ width: 640px;
+ margin: 0 auto;
+}
+
+.full-img {
+ position: relative;
+ display: block;
+ width: 640px;
+ height: 480px;
+}
+
+.overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 640px;
+ height: 480px;
+ background-color: rgba(0,0,0,0);
+}
+
+button {
+ border: 0;
+ background: rgba(150,150,150,0.6);
+ text-shadow: 1px 1px 1px white;
+ border: 1px solid #999;
+ position: absolute;
+ cursor: pointer;
+ top: 2px;
+ left: 2px;
+}
+
+.thumb-bar img {
+ display: block;
+ width: 20%;
+ float: left;
+ cursor: pointer;
+}
\ No newline at end of file