https://www.sollerdivers.com/js/jquery.unitegallery/themes/tiles/ug-theme-tiles.js

1
2if(typeof g_ugFunctions != "undefined")
3	g_ugFunctions.registerTheme("tiles");
4else 
5	jQuery(document).ready(function(){g_ugFunctions.registerTheme("tiles")});
6
7
8/**
9 * Grid gallery theme
10 */
11function UGTheme_tiles(){
12
13	var t = this;
14	var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; 
15	var g_tiles = new UGTiles(), g_lightbox = new UGLightbox(), g_objPreloader, g_objTilesWrapper;
16	var g_functions = new UGFunctions(), g_objTileDesign = new UGTileDesign();
17	
18	var g_options = {
19			theme_enable_preloader: true,		//enable preloader circle
20			theme_preloading_height: 200,		//the height of the preloading div, it show before the gallery
21			theme_preloader_vertpos: 100,		//the vertical position of the preloader
22			theme_gallery_padding: 0,			//the horizontal padding of the gallery from the sides
23			theme_appearance_order: "normal",	//normal, shuffle, keep - the appearance order of the tiles. applying only to columns type
24			theme_auto_open:null				//auto open lightbox at start
25	};
26	
27	var g_defaults = {
28			gallery_width: "100%"
29	};
30	
31	//temp variables
32	var g_temp = {
33			showPreloader: false
34	};
35	
36	
37	/**
38	 * Init the theme
39	 */
40	function initTheme(gallery, customOptions){
41		
42		g_gallery = gallery;
43		
44		//set default options
45		g_options = jQuery.extend(g_options, g_defaults);
46		
47		//set custom options
48		g_options = jQuery.extend(g_options, customOptions);
49		
50		modifyOptions();
51		
52		//set gallery options
53		g_gallery.setOptions(g_options);
54		
55		g_gallery.setFreestyleMode();
56		
57		g_objects = gallery.getObjects();
58		
59		//get some objects for local use
60		g_objGallery = jQuery(gallery);		
61		g_objWrapper = g_objects.g_objWrapper;
62		
63		//init objects
64		g_tiles.init(gallery, g_options);
65		g_lightbox.init(gallery, g_options);
66		
67		g_objTileDesign = g_tiles.getObjTileDesign();
68
69		
70	}
71	
72	
73	/**
74	 * modift options
75	 */
76	function modifyOptions(){
77		
78		if(g_options.theme_enable_preloader == true)
79			g_temp.showPreloader = true;
80		
81		switch(g_options.theme_appearance_order){
82			default:
83			case "normal":
84			break;
85			case "shuffle":
86				g_gallery.shuffleItems();
87			break;
88			case "keep":
89				g_options.tiles_keep_order = true;
90			break;
91		}
92		
93	}
94
95	
96	/**
97	 * set gallery html elements
98	 */
99	function setHtml(){
100		
101		//add html elements
102		g_objWrapper.addClass("ug-theme-tiles");
103		
104		g_objWrapper.append("<div class='ug-tiles-wrapper' style='position:relative'></div>");
105		
106		//add preloader
107		if(g_temp.showPreloader == true){
108			g_objWrapper.append("<div class='ug-tiles-preloader ug-preloader-trans'></div>");
109			g_objPreloader = g_objWrapper.children(".ug-tiles-preloader");
110			g_objPreloader.fadeTo(0,0);
111		}
112		
113		g_objTilesWrapper = g_objWrapper.children(".ug-tiles-wrapper");
114		
115		//set padding
116		if(g_options.theme_gallery_padding)
117			g_objWrapper.css({
118				"padding-left":g_options.theme_gallery_padding+"px",
119				"padding-right":g_options.theme_gallery_padding+"px"
120			});
121		
122		g_tiles.setHtml(g_objTilesWrapper);
123		g_lightbox.putHtml();
124	}
125	
126	/**
127	 * actually run the theme
128	 */
129	function actualRun(){
130		
131		//set preloader mode
132		if(g_objPreloader){
133			g_objPreloader.fadeTo(0,1);
134			g_objWrapper.height(g_options.theme_preloading_height);
135			g_functions.placeElement(g_objPreloader, "center", g_options.theme_preloader_vertpos);
136		}
137		
138		initEvents();
139		
140		g_tiles.run();
141		g_lightbox.run();
142		
143	}
144
145	
146	/**
147	 * run the theme
148	 */
149	function runTheme(){
150		
151		setHtml();
152		
153		actualRun();
154		
155	}
156	
157	
158	
159	/**
160	 * init size of the thumbs panel
161	 */
162	function initThumbsPanel(){
163		
164		//set size:
165		var objGallerySize = g_gallery.getSize();
166			
167		if(g_temp.isVertical == false)			
168			g_objPanel.setWidth(objGallerySize.width);
169		else
170			g_objPanel.setHeight(objGallerySize.height);
171		
172		g_objPanel.run();
173	}
174	
175	
176	/**
177	 * on tile click - open lightbox
178	 */
179	function onTileClick(data, objTile){
180		
181		objTile = jQuery(objTile);		
182		
183		var objItem = g_objTileDesign.getItemByTile(objTile);
184		var index = objItem.index;		
185		
186		g_lightbox.open(index);
187	}
188	
189	
190	/**
191	 * before items request: hide items, show preloader
192	 */
193	function onBeforeReqestItems(){
194				
195		g_objTilesWrapper.hide();
196		
197		if(g_objPreloader){
198			g_objPreloader.show();
199		
200			var preloaderSize = g_functions.getElementSize(g_objPreloader);
201			var galleryHeight = preloaderSize.bottom + 30;
202			
203			g_objWrapper.height(galleryHeight);
204		}
205		
206	}
207
208	/**
209	 * open lightbox at start if needed
210	 */
211	function onLightboxInit(){
212
213		if(g_options.theme_auto_open !== null){
214			g_lightbox.open(g_options.theme_auto_open);
215			g_options.theme_auto_open = null;
216		}
217		
218	}
219	
220	
221	/**
222	 * init buttons functionality and events
223	 */
224	function initEvents(){
225		
226		//remove preloader on tiles first placed
227		if(g_objPreloader){
228			
229			g_gallery.onEvent(g_tiles.events.TILES_FIRST_PLACED, function(){
230				
231				g_objWrapper.height("auto");
232				g_objPreloader.hide();
233			});			
234		}
235		
236		jQuery(g_objTileDesign).on(g_objTileDesign.events.TILE_CLICK, onTileClick);
237		
238		g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems);
239
240		jQuery(g_lightbox).on(g_lightbox.events.LIGHTBOX_INIT, onLightboxInit);
241
242	}
243	
244	
245	/**
246	 * destroy the theme
247	 */
248	this.destroy = function(){
249				
250		jQuery(g_objTileDesign).off(g_objTileDesign.events.TILE_CLICK);
251		
252		g_gallery.destroyEvent(g_tiles.events.TILES_FIRST_PLACED);
253				
254		g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS);
255
256		jQuery(g_lightbox).off(g_lightbox.events.LIGHTBOX_INIT);
257		
258		g_tiles.destroy();
259		g_lightbox.destroy();
260	}
261	
262	
263	/**
264	 * run the theme setting
265	 */
266	this.run = function(){
267		
268		runTheme();
269	}
270	
271	
272	/**
273	 * add items
274	 */
275	this.addItems = function(){
276		
277		g_tiles.runNewItems();
278	}
279	
280	
281	/**
282	 * init 
283	 */
284	this.init = function(gallery, customOptions){
285				
286		initTheme(gallery, customOptions);
287		
288	}
289	
290	
291}