Slider

Keyboard Navigation

by arcm111

HTML

<div class="grid-container">

    <div class="grid-item" tabindex="-1">
        <div class="grid-item-preview">
            <img class="grid-item-preview-image" src="http://placehold.it/360x240" />
        </div>
        <div class="grid-item-content">
            <div class="grid-item-content-left">
                <img class="grid-item-original-image" src="http://placehold.it/640x480?text=Item1" />
            </div>
            <div class="grid-item-content-right">
                <h3 class="grid-item-title">
          This is a test item
        </h3>
                <p class="grid-item-text">
                    Built by the King of Morocco, the Royal Mansour Marrakech welcomes guests in exquisite fashion. Re-creating a traditional medina within the Old City walls, the resort comprises 53 elegant riads (Moroccan-style homes) with interior gardens.
                </p>
            </div>
        </div>
    </div>
	
    <div class="grid-item" tabindex="-1">
        <div class="grid-item-preview">
            <img class="grid-item-preview-image" src="http://placehold.it/360x240" />
        </div>
        <div class="grid-item-content">
            <div class="grid-item-content-left">
                <img class="grid-item-original-image" src="http://placehold.it/640x480?text=Item2" />
            </div>
            <div class="grid-item-content-right">
                <h3 class="grid-item-title">
          This is a test item
        </h3>
                <p class="grid-item-text">
                    Built by the King of Morocco, the Royal Mansour Marrakech welcomes guests in exquisite fashion. Re-creating a traditional medina within the Old City walls, the resort comprises 53 elegant riads (Moroccan-style homes) with interior gardens.
                </p>
            </div>
        </div>
    </div>
	
    <div class="grid-item" tabindex="-1">
        <div class="grid-item-preview">
            <img class="grid-item-preview-image"...

CSS

.grid-container {
    height: 100%;
    width: 100%;
}

.grid-item {
    display: block;
    float: left;
    height: 160px;
    width: 25%;
}

.grid-item-preview {
    border: 1px solid #000;
    cursor: pointer;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
}

.grid-item-preview-image {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.grid-item-content {
    background: #000;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

.grid-item-content-left,
.grid-item-content-right {
    display: block;
    float: left;
    height: 100%;
    margin: 0;
    position: relative;
    width: 45%;
}

.grid-item-content-right {
    padding: 10px;
}

.grid-item-original-image {
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
}

.grid-item-title {
    color: #FFE200;
    text-transform: uppercase;
}

.grid-item-text {
    color: #FFF;
}

JavaScript

$(document).ready(function()
{
    $('.grid-item')
        .on('click', function()
		{
            $(this).toggleClass('open-grid-item');
            $(this).find('.grid-item-content').fadeToggle();
        })
        .on('keyup', function(event) // keypress works only in FF
		{
			console.log ($(this).index());
            if ($(this).hasClass('open-grid-item'))
			{
                switch (event.keyCode) {
                    case 37:
                        $(this)
                            .removeClass('open-grid-item')
                            .find('.grid-item-content')
                            .fadeOut()
                            .parent()
                            .prev('.grid-item').focus()
                            .addClass('open-grid-item')
                            .find('.grid-item-content')
                            .fadeIn();
                        break;
                    case 39:
                        $(this)
                            .removeClass('open-grid-item')
                            .find('.grid-item-content')
                            .fadeOut()
                            .parent()
                            .next('.grid-item').focus()
                            .addClass('open-grid-item')
                            .find('.grid-item-content')
                            .fadeIn();
                        break;
                }
            }
        });
});