JSFiddle - React, Tailwind, and code Playground
HTML
<div id="myGallery">
<a href="images/medium-1.jpg"><img src="images/small-1.jpg" title="1 - Витрина" alt=" "/></a>
<a href="images/medium-2.jpg"><img src="images/small-2.jpg" title="2 - Витрина" alt=" "/></a>
<a href="images/medium-3.jpg"><img src="images/small-3.jpg" title="3 - Витрина" alt=" "/></a>
<a href="images/medium-4.jpg"><img src="images/small-4.jpg" title="4 - Витрина" alt=" "/></a>
<a href="images/medium-5.jpg"><img src="images/small-5.jpg" title="5 - Витрина" alt=" "/></a>
<a href="images/medium-6.jpg"><img src="images/small-6.jpg" title="6 - Витрина" alt=" "/></a>
<a href="images/medium-7.jpg"><img src="images/small-7.jpg" title="7 - Витрина" alt=" "/></a>
<a href="images/medium-8.jpg"><img src="images/small-8.jpg" title="8 - Витрина" alt=" "/></a>
<a href="images/medium-9.jpg"><img src="images/small-9.jpg" title="9 - Витрина" alt=" "/></a>
<a href="images/medium-10.jpg"><img src="images/small-10.jpg" title="10 - Витрина" /></a>
<a href="images/medium-11.jpg"><img src="images/small-11.jpg" title="11 - Витрина" /></a>
<a href="images/medium-12.jpg"><img src="images/small-12.jpg" title="12 - Витрина" /></a>
<a href="images/medium-13.jpg"><img src="images/small-13.jpg" title="13 - Витрина" /></a>
<a href="images/medium-14.jpg"><img src="images/small-14.jpg" title="14 - Витрина" /></a>
<a href="images/medium-15.jpg"><img src="images/small-15.jpg" title="15 - Витрина" /></a>
<a href="images/medium-16.jpg"><img src="images/small-16.jpg" title="16 - Витрина" /></a>
<a href="images/medium-17.jpg"><img src="images/small-17.jpg" title="17 - Витрина" /></a>
<a href="images/medium-18.jpg"><img src="images/small-18.jpg" title="18 - Витрина" /></a>
<a href="images/medium-19.jpg"><img src="images/small-19.jpg" title="19 - Витрина" /></a>
<a href="images/medium-20.jpg"><img src="images/small-20.jpg" title="20 - Витрина" /></a>
<a href="images/medium-21.jpg"><img src="images/small-21.jpg" title="21 - Витрина" /></a>
<a href="images/medium-22.jpg"><img...
JavaScript
/**
* ReMooz - Zoomer
*
* Inspired by so many boxes and zooms
*
* @version 1.0
*
* @license MIT-style license
* @author Harald Kirschner <mail [at] digitarald.de>
* @copyright Author
*/
var ReMooz = new Class({
Implements: [Events, Options, Chain],
options: {
link: null,
type: 'image',
container: null,
className: null,
centered: false,
dragging: true,
closeOnClick: true,
shadow: (Browser.Engine.trident) ? 'onOpenEnd' : 'onOpen', // performance
resize: true,
margin: 20,
resizeFactor: 0.95,
resizeLimit: false, // {x: 640, y: 640}
fixedSize: false,
cutOut: true,
addClick: true,
opacityLoad: 0.6,
opacityResize: 1,
opacityTitle: 0.9,
resizeOptions: {},
fxOptions: {},
closer: true,
parse: false, // 'rel'
parseSecure: false,
temporary: false,
onBuild: $empty,
onLoad: $empty,
onOpen: $empty,
onOpenEnd: $empty,
onClose: $empty,
onCloseEnd: $empty,
generateTitle: function(el) {
var text = el.get('title');
if (!text) return false;
var title = text.split(' :: ');
var head = new Element('h6', {'html': title[0]});
return (title[1]) ? [head, new Element('p', {'html': title[1]})] : head;
}
},
initialize: function(element, options) {
this.element = $(element);
this.setOptions(options);
if (this.options.parse) {
var obj = this.element.getProperty(this.options.parse);
if (obj && (obj = JSON.decode(obj, this.options.parseSecure))) this.setOptions(obj);
}
var origin = this.options.origin;
this.origin = ((origin) ? $(origin) || this.element.getElement(origin) : null) || this.element;
this.link = this.options.link || this.element.get('href') || this.element.get('src');
this.container = $(this.options.container) || this.element.getDocument();
this.bound = {
'click': function(e) {
this.open.delay(1, this);
return false;
}.bind(this),
'close': this.close.bind(this),
'dragClose': function(e) {
if (e.rightClick)...