diff --git a/js/cwd_slider.js b/js/cwd_slider.js index 50b8791..5f61237 100644 --- a/js/cwd_slider.js +++ b/js/cwd_slider.js @@ -1,4 +1,4 @@ -/* CWD Image Slider (ama39, last update: 6/26/23) +/* CWD Image Slider (ama39, last update: 12/1/23) - ... - >> 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 @@ -77,7 +77,7 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2,q 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 var caption_div_inner = caption_div + ' .caption-inner'; @@ -108,6 +108,10 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2,q $('#'+sid+'-slide-buffer'+i).data('link',image_array[i][3]); // <- link $('#'+sid+'-slide-buffer'+i).data('alt',image_array[i][4]); // <- alt text $('#'+sid+'-slide-buffer'+i).data('heading2',image_array[i][5]); // <- second heading + $('#'+sid+'-slide-buffer'+i).data('cta1',image_array[i][6]); // <- action button 1 label // @CTA + $('#'+sid+'-slide-buffer'+i).data('cta1_link',image_array[i][7]); // <- action button 1 href // @CTA + $('#'+sid+'-slide-buffer'+i).data('cta2',image_array[i][8]); // <- action button 2 label // @CTA + $('#'+sid+'-slide-buffer'+i).data('cta2_link',image_array[i][9]); // <- action button 2 href // @CTA // load image $('#'+sid+'-slide-buffer'+i).css('background-image','url('+image_array[i][0]+')'); @@ -129,6 +133,20 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2,q $(caption_div_inner + '.caption'+i+' .caption-focus').append('

'+$('#'+sid+'-slide-buffer'+i).data('caption')+'

'); } + // add action buttons // @CTA + if ( (($('#'+sid+'-slide-buffer'+i).data('cta1') != undefined && $('#'+sid+'-slide-buffer'+i).data('cta1_link') != undefined) || ($('#'+sid+'-slide-buffer'+i).data('cta2') != undefined && $('#'+sid+'-slide-buffer'+i).data('cta2_link') != undefined)) && $('#'+sid+'-slide-buffer'+i).data('link') == '') { + $(caption_div_inner + '.caption'+i+' .caption-focus').append('
'); + + if ( $('#'+sid+'-slide-buffer'+i).data('cta1') != undefined && $('#'+sid+'-slide-buffer'+i).data('cta1_link') != undefined) { + $(caption_div_inner + '.caption'+i+' .caption-focus .cta-buttons').append('
'+$('#'+sid+'-slide-buffer'+i).data('cta1')+'
'); + } + if ( $('#'+sid+'-slide-buffer'+i).data('cta2') != undefined && $('#'+sid+'-slide-buffer'+i).data('cta2_link') != undefined) { + $(caption_div_inner + '.caption'+i+' .caption-focus .cta-buttons').append('
'+$('#'+sid+'-slide-buffer'+i).data('cta2')+'
'); + } + + $(caption_div_inner + '.caption'+i+' .caption-focus').append('
'); + } + // detect visible captions if (image_array[i][1].length > 0 || image_array[i][2].length > 0) { captionless = false; @@ -265,8 +283,8 @@ function cwd_slider(div,caption,time,speed,auto,random,height,path,bg,heading2,q $(image_div + ' a, ' + image_div + ' .caption-focus').focus(function() { // end autoplay when any UI element receives focus clearInterval(slide_interval); }); - $(caption_div).find('.caption-inner .caption-focus').focus(function() { // activate appropriate slide when any caption receives focus - var target = $(this).parent().index(); + $(caption_div).find('.caption-inner .caption-focus, .caption-inner a').focus(function() { // activate appropriate slide when any caption receives focus // @CTA + var target = $(this).closest('.caption-inner').index(); // @CTA if (target != current_slide) { if (!is_transitioning) { changeSlide(target,false);