Description
I have created a simple Image Slider provided by Ivan Lazarevic and was
wondering how to add Next/Previous navigation to it, by using the arrow
keys left and right on the keyboard. I've made some tests but can't seem
to get it to work properly. I would also like the image to change to
the next one when clicking on it. Would appreciate any help on the way.
Jquery:
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt')); });
HTML:
<div id="gallery">
<div id="panel">
<img id="largeImage" src="image_01_large.jpg" />
</div>
<div id="thumbs">
<img src="image_01_thumb.jpg" />
<img src="image_02_thumb.jpg" />
</div>
Explanation & Answer
Next/previous Navigation (i am doing it after ages so maybe it will help you old way of coding)
// when the document is ready, run this function
jQuery(function( $ ) {
var keymap = {};
// LEFT
keymap[ 37 ] = "li.prev a";
// RIGHT
keymap[ 39 ] = "li.next a";
$( document ).on( "keyup", function(event) {
var href,
selector = keymap[ event.which ];
// if the key pressed was in our map, check for the href
if ( selector ) {
href = $( selector ).attr( "href" );
if ( href ) {
// navigate where the link points
window.location = href;
}
}
});
});
Change image to next when clicked
Your link tag should have # as the href and the js in an onclick event like this:
href="#" onclick="$('.pg_next a').trigger('click');"
and
href="#" onclick="$('.pg_previous a').trigger('click');"
Review
Review
24/7 Homework Help
Stuck on a homework question? Our verified tutors can answer all questions, from basic math to advanced rocket science!
Similar Content
Related Tags
Daisy Miller
by Henry James
The Grapes of Wrath
by John Steinbeck
Bridge to Terabithia
by Katherine Paterson
A Separate Peace
by John Knowles
Narrative of the Life of Frederick Douglass
by Frederick Douglass
Salt To The Sea
by Ruta Sepetys
Dandelion Wine
by Ray Bradbury
100 Side Hustles
by Chris Guillebeau
Little Women
by Louisa May Alcott