https://www.ofah.net/blog/wp-content/themes/newslog/js/jd.gallery.set.js

1/*
2    This file is part of JonDesign's SmoothGallery v2.0.
3
4    JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
5    it under the terms of the GNU General Public License as published by
6    the Free Software Foundation; either version 3 of the License, or
7    (at your option) any later version.
8
9    JonDesign's SmoothGallery is distributed in the hope that it will be useful,
10    but WITHOUT ANY WARRANTY; without even the implied warranty of
11    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12    GNU General Public License for more details.
13
14    You should have received a copy of the GNU General Public License
15    along with JonDesign's SmoothGallery; if not, write to the Free Software
16    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
17
18    Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
19*/
20
21var gallerySet = gallery.extend({
22	initialize: function(element, options) {
23		this.setOptions({
24			manualSetData: [],
25			gallerySelector: "div.galleryElement",
26			galleryTitleSelector: "h2",
27			textGallerySelector: 'Galleries',
28			textShowGallerySelector: 'Other Galleries',
29			textGalleryInfo: '{0} pictures',
30			startWithSelector: true,
31			/* Changing default options */
32			textShowCarousel: '{0}/{1} Pictures',
33			carouselPreloader: false
34		}, options);
35		this.gallerySet = this.options.manualSetData;
36		this.addEvent('onPopulated', this.createGallerySelectorTab.bind(this));
37		this.addEvent('onPopulated', this.createGallerySelector.bind(this));
38		this.startWithSelectorFn = this.toggleGallerySelector.pass(true, this);
39		if (this.options.startWithSelector)
40			this.addEvent('onGallerySelectorCreated', this.startWithSelectorFn);
41		this.parent(element, this.options);
42	},
43	populateData: function() {
44		options = this.options;
45		var data = $A(this.gallerySet);
46		this.populateFrom.getElements(options.gallerySelector).each(function (galEl) {
47			currentGalArrayPlace = 0;
48			galleryDict = {
49				title: galEl.getElement(options.galleryTitleSelector).innerHTML,
50				elements: []
51			}
52			galleryDict.elements.extend(this.populateGallery(galEl, 0));
53			data.extend([galleryDict]);
54			if (this.options.destroyAfterPopulate)
55				galEl.remove();
56		}, this);
57		this.gallerySet = data;
58		this.galleryData = data[0].elements;
59		this.currentGallery = 0;
60		this.fireEvent('onPopulated');
61	},
62	changeGallery: function(number)
63	{
64		if (number!=this.currentGallery)
65		{
66			this.changeData(this.gallerySet[number].elements);
67			this.maxIter = this.gallerySet[number].elements.length;
68			this.currentGallery = number;
69			this.gallerySelectorBtn.setHTML(this.gallerySet[number].title);
70			this.fireEvent('onGalleryChanged');
71		}
72		this.toggleGallerySelector(false);
73	},
74	createGallerySelectorTab: function() {
75		this.gallerySelectorBtn = new Element('a').addClass('gallerySelectorBtn').setProperties({
76			title: this.options.textShowGallerySelector
77		}).setHTML(this.options.textShowGallerySelector).addEvent(
78			'click',
79			function(){ this.toggleGallerySelector(true); }.bind(this)
80		).injectInside(this.galleryElement);
81		this.addEvent('onShowCarousel', function(){this.gallerySelectorBtn.setStyle('zIndex', 10)}.bind(this));
82		this.addEvent('onCarouselHidden', function(){this.gallerySelectorBtn.setStyle('zIndex', 15)}.bind(this));
83	},
84	createGallerySelector: function() {
85		this.gallerySelector = new Fx.Styles(
86			new Element('div').addClass(
87				'gallerySelector'
88			).injectInside(
89				this.galleryElement
90			).setStyles({
91				'display': 'none',
92				'opacity': '0'
93			})
94		);
95		this.gallerySelectorTitle = 
96			new Element('h2').setHTML(
97				this.options.textGallerySelector
98			).injectInside(this.gallerySelector.element);
99		var gallerySelectorHeight = this.galleryElement.offsetHeight - 50 - 10 - 2;
100		this.gallerySelectorWrapper = new Fx.Style(
101			new Element('div').addClass(
102				'gallerySelectorWrapper'
103			).setStyle(
104				'height',
105				gallerySelectorHeight + "px"
106			).injectInside(this.gallerySelector.element)
107		);
108		this.gallerySelectorInner =	new Element('div').addClass('gallerySelectorInner').injectInside(this.gallerySelectorWrapper.element);
109		this.gallerySelectorWrapper.scroller = new Scroller(this.gallerySelectorWrapper.element, {
110			area: 100,
111			velocity: 0.3
112		}).start();
113		this.createGalleryButtons();
114		this.fireEvent('onGallerySelectorCreated');
115	},
116	createGalleryButtons: function () {
117		var galleryButtonWidth =
118			((this.galleryElement.offsetWidth - 30) / 2) - 14;
119		this.gallerySet.each(function(galleryItem, index){
120			var button = new Element('div').addClass('galleryButton').injectInside(
121				this.gallerySelectorInner
122			).addEvents({
123				'mouseover': function(myself){
124					myself.button.addClass('hover');
125				}.pass(galleryItem, this),
126				'mouseout': function(myself){
127					myself.button.removeClass('hover');
128				}.pass(galleryItem, this),
129				'click': function(myself, number){
130					this.changeGallery.pass(number,this)();
131				}.pass([galleryItem, index], this)
132			}).setStyle('width', galleryButtonWidth);
133			galleryItem.button = button;
134			var thumbnail = "";
135			if (this.options.showCarousel)
136				thumbnail = galleryItem.elements[0].thumbnail;
137			else
138				thumbnail = galleryItem.elements[0].image;
139			new Element('div').addClass('preview').setStyle(
140				'backgroundImage',
141				"url('" + thumbnail + "')"
142			).injectInside(button);
143			new Element('h3').setHTML(galleryItem.title).injectInside(button);
144			new Element('p').addClass('info').setHTML(formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button);
145		}, this);
146		new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both');
147	},
148	toggleGallerySelector: function(state) {
149		if (state)
150			this.gallerySelector.start({'opacity' : 1}).element.setStyle('display','block');
151		else
152			this.gallerySelector.start({'opacity' : 0});
153	},
154	initHistory: function() {
155		this.fireEvent('onHistoryInit');
156		this.historyKey = this.galleryElement.id + '-gallery';
157		if (this.options.customHistoryKey)
158			this.historyKey = this.options.customHistoryKey();
159		this.history = HistoryManager.register(
160			this.historyKey,
161			[1,1],
162			function(values) {
163				this.changeGallery.pass(parseInt(values[0]) - 1, this).delay(10);
164				if(this.gallerySelector)
165					this.toggleGallerySelector.pass(false, this).delay(500);
166				this.goTo.pass(parseInt(values[1]) - 1, this).delay(100);
167			}.bind(this),
168			function(values) {
169				return [this.historyKey, '(', values[0], ')', '-picture','(', values[1], ')'].join('');
170			}.bind(this),
171			this.historyKey + '\\((\\d+)\\)-picture\\((\\d+)\\)');
172		updateHistory = function(){
173			this.history.setValue(0, this.currentGallery + 1);
174			this.history.setValue(1, this.currentIter + 1);
175		}.bind(this);		
176		
177		this.addEvent('onChanged', updateHistory);
178		this.addEvent('onGalleryChanged', updateHistory);
179		this.fireEvent('onHistoryInited');
180	}
181});