Results 1 to 8 of 8

Thread: adding keyboard control to image slideshow

  1. #1
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default adding keyboard control to image slideshow

    Good morning all,
    I am trying to add the ability to give the user the option to use their keyboard arrows keys (left & right) to cycle through an image slideshow. Below is my HTML and CSS code. Any help would be greatly appreciated. Many thanks, Alan

    HTML Code:
    <!-- slideshow -->
    <div id="slideshow_container">  
    	  <div id="loader" class="loader_galleries"></div>
    		<div class="wrapper">
    			<div id="ps_container" class="ps_container">
    				<div class="ps_image_wrapper">
    				<!-- First initial image -->
                    <img src="jungle/large/jungle1.jpg"/><div class="ps_caption_title"><p class="captiontitle"></div></div>
    
    				<!-- Navigation items -->
    				<div class="ps_next"></div>
    				<div class="ps_prev"></div>
    				<!-- Dot list with thumbnail preview -->
    				<ul class="ps_nav">
                    
    				<li><a href="jungle/large/jungle1.jpg" rel="jungle/thumbs/jungle1.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
    				
                    <li><a href="jungle/large/jungle2.jpg" rel="jungle/thumbs/jungle2.jpg">
                    <div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
                    </a></li>
                    
    				<li><a href="jungle/large/jungle3.jpg" rel="jungle/thumbs/jungle3.jpg">
                    <div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
                    </a></li>
    				
                    <li><a href="jungle/large/jungle4.jpg" rel="jungle/thumbs/jungle4.jpg">
                    <div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle5.jpg" rel="jungle/thumbs/jungle5.jpg">
                    <div class="ps_caption_title"><p class="captiontitle">Canadian Wildlife Magazine - Print Feature 2012</div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle6.jpg" rel="jungle/thumbs/jungle6.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle7.jpg" rel="jungle/thumbs/jungle7.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle8.jpg" rel="jungle/thumbs/jungle8.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle9.jpg" rel="jungle/thumbs/jungle9.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle10.jpg" rel="jungle/thumbs/jungle10.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle11.jpg" rel="jungle/thumbs/jungle11.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
                    
                    <li><a href="jungle/large/jungle12.jpg" rel="jungle/thumbs/jungle12.jpg">
                    <div class="ps_caption_title"><p class="captiontitle"></div>
                    </a></li>
    
                    <li class="ps_preview">
    				<div class="ps_preview_wrapper">
    				<!-- Thumbnail comes here -->
    				</div>
    				<!-- Little triangle -->
    				<span></span>
                    </li>
    				</ul>
    			</div>
    </div>
    </div>
    <!-- slideshow -->
    Code:
    #slideshow_container {
    	height: 600px;
    	width: 982px;
    	margin-bottom: 80px;
    }
    *{
    	margin:0;
    	padding:0;
    }
    .loader {
    	width: 900px;
    	height: 600px;
    	opacity: 0.7;
    	z-index: 1000;
    	background-color: #333;
    	background-image: url(images/loader.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    .loader_galleries {
    	width: 900px;
    	height: 600px;
    	opacity: 0.7;
    	z-index: 1000;
    	background-color: #333;
    	background-image: url(images/loader.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    
    /* Preview Slider Gallery Style */
    .ps_container{
    	display:none;
    	width:900px;
    	height:600px;
    	position:relative;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    .ps_image_wrapper{
    	width: 900px;
    	height: 664px;
    	overflow: hidden;
    	position: relative;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    .ps_image_wrapper img{
    	position:absolute;
    	left:0px;
    	top:0px;
    	overflow: hidden;
    }
    .ps_prev,
    .ps_next{
    	width: 45px;
    	height: 600px;
    	position: absolute;
    	top: 0;
    	cursor: pointer;
    	opacity: 0.5;
    }
    .ps_prev{
    	left: -45px;
    	background-color: transparent;
    	background-image: url(images/prev.png);
    	background-repeat: no-repeat;
    	background-position: center center;
    	width: 45px;
    }
    .ps_next{
    	right: -45px;
    	background-color: transparent;
    	background-image: url(images/next.png);
    	background-repeat: no-repeat;
    	background-position: center center;
    	width: 45px;
    }
    .ps_prev:hover,
    .ps_next:hover{
    	opacity: 0.9;
    	bottom: 0px;
    	width: 45px;
    }
    ul.ps_nav{
    	list-style: none;
    	padding: 0;
    	position: relative;
    	margin-top: 20px;
    	margin-right: auto;
    	margin-bottom: 40px;
    	margin-left: auto;
    	width: 204px;
    }
    ul.ps_nav li{
    	float:left;
    }
    ul.ps_nav li a{
    	display:block;
    	text-indent:-9000px;
    	width:11px;
    	height:11px;
    	outline:none;
    	padding:0px 3px;
    	background-color: transparent;
    	background-image: url(images/dot.png);
    	background-repeat: no-repeat;
    	background-position: center top;
    }
    ul.ps_nav li a:hover,ul.ps_nav li.selected a{
    	background-position:50% -11px;
    }
    ul.ps_nav li.ps_preview{
    	display:none;
    	width:85px;
    	height:91px;
    	top:-85px;
    	left:-34.5px; /*First item, next ones is leftDot - 0.5*wThis + 0.5*wDot, i.e. second one is (16 - 42.5 + 8) = -18.5 */
    	position:absolute;
    }
    ul.ps_nav li.ps_preview span{
    	width:15px;
    	height:6px;
    	position:absolute;
    	top:65px;
    	left:35px;
    	background-color: transparent;
    	background-image: url(images/triangle.png);
    	background-repeat: no-repeat;
    	background-position: center top;
    }
    .ps_preview_wrapper{
    	width:75px;
    	height:50px;
    	border:5px solid #fff;
    	overflow:hidden;
    	position:relative;
    }
    .ps_preview_wrapper img{
    	position:absolute;
    	top:0px;
    	left:0px;
    }
    .ps_caption_title {
    	position: absolute;
    	bottom: 4px;
    	left: 0;
    	text-align: left;
    	width: 100%;
    	padding-left: 20px;
    	letter-spacing: 1px;
    	overflow: hidden;
    	height: 60px;
    	padding-right: 20px;
    }

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Without javascript, probably not. That markup looks like it might be using jQuery, is it? If so it would be easy to add the arrow keys to that. Even if it's not, if I could see the page I could figure out how to add them. But that's not always the best idea because the arrow keys are for moving the page left and right if it's too narrow for the window, you would lose that functionality for the page.

    If you're using jQuery for the slideshow and the prev/next buttons are activated on click:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$(document).keydown(function(e){
    		switch(e.keyCode){
    			case 37: {//left arrow
    				$('.ps_prev').trigger('click');
    				break;
    			}
    			case 39: {//right arrow
    				$('.ps_next').trigger('click');
    				break;
    			}
    		}
    		if(Math.abs(e.keyCode - 38) === 1){
    			e.preventDefault();
    		}
    	});
    });
    </script>
    should do the trick.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bornegraphics (08-20-2013)

  4. #3
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    John,

    Thanks for your reply. The slideshow is generated using the Javascript below. Would I still be able to use the code you provided or is there a better method? Your help would be greatly appreciated.

    Here's a link to view the slideshow in action: http://neileverosborne.com/portfolios/blackturtle.html

    Many thanks,
    Alan



    Code:
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
            <script type="text/javascript">
    			/*
    			the images preload plugin
    			*/
    			(function($) {
    				$.fn.preload = function(options) {
    					var opts 	= $.extend({}, $.fn.preload.defaults, options),
    						o		= $.meta ? $.extend({}, opts, this.data()) : opts;
    					return this.each(function() {
    						var $e	= $(this),
    							t	= $e.attr('rel'),
    							i	= $e.attr('href'),
    							l	= 0;
    						$('<img/>').load(function(i){
    							++l;
    							if(l==2) o.onComplete();
    						}).attr('src',i);	
    						$('<img/>').load(function(i){
    							++l;
    							if(l==2) o.onComplete();
    						}).attr('src',t);	
    					});
    				};
    				$.fn.preload.defaults = {
    					onComplete	: function(){return false;}
    				};
    			})(jQuery);
    		</script>
            <script type="text/javascript">
    			$(function() {
    				var caption_bg_opacity = 0.4;
    				$('.ps_caption_title_bg').css({opacity:caption_bg_opacity});
    				//some elements..
    				var $ps_container		= $('#ps_container'),
    					$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
    					$ps_next			= $ps_container.find('.ps_next'),
    					$ps_prev			= $ps_container.find('.ps_prev'),
    					$ps_nav				= $ps_container.find('.ps_nav'),
    					$tooltip			= $ps_container.find('.ps_preview'),
    					$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
    					$links				= $ps_nav.children('li').not($tooltip),
    					total_images		= $links.length,
    					currentHovered		= -1,
    					current				= 0,
    					$loader				= $('#loader');
    				
    				/*check if you are using a browser*/	
    				var ie 				= false;
    				if ($.browser.msie && $.browser.version < 9) {
    					ie = true;//you are not!Anyway let's give it a try
    				}
    				if(!ie)
    					$tooltip.css({
    						opacity	: 0
    					}).show();
    					
    					
    				/*first preload images (thumbs and large images)*/
    				var loaded	= 0;
    				$links.each(function(i){
    					var $link 	= $(this);
    					$link.find('a').preload({
    						onComplete	: function(){
    							++loaded;
    							if(loaded == total_images){
    								//all images preloaded,
    								//show ps_container and initialize events
    								$loader.hide();
    								$ps_container.show();
    								//when mouse enters the pages (the dots),
    								//show the tooltip,
    								//when mouse leaves hide the tooltip,
    								//clicking on one will display the respective image	
    								$links.bind('mouseenter',showTooltip)
    									  .bind('mouseleave',hideTooltip)
    									  .bind('click',showImage);
    								//navigate through the images
    								$ps_next.bind('click',nextImage);
    								$ps_prev.bind('click',prevImage);
    							}
    						}
    					});
    				});
    				
    				function showTooltip(){
    					var $link			= $(this),
    						idx				= $link.index(),
    						linkOuterWidth	= $link.outerWidth(),
    						//this holds the left value for the next position
    						//of the tooltip
    						left			= parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
    						//the thumb image source
    						$thumb			= $link.find('a').attr('rel'),
    						imageLeft;
    					
    					//if we are not hovering the current one
    					if(currentHovered != idx){
    						//check if we will animate left->right or right->left
    						if(currentHovered != -1){
    							if(currentHovered < idx){
    								imageLeft	= 75;
    							}
    							else{
    								imageLeft	= -75;
    							}
    						}
    						currentHovered = idx;
    						
    						//the next thumb image to be shown in the tooltip
    						var $newImage = $('<img/>').css('left','0px')
    												   .attr('src',$thumb);
    						
    						//if theres more than 1 image 
    						//(if we would move the mouse too fast it would probably happen)
    						//then remove the oldest one (:last)
    						if($ps_preview_wrapper.children().length > 1)
    							$ps_preview_wrapper.children(':last').remove();
    						
    						//prepend the new image
    						$ps_preview_wrapper.prepend($newImage);
    						
    						var $tooltip_imgs		= $ps_preview_wrapper.children(),
    							tooltip_imgs_count	= $tooltip_imgs.length;
    							
    						//if theres 2 images on the tooltip
    						//animate the current one out, and the new one in
    						if(tooltip_imgs_count > 1){
    							$tooltip_imgs.eq(tooltip_imgs_count-1)
    										 .stop()
    										 .animate({
    											left:-imageLeft+'px'
    										  },150,function(){
    												//remove the old one
    												$(this).remove();
    										  });
    							$tooltip_imgs.eq(0)
    										 .css('left',imageLeft + 'px')
    										 .stop()
    										 .animate({
    											left:'0px'
    										  },150);
    						}
    					}
    					//if we are not using a "browser", we just show the tooltip,
    					//otherwise we fade it
    					//
    					if(ie)
    						$tooltip.css('left',left + 'px').show();
    					else
    					$tooltip.stop()
    							.animate({
    								left		: left + 'px',
    								opacity		: 1
    							},150);
    				}
    				
    				function hideTooltip(){
    					//hide / fade out the tooltip
    					if(ie)
    						$tooltip.hide();
    					else
    					$tooltip.stop()
    						    .animate({
    								opacity		: 0
    							},150);
    				}
    				
    				function showImage(e){
    					var $link			= $(this),
    						idx			= $link.index(),
    						$image			= $link.find('a').attr('href'),
    						$caption		= $link.find('a').html() || '',
    						$currentImage 		= $ps_image_wrapper.find('img'),
    						currentImageWidth	= $currentImage.width();
    					
    					//if we click the current one return
    					if(current == idx) return false;
    					
    					//add class selected to the current page / dot
    					$links.eq(current).removeClass('selected');
    					$link.addClass('selected');
    					
    					//the new image element
    					var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
    											   .attr('src',$image);
    					
    					//if the wrapper has more than one image, remove oldest
    					if($ps_image_wrapper.children().length > 1)
    						$ps_image_wrapper.children(':last').remove();
    					
    					//prepend the new image
    					$ps_image_wrapper.prepend($('<div></div>').append($('<div class="ps_caption_title_bg"></div>').css({opacity:caption_bg_opacity})).append($newImage).append('<div class="ps_caption_title">'+$caption+'</div>'));
    					
    					//the new image width. 
    					//This will be the new width of the ps_image_wrapper
    					var newImageWidth	= $newImage.width();
    					$newImage.next('div').css({left: currentImageWidth, width: newImageWidth});
    				
    					//check animation direction
    					if(current > idx){
    						$newImage.add($newImage.next('div')).css('left',-newImageWidth + 'px');
    						currentImageWidth = -newImageWidth;
    					}	
    					current = idx;
    					//animate the new width of the ps_image_wrapper 
    					//(same like new image width)
    					$ps_image_wrapper.stop().animate({
    					    width	: newImageWidth + 'px'
    					},350);
    					//animate the new image in
    					$newImage.add($newImage.next('div')).stop().animate({
    					    left	: '0px'
    					},350);
    					//animate the old image out
    					$currentImage.add($currentImage.next('div')).stop().animate({
    					    left	: -currentImageWidth + 'px'
    					},350);
    				
    					e.preventDefault();
    				}				
    var gotoLoop = 0;
    var backLoop = 1;
    				
    function nextImage(){
    $links.eq(current+1).trigger('click');
    backLoop = 0;
    if (gotoLoop == 1) {
    $links.eq(0).trigger('click');
    gotoLoop = 0;
    }
    if (current == total_images-1){
    gotoLoop = 1;
    }
    
    }
    
    function prevImage(){
    if(current > 0){
    $links.eq(current-1).trigger('click');
    }
    if (backLoop == 1) {
    $links.eq(total_images-1).trigger('click');
    backLoop = 0;
    }
    
    if (current == 0) {
    backLoop = 1;
    }
    
    }
    				
    			});
    
    			
            </script>

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Not unless it gives you trouble.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bornegraphics (08-21-2013)

  7. #5
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi John, the script you provided works perfectly. Thank you for all your help.

    - Alan

  8. #6
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    One last question regarding the slideshow, do you know of a tutorial or code that would help the user be able to touch scroll through the images while on an iPhone/iPad?
    Any thoughts, suggestions or info you could provide would be very helpful and appreciated.

    Many thanks,
    Alan

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I'm still looking for a good script for that. There are two jQuery plugins that I'm aware of for mobile devices:

    http://jquerymobile.com/

    and:

    http://labs.rampinteractive.co.uk/touchSwipe/demos/

    They both seem pretty thick to me, and I'm supposed to be an expert. I have no mobile device to test on though, I bet I would get it much more quickly if I did.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bornegraphics (08-22-2013)

  11. #8
    Join Date
    Jul 2011
    Location
    Ontario, Canada
    Posts
    22
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Thanks for the links. I'll read over them and if I figure anything out I'll be sure to pass on my findings to you. Thanks again for all your help.

    - Alan

Similar Threads

  1. Ultimate Fade-in slideshow - image size control
    By drewzor in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 06-29-2010, 09:16 AM
  2. Resolved Simple control gallery - adding more than 4 photos
    By mini one in forum JavaScript
    Replies: 12
    Last Post: 05-31-2009, 02:09 AM
  3. Looking for a sliding image slideshow/scroller with user control!
    By ckwebber in forum Looking for such a script or service
    Replies: 3
    Last Post: 09-23-2008, 10:50 PM
  4. JOHN!!! I need your help again!!! Adding speed control to scroller.
    By gknight in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-28-2007, 03:33 AM
  5. Adding Alt Tags to an Image Slideshow
    By carteray in forum JavaScript
    Replies: 4
    Last Post: 09-18-2006, 04:11 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •