Skip to content

Instantly share code, notes, and snippets.

@alunov-equinix

alunov-equinix/gist:6559011

Created September 14, 2013 05:18
Show Gist options
  • Save alunov-equinix/6559011 to your computer and use it in GitHub Desktop.
Save alunov-equinix/6559011 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Галереи и картинки можно добавлять в любом кол-ве(только нужно сохранять названия классов) -->
<div class="gallery">
<img class="bigPic" src="pics/cars/2.jpg">
<div class="smallPic">
<a href="#" class="arrow left" >&#8249; </a>
<a href="#" class="arrow right" >&#8250; </a>
<ul>
<li><img src="pics/cars/2.jpg"></li>
<li><img src="pics/cars/3.jpg"></li>
<li><img src="pics/cars/4.jpg"></li>
<li><img src="pics/cars/5.jpg"></li>
<li><img src="pics/cars/6.jpg"></li>
<li><img src="pics/cars/7.jpg"></li>
<li><img src="pics/cars/1.jpg"></li>
</ul>
</div>
</div>
<div class="gallery">
<img class="bigPic" src="pics/nature/8.jpg">
<div class="smallPic">
<a href="#" class="arrow left" >&#8249; </a>
<a href="#" class="arrow right" >&#8250; </a>
<ul>
<li><img src="pics/nature/2.jpg"></li>
<li><img src="pics/nature/3.jpg"></li>
<li><img src="pics/nature/4.jpg"></li>
<li><img src="pics/nature/5.jpg"></li>
<li><img src="pics/nature/6.jpg"></li>
<li><img src="pics/nature/7.jpg"></li>
<li><img src="pics/nature/1.jpg"></li>
<li><img src="pics/nature/8.jpg"></li>
<li><img src="pics/nature/9.jpg"></li>
</ul>
</div>
</div>
<div class="gallery">
<img class="bigPic" src="pics/animals/2.jpg">
<div class="smallPic">
<a href="#" class="arrow left" >&#8249; </a>
<a href="#" class="arrow right" >&#8250; </a>
<ul>
<li><img src="pics/animals/1.jpg"></li>
<li><img src="pics/animals/2.jpg"></li>
<li><img src="pics/animals/3.jpg"></li>
<li><img src="pics/animals/4.jpg"></li>
<li><img src="pics/animals/5.jpg"></li>
<li><img src="pics/animals/6.jpg"></li>
<li><img src="pics/animals/7.jpg"></li>
<li><img src="pics/animals/8.jpg"></li>
<li><img src="pics/animals/9.jpg"></li>
<li><img src="pics/animals/10.jpg"></li>
<li><img src="pics/animals/11.jpg"></li>
<li><img src="pics/animals/12.jpg"></li>
</ul>
</div>
</div>
<script type="text/javascript" src="gallery.js">
</script>
</body>
</html>
Raw
gistfile2.css
/* RESET CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
padding:5px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*-----Gallery CSS-------*/
.gallery{
background-image: url(pics/back.jpg);
border: 2.5px solid black;
display:inline-block;
margin-bottom: 10px;
border-radius: 1em 4em 1em 4em;
overflow: hidden;
opacity:0.7;
}
.gallery:hover {
opacity:1.0;
}
.bigPic{
padding: 5px;
border: 3px solid #1E90FF;
border-radius: 13em 0.5em/1em 0.5em;
}
.smallPic{
padding: 5px;
border: 5.7px solid black;
border-radius: 13em 0.5em/1em 0.5em;
vertical-align: middle;
overflow: hidden;
}
.smallPic ul{
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
.smallPic ul li {
float:left;
border: 3px solid black;
margin-left: 4px;
}
.smallPic ul li:hover {
border: 3px dashed red;
opacity:1.0;
}
.smallPic ul li {
opacity:0.85;
}
.arrow{
color: #7CFC00;
font-size:70px;
margin-top: 15px;
text-decoration: none;
}
.arrow:hover {
background: black;
}
.left {
float:left;
}
.right {
float: right;
}
Raw
gistfile3.js
'use strict';
/* Создание модуля MyGallery */
var MyGallery = (function () {
function MyGalleryConstuctor(selector) {
var self = this;
this.numOfGalleries = document.querySelectorAll(selector).length;
this.containersArr = document.querySelectorAll(selector);
this.bigPicsArr = document.querySelectorAll('.bigPic');
this.smallPicsDIVArr = document.querySelectorAll('.smallPic');
this.smallPicsULArr = [];
for (var i = 0; i < this.numOfGalleries; i++) {
this.smallPicsULArr[i] = this.smallPicsDIVArr[i].getElementsByTagName("ul")[0].children;
addClass(this.containersArr[i], "noactive");
} /* Переменные, необходимые для правильного размещения галерей на страничке*/
this.PADDING = 10;
this.BORDER_SIZE = 5;
this.CONTAINER_WIDTH = document.documentElement.clientWidth / 2;
this.CONTAINER_HEIGHT = document.documentElement.clientHeight * (3 / 4);
this.ARROW_WIDTH = document.querySelector('.arrow').scrollWidth;
/* Обработка всех действий происходит внутри конструктора*/
for (var i = 0; i < this.numOfGalleries; i++) {
addEvent(this.containersArr[i], 'mouseover', myMouseEnter(keyAction));
addEvent(this.containersArr[i], 'mouseout', myMouseLeave(keyStop));
}
function clickAction(event) {
prevDef(event);
if (hasClass(event.target, "right")) {
self.back();
}
else if (hasClass(event.target, "left")) {
self.next();
}
else if (event.target.nodeName === "IMG") {
var currentBigPic = document.querySelector('.current').querySelector('img');
currentBigPic.src = event.target.src;
}
}
function keyEvent(e) {
self.keyboardAction(e, self);
}
function keyAction() {
addClass(this, "current");
removeClass(this, "noactive");
addEvent(document.documentElement, 'keydown', keyEvent);
}
function keyStop() {
removeClass(this, "current");
addClass(this, "noactive");
removeEvent(document.documentElement, 'keydown', keyEvent);
clearInterval(self.timer);
self.setTimer(self);
}
addEvent(document, 'click', clickAction);
/*Вызов необходимых методов, для отображения и корректной работы галерей(решил вывать внутри модуля)*/
this.show(self);
this.setTimer(self);
}
MyGalleryConstuctor.prototype.setTimer = function (self) {
self.timer = setInterval(function () {
self.next(self);
}, 5000);
}
MyGalleryConstuctor.prototype.next = function (self) {
if (arguments.length === 0) {
var imgs = document.querySelector('.current').querySelectorAll('li img');
var newSrc;
for (var i = imgs.length - 2; i >= 0; i--) {
newSrc = imgs[imgs.length - 1].src;
imgs[imgs.length - 1].src = imgs[i].src;
imgs[i].src = newSrc;
alert(newSrc);
}
}
else {
var noactiveImgs = document.querySelectorAll('.noactive');
for (var j = 0; j < noactiveImgs.length; j++) {
var imgs = noactiveImgs[j].querySelectorAll('li img');
var newSrc;
for (var i = 0; i < imgs.length - 1; i++) {
newSrc = imgs[i].src;
imgs[i].src = imgs[imgs.length - 1].src;
imgs[imgs.length - 1].src = newSrc;
}
}
}
}
MyGalleryConstuctor.prototype.back = function () {
var imgs = document.querySelector('.current').querySelectorAll('li img');
var newSrc;
for (var i = 0; i < imgs.length - 1; i++) {
newSrc = imgs[i].src;
imgs[i].src = imgs[imgs.length - 1].src;
imgs[imgs.length - 1].src = newSrc;
}
}
MyGalleryConstuctor.prototype.show = function (self) {
/* Галерей может быть любое кол-во, метод show обрабатывает сразу все галереи*/
for (var i = 0; i < self.numOfGalleries; i++) {
var container = self.containersArr[i];
var bigPic = self.bigPicsArr[i];
var smallPicDIV = self.smallPicsDIVArr[i];
var smallpicLI = self.smallPicsULArr[i];
container.style.width = self.CONTAINER_WIDTH - self.PADDING * 2 - self.BORDER_SIZE + "px";
container.style.height = self.CONTAINER_HEIGHT - self.PADDING - self.BORDER_SIZE + "px";
if (i % 2 !== 0) {
container.style.marginLeft = "5px";
}
bigPic.style.width = container.clientWidth - self.PADDING - self.BORDER_SIZE + "px";
bigPic.style.height = self.CONTAINER_HEIGHT * (2 / 3) - self.PADDING * 2 - self.BORDER_SIZE + "px";
smallPicDIV.style.width = bigPic.clientWidth - self.BORDER_SIZE + "px";
smallPicDIV.style.height = self.CONTAINER_HEIGHT * (1 / 3) - self.PADDING * 2 - self.BORDER_SIZE + "px";
for (var j = 0; j < smallpicLI.length; j++) {
var smallpicIMG = smallpicLI[j].children[0];
smallpicIMG.style.width = (smallPicDIV.clientWidth - self.ARROW_WIDTH * 2) / 3 - self.BORDER_SIZE * 3 + "px";
smallpicIMG.style.height = smallPicDIV.clientHeight - self.BORDER_SIZE * 3 + "px";
}
}
}
MyGalleryConstuctor.prototype.keyboardAction = function (event, self) {
if (event.keyCode === 39) {
self.back();
}
if (event.keyCode === 37) {
self.next();
}
}
/* ------------------------myTools---------------------------- */
function addEvent(obj, event_name, handler) {
if (obj.addEventListener) {
obj.addEventListener(event_name, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + event_name, handler);
if(event_name='mouseover'){
event_name='mouseenter';
}
else if(event_name='mouseout'){
event_name='mouseleave';
}
}
}
function myMouseEnter(handler) {
return function (e) {
e = e || event;
var toElement = e.relatedTarget || e.srcElement;
while (toElement && toElement !== this) {
toElement = toElement.parentNode;
}
if (toElement == this) {
return;
}
return handler.call(this, e);
};
}
function myMouseLeave(handler) {
return function (e) {
e = e || event;
var toElement = e.relatedTarget || e.toElement;
while (toElement && toElement !== this) {
toElement = toElement.parentNode;
}
if (toElement == this) {
return;
}
return handler.call(this, e);
};
}
function removeEvent(obj, event_name, handler) {
if (obj.removeEventListener) {
obj.removeEventListener(event_name, handler, false);
} else {
obj.detachEvent('on' + event_name, handler);
}
}
function hasClass(el, name) {
return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) {
el.className += (el.className ? ' ' : '') + name;
}
}
function removeClass(el, name) {
if (hasClass(el, name)) {
el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
}
}
function getStyle(selector, styleProp) {
var elem = document.querySelector(selector);
if (elem.currentStyle)
var value = elem.currentStyle[styleProp];
else if (window.getComputedStyle)
var value = document.defaultView.getComputedStyle(elem, null).getPropertyValue(styleProp);
return value;
}
function prevDef(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
return MyGalleryConstuctor;
} ());
var gallery = new MyGallery(".gallery");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment