How do I add keyboard bindings to carousel functionality? - jQuery


Tags: javascript,jquery,css,keyboard

Problem :

You can see the implementation here.

I would like to be able use the left and right arrows on my keyboard to cycle through the images. How do I do that, using jQuery or CSS?

The HTML looks like this:

<div id="slider-code">
        <a class="buttons prev" href="#"></a>
        <div class="viewport">
            <ul class="overview">           
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-bw.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>            
                <li><img src="images/red-stripe-dark.jpg" /></li>
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>
                <li><img src="images/red-stripe-dark.jpg" /></li>           
            </ul>       
        </div>
        <a class="buttons next" href="#"></a>
    </div>

The CSS:

#slider-code { 
    height: 125px; 
    overflow:hidden;
    margin: auto;    /* top, right, bottom, left */ 
}

#slider-code .viewport { 
/*  margin-left: auto;    -- With this enabled, the arrows don't work.
    margin-right: auto;  */
    margin: 0 auto;    /* top, right, bottom, left */   
    width: 540px; 
    height: 125px; 
    overflow: hidden; 
    position: relative;
    float: left;

}

#slider-code .viewport .overview img {
    border: 3px solid #f6f6f7;
    margin: 0 auto;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px; 
    float: left;
    position: absolute;
}

#slider-code .buttons { 
    display: block; 
    margin: 0 auto; /* top, right, bottom, left  */
    float: left;
    vertical-align: middle;
}

#slider-code .prev {
    width: 32px;
    height: 32px;
    background: transparent url('../images/left-arrow.png') no-repeat 0 0;
    vertical-align: middle;
    margin: 0 0 0 5px; /* top, right, bottom, left */   
    position: relative;
/*  top: 190.5px;   */
}

#slider-code .next { 
    width: 32px;
    height: 32px;
    background: transparent url('../images/right-arrow.png') no-repeat 0 0;
    margin: 0 0 0 5px;  /* 30px 0 0 10px; */
    vertical-align: middle;
    position: relative;
}

#slider-code .disable { 
     /* for IE */
    filter:alpha(opacity=40);
    /* for everything else */  
    opacity:0.4;
}

#slider-code .overview { 
    list-style: none; 
    position: absolute; 
    padding: 0; 
    margin: 0 auto; 
    left: 0; 
    top: 0; 
}


#slider-code .overview li { 
    float: left; 
    margin: 0 4px auto; /* top, right, bottom, left  */
    padding: 1px; 
    height: 121px; 
    border: 0px solid #dcdcdc;
    width: 236px;
}

.view_name {
    font-family: "Helvetica", serif;
    color: #f9f4c0;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    word-spacing: 0px;
    letter-spacing: 0px;
    background: #1a1a1a;    
    padding: 1px 3px 1px 3px; /* top, right, bottom, left */        
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

ul.overview li { 
     position: relative; 
}

The requisite JS is:

var oImg, sliderCode, sliderViewPort, win_width;
    var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width;
    var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width;

    function setUp(numImages) {
        oImg_height = oImg.height(); //size of original image height 
        oImg_width = oImg.width(); //size of original image width 
        oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image 
        tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2 
        tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio. 
        sliderCode_w = $('#slider-code').width();
        sliderCode_h = $('#slider-code').height();
        var ul_width = $('#slider-code .viewport ul').width();

        //  console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height); 

        sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height });   //resizes the images

        rImg_width = sliderCode.width(); // size of resized image width  
        rImg_height = sliderCode.height(); // size of resized image width 

        $('#slider-code .next').css({ 'top': rImg_height / 2 }); //This needs to be resolved for various size windows 
        $('#slider-code .prev').css({ 'top': rImg_height / 2 });
        $('#slider-code').css({ 'width': '100%', 'height': rImg_height + 10 }); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height 
        $('#slider-code .viewport').css({ 'width': win_width * 0.94, 'height': rImg_height + 10 });
        $('#slider-code .overview li').css({ 'width': rImg_width + 10 }); 
        $('#edit-image-nav img').css({ 'width' : '42px', 'height' : '30px', 'display' : 'block' });  //This was done because without it, something else is resizing the images to a large size. I was not able to trace it, but in a re-factor, I should trace what is resizing it and remove that, then remove this.
        //$('#slider-code .overview li img:not("#edit-image-nav")').css({ 'width': rImg_width + 10 }); 
        view_new_w = sliderViewPort.width();
        view_new_h = sliderViewPort.height();
        li_w = $('#slider-code .overview li').width();
        rUl_width = $('#slider-code .viewport ul').width();

        //  console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width); 

        $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 });

    }

$(window).load(function() {

 //Cache Some Common Elements
        oImg = $('#slider-code .viewport .overview img:eq(1)');
        sliderViewPort = $('#slider-code .viewport');

        // --------------------------- Begin Comparison Code --------------------------------------------------------        
        win_width = $(window).width();
        num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2. 

        $("#viewbar img").click(function(e) {
            num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.           
            $('#viewname').text(num_of_images + '-up');

            setUp(num_of_images);

            e.preventDefault();
        });

        //Default set up
        setUp(num_of_images);

        // --------------- End Comparison Code -------------------------------------------------------------------------- 

})

Let me know if you need anything else.



Solution :


$(document).keydown( function(eventObject) {
     if(eventObject.which==37) {//left arrow
        $('#slider-code .prev').click();//emulates click on prev button 
     } else if(eventObject.which==39) {//right arrow
        $('#slider-code .next').click();//emulates click on next button
     }
} );

You may replace $(document) with $('.viewport'), but then <div class="viewport"> must be in focus then keypress occures


    CSS Howto..

    How can I programmatically (in JavaScript) add “sub-divs” to divs?

    how to animate width and height 100% using css3 animations?

    What is the best CSS trick to reduce how much HTML you need?

    How to Fix text in Html with CSS

    HTML5 CSS (How to on hover image ignore transparent)

    How can we wrap the line based on border size of windows browser?

    How to structure selectors in css when using specificity?

    How can I inline the label with the input horizontally and the inputs vertically

    Border positioning: how to?

    How to align images and text in css?

    How to manage custom CSS?

    Hide and show divs with multiple common classes

    how to animate a div towards different direction and fade out using jquery

    How to customize style of numeric “li” in css [closed]

    style sheet -moz-linear-gradient no show in web mobile browser?

    CSS Position relative goes over fixed how to fix this?

    How to hide crossed-out CSS lines on firebug?

    How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

    How to create a two column layout

    PhoneGap: How to get iPad specific CSS to work?

    jQuery UI sortable: how to leave css values of changed items untouched?

    How do I center my search form within a div?

    How to dynamically scale images per height using pure CSS?

    How to mail HTML/CSS output as attachment?

    how to define variable in less

    How to create a simple article design with CSS and HTML5

    How to Inherit grandparent CSS not parent?

    CSS: How do I get my “send” button to line up (move up) and size up (scale) properly?

    How to change this script into

    How can I make width flexible with CSS when using bootstrap's responsive design?