https://wecopwatch.org/wp-content/plugins/tiled-gallery-carousel-w…/tiled-gallery/tiled-gallery.js

1( function($) {
2
3var TiledGallery = function() {
4	this.resizeTimeout = null;
5
6	this.populate();
7
8	var self = this;
9
10	$( window ).on( 'resize', function () {
11		clearTimeout( self.resizeTimeout );
12		
13		self.resizeTimeout = setTimeout( function () { self.resize(); }, 150 );
14	} );
15
16    // Make any new galleries loaded by Infinite Scroll flexible
17    $( 'body' ).on( 'post-load', $.proxy( self.initialize, self ) );
18	
19	// Populate and set up captions on newdash galleries.
20	$( document ).on( 'page-rendered.wpcom-newdash', $.proxy( self.populate, self ) );
21
22	this.resize();
23};
24
25TiledGallery.prototype.populate = function() {
26	this.gallery = $( '.tiled-gallery' );
27	this.item    = this.gallery.find( '.tiled-gallery-item' );
28	this.caption = this.gallery.find( '.tiled-gallery-caption' );
29
30	this.Captions();
31};
32
33TiledGallery.prototype.initialize = function() {
34	var self = this;
35
36	self.populate();
37
38	// After each image load, run resize in case all images in the gallery are loaded.
39	self.gallery.find( 'img' ).off( 'load.tiled-gallery' ).on( 'load.tiled-gallery', function () {
40		self.resize();
41	} );
42
43	// Run resize now in case all images loaded from cache.
44	self.resize();
45};
46
47/**
48 * Story
49 */
50TiledGallery.prototype.Captions = function() {
51	/* Hide captions */
52	this.caption.hide();
53
54	this.item.on( 'hover', function() {
55		$( this ).find( '.tiled-gallery-caption' ).slideToggle( 'fast' );
56	});
57};
58
59TiledGallery.prototype.resize = function() {
60	var resizeableElements = '.gallery-row, .gallery-group, .tiled-gallery-item img';
61
62	this.gallery.each( function ( galleryIndex, galleryElement ) {
63		var thisGallery = $( galleryElement );
64		
65		// All images must be loaded before proceeding.
66		var imagesLoaded = true;
67
68		thisGallery.find( 'img' ).each( function () {
69			if ( ! this.complete ) {
70				imagesLoaded = false;
71				return false;
72			}
73		} );
74
75		if ( ! imagesLoaded ) {
76			var loadCallback = arguments.callee;
77
78			// Once all of the images have loaded,
79			// re-call this containing function.
80			$( window ).load( function () {
81				loadCallback( null, thisGallery );
82			} );
83
84			return;
85		}
86
87		if ( ! thisGallery.data( 'sizes-set' ) ) {
88			// Maintain a record of the original widths and heights of these elements
89			// for proper scaling.
90			thisGallery.data( 'sizes-set', true );
91
92			thisGallery.find( resizeableElements ).each( function () {
93				var thisGalleryElement = $( this );
94
95				// Don't change margins, but remember what they were so they can be
96				// accounted for in size calculations.  When the screen width gets
97				// small enough, ignoring the margins can cause images to overflow
98				// into new rows.
99				var extraWidth = ( parseInt( thisGalleryElement.css( 'marginLeft' ), 10 ) || 0 ) + ( parseInt( thisGalleryElement.css( 'marginRight' ), 10 ) || 0 );
100				var extraHeight = ( parseInt( thisGalleryElement.css( 'marginTop' ), 10 ) || 0 ) + ( parseInt( thisGalleryElement.css( 'marginBottom' ), 10 ) || 0 )
101
102				// In some situations, tiled galleries in Firefox have shown scrollbars on the images because
103				// the .outerWidth() call on the image returns a value larger than the container. Restrict
104				// widths used in the resizing functions to the maximum width of the container.
105				var parentElement = $( thisGalleryElement.parents( resizeableElements ).get( 0 ) );
106
107				if ( parentElement && parentElement.data( 'original-width' ) ) {
108					thisGalleryElement
109						.data( 'original-width', Math.min( parentElement.data( 'original-width' ), thisGalleryElement.outerWidth( true ) ) )
110						.data( 'original-height', Math.min( parentElement.data( 'original-height' ), thisGalleryElement.outerHeight( true ) ) );
111				}
112				else {
113					thisGalleryElement
114						.data( 'original-width', thisGalleryElement.outerWidth( true ) )
115						.data( 'original-height', thisGalleryElement.outerHeight( true ) );
116				}
117
118				thisGalleryElement
119					.data( 'extra-width', extraWidth )
120					.data( 'extra-height', extraHeight );
121			} );
122		}
123
124		// Resize everything in the gallery based on the ratio of the current content width
125		// to the original content width;
126		var originalWidth = thisGallery.data( 'original-width' );
127		var currentWidth = thisGallery.parent().width();
128		var resizeRatio = Math.min( 1, currentWidth / originalWidth );
129
130		thisGallery.find( resizeableElements ).each( function () {
131			var thisGalleryElement = $( this );
132
133			thisGalleryElement
134				.width( Math.floor( resizeRatio * thisGalleryElement.data( 'original-width' ) ) - thisGalleryElement.data( 'extra-width' ) )
135				.height( Math.floor( resizeRatio * thisGalleryElement.data( 'original-height' ) ) - thisGalleryElement.data( 'extra-height' ) );
136		} );
137	} );
138};
139
140/**
141 * Ready, set...
142 */
143$( document ).ready( function() {
144
145	// Instance!
146	var TiledGalleryInstance = new TiledGallery;
147
148});
149
150}

150)(jQuery);