Jquery - iterate focus with keyboard arrows on images in different div's


#1

hi all,
i want to be able to focus images that has the same class (in a thumbnail scroller).
this is what i have: html:

<div class="swiper-wrapper" id="swiper-wrapper" >          
  <div class="swiper-slide" tabindex="0"><img src="cards/jpeg1.jpg" alt="" class="thumb"></div>
  <div class="swiper-slide" tabindex="-1"><img src="cards/jpeg2.jpg" alt="" cllass="thumb"></div>
</div>

jquery:

    var parent = document.getElementById("swiper-wrapper");
    var children = document.getElementById("swiper-wrapper").children;
    for (var i = 0; i < children.length; i++) {
        $('.swiper-slide, select').keydown(function (e) {
            if (e.keyCode == 39) {
                $(this).next('.swiper-slide , select').focus();
            }
            else if (e.keyCode == 37) {
                $(this).prev('.swiper-slide , select').focus();
            }
        })
    }

this gives me keyboard control focus only on the div's containing the images.
how do i improve it to move the focus between the actual images?


#2

some one help please.....


#3

before for loop put:

console.log($('.swiper-slide, select'));

Because I didn't see select elemnt in your HTML code so selector can be wrong.

Also I didn't understand what are you trying to do? Slider which can change image by button click? or by mouse click?
Could you please post the link to some example what you want to do?


#5

please check this:
https://jsfiddle.net/kifkaf007/78gnwhhc/

when you press tab key on the keyboard, the first div is in focus, than you can move focus between different div's only with the keyboard arrows left/right.while this works fine focusing on the div's i want to change the focus to be on the actual images, not on the $('.swiper-slide') elements.


#6

why not make this shorter with jQuery?

var parent = document.getElementById("swiper-wrapper");
var children = document.getElementById("swiper-wrapper").children;


var parent = $("#swiper-wrapper");
var children = parent.children;

#7

okay but this doesn't answer my question


#8

You don't unless there are absolutely no links (or form controls) on the page. tabindex does not ignore these, it just makes them further down in the index.

Aside: I'm a little out of touch but don't recall there being negative indices. They are a queue. 0, 1, 2, ... I'm also not sure that tabindex can be used anywhere else than an anchor element (a link). The element does not need an href attribute, just the tabindex and for semantics, a name (optional).

Consider:

<div class="swiper-wrapper thumb">          
  <a tabindex="0"><img src="cards/jpeg1.jpg" alt=""></a>
  <a tabindex="1"><img src="cards/jpeg2.jpg" alt=""></a>
</div>

Now create a selector rule for,

.thumb img {

}

and another for,

.swiper-wrapper a {

}

You do not appear to use the parent element in any jQuery selectors, only the children. so target them directly. Since they will be a jQuery collection (node list) we may as well add the $ prefix for semantics.

$children = $('.thumb').children();

#9

i can't change the <div> elements to <a> since I am using a jquery slider plugin. the <div>'s are a must.
even if i could do that, how do i switch the focus between the actual images (the children of $children)?
they are not siblings so .next(), .prev() will not work here


#10

That's where you lose us tinkerers. We'd have to study your plugin and the full extent of your HTML and your own custom script to get to the bottom. That is a little more than can be expected here, where most members are beginners. The help you need is in the Q&A of your plug-in.


#11

the plugin is not the issue here.
lets say i take the code you suggested:

<div class="swiper-wrapper thumb">          
  <a tabindex="0"><img src="cards/jpeg1.jpg" alt=""></a>
  <a tabindex="-1"><img src="cards/jpeg2.jpg" alt=""></a>
</div>

now take my jquery code:

var parent = $("#swiper-wrapper");
var children = parent.children;
    for (var i = 0; i < children.length; i++) {
        $('.swiper-slide, select').keydown(function (e) {
            if (e.keyCode == 39) {
                $(this).next('.swiper-slide , select').focus();
            }
            else if (e.keyCode == 37) {
                $(this).prev('.swiper-slide , select').focus();
            }
        })
    }

when i type the arrow keys in the keyboard this gives me focus movment only on the <a>tags , while i want the focus movement on the actual <img>'s.
and since the actual <img> are not siblings, how to I make it work?
about the tabindex="-1", yes it is possible.
I hope the question was clear this time


#12

Which you have not, eh? Belay my responses. I'm not on station with this problem and out of my depth.