June 2023 Snapshot

js/cwd_gallery.js

@@ -1,4 +1,4 @@
-/* CWD Image Gallery (ama39, last update: 10/14/18)
+/* CWD Image Gallery (ama39, last update: 3/31/23)
    - Supports two interface modes:
    - 1. Thumbnail Grid with Modal ("Grid mode") - a collection of clickable thumbnails which launch full-sized images in a modal popup (requires cwd_popups.js)
    - -- Grid mode doesn't technically require this JavaScript file (all functionality is handled by the "gallery" scripting in cwd_popups.js).
@@ -30,7 +30,7 @@ var slide_ratio = 0.667; // ratio of height to width (height is ~67% of width)
 var gallery_count = 0;
 
 
-jQuery(document).ready(function($) {	
+(function ($) {
 
 	// Thumbnail Grid with Modal
 	$('.cwd-gallery.grid').each(function() {
@@ -62,9 +62,12 @@ jQuery(document).ready(function($) {
 			// Video Content
 			if ($(this).hasClass('video')) {
 				if ($(this).hasClass('active')) {
-					$(slide).find('.video-container').focus(function() {
+					$(slide).find('.video-container').on('focus',function() {
 						$(slide).find('.caption').addClass('fadeout');
-					}).focus();
+					});
+					var focus_helper = setTimeout(function() {
+						$(slide).find('.video-container').focus();
+					}, 50);
 					//videoElement[0].play; // this currently won't work for YouTube and CornellCast, due to cross-domain iframe restrictions
 				}
 				else {
@@ -167,6 +170,11 @@ jQuery(document).ready(function($) {
 
 		}).focus(function() {
 			$(this).trigger('click');
+		}).keydown(function(e) {
+			if (e.keyCode == 13 || e.keyCode == 32) { // enter or space key
+				e.preventDefault();
+				$(this).trigger('click');
+			}
 		});
 
 		// nav buttons (Next and Previous)
@@ -189,6 +197,11 @@ jQuery(document).ready(function($) {
 				}
 				$(thumbnails).find('.col a').eq(next_image).trigger('click');
 			}
+		}).keydown(function(e) {
+			if (e.keyCode == 13 || e.keyCode == 32) { // enter or space key
+				e.preventDefault();
+				$(this).trigger('click');
+			}
 		});
 
 	});
@@ -203,14 +216,14 @@ jQuery(document).ready(function($) {
 
 				var target_href = $(this).attr('href');
 				var filetype = target_href.substr(target_href.lastIndexOf('.')).toLowerCase();
+				var button = $(this);
 				//console.log(filetype);
 
 				// Image Content
 				if (filetype == '.jpg' || filetype == '.jpeg' || filetype == '.gif' || filetype == '.png') {
 					// preload images
 					// TODO: some kind of smarter, asynchronous preloading?
 					var img = new Image();
-					var button = $(this);
 					img.onload = function() {
 						$(button).attr('data-native-width',this.width);
 						$(button).attr('data-native-height',this.height);
@@ -265,5 +278,5 @@ jQuery(document).ready(function($) {
 
 	});
 
-});
+})(jQuery);
 

js/cwd_slider.js

@@ -1,4 +1,4 @@
-/* CWD Image Slider (ama39, last update: 1/29/19)
+/* CWD Image Slider (ama39, last update: 12/1/22)
    - ...
    - >> TODO: more introduction and documentation will be added here soon (in the meantime, please see the "Scripted Components" documentation for more information) <<
    - preloads images and creates "buffer" layers to allow cover placement and ensure smooth transitions
@@ -22,6 +22,7 @@ var default_caption_div = '#site-headline'; // default caption container
 var default_heading2 = ''; // default second heading container (unused by default) *Target a heading tag (not a div) with a inner span. e.g., "#slider-extra-headline" to target <h1 id="slider-extra-headline"><span>Placeholder Heading Text</span></h1>
 var default_slide_time = 8; // time between transitions (in seconds)
 var default_transition_speed = 1; // speed of image cross-fade (in seconds) *Note: This only affects image transitions. Caption transition timing is controlled by CSS [cwd_slider.css]
+var default_quickslide = true; // transition more quickly between slides on initial load, and when manually-requested by user click/focus)
 var default_autoplay = true; // if true, the slider will cycle through images on load (but will stop after user interaction)
 var default_random_start = true; // if true, the slider will start on a random slide (instead of always starting at 1)
 var default_caption_height = '8em'; // must be enough height to accommodate the tallest caption text (only for top-aligned captions) (NYI)
@@ -47,7 +48,7 @@ var nextprev = true; // provide Next and Previous buttons
    - All arguments are described above in "default settings"
    - Arguments are optional (they override the default settings) though 'div' and 'caption' will typically be included 
 -------------------------------------------------------------------------------------------- */
-function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2) {
+function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2,quickslide) {
 
 	// instanced variables
 	slider_count++;
@@ -75,6 +76,7 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2)
 		var bg_color = bg || default_bg_color;
 		if (auto == true || auto == false) { var autoplay = auto; } else { var autoplay = default_autoplay; }
 		if (random == true || random == false) { var random_start = random; } else { var random_start = default_random_start; }
+		if (quickslide == true || quickslide == false) { var quickslide_on = quickslide; } else { var quickslide_on = default_quickslide; }
 
 		// additional variables
 		//$(caption_div).attr('tabindex','-1').addClass('aria-target'); // set focus target for accessibility
@@ -167,7 +169,7 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2)
 			}
 			current_slide = starting_slide;
 		}
-		$(caption_div_inner + '.caption'+starting_slide).addClass('active');
+		$(caption_div_inner + '.caption'+starting_slide).addClass('active').trigger('newSlideActive');
 		changeSlide(starting_slide,false);
 		if (slide_count > 1) {
 			startSlider();
@@ -286,7 +288,7 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2)
 			var c_speed = transition_speed * 1000; // convert transition to milliseconds
 
 			// quick image transition when requested by button click or caption focus
-			if (!include_transition) {
+			if (!include_transition && quickslide_on) {
 				c_speed = 300;
 				$(caption_div).addClass('quick');
 				if ( heading2_h != '' ) {
@@ -325,7 +327,7 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2)
 
 			// transition caption
 			$(caption_div_inner).removeClass('active');
-			$(caption_div_inner + '.caption'+slide).addClass('active');
+			$(caption_div_inner + '.caption'+slide).addClass('active').trigger('newSlideActive');
 
 			// transition image
 			is_transitioning = true;