I’m actually developping a small gallery plugin for wordpress.
It is using jQuery with a few more plugins :
– jScrollPane
– Hoverintent
I’m using jScrollPane to replace the ugly scroll bar provided by the browser, and to have arrows to scroll the images.
All the images are arranged on a single row.
The thing is that I want the gallery to be scrollable with the arrows key on the keyboard.
So the javascript code looks like this :
$(document).ready (function () {
$('.darkenjquery').bind('touchstart', function() {
$(this).find('img').fadeTo(200, 0.3);
$(this).find('span').css('z-index',3);
}).bind('touchend', function() {
$('body').find('img').fadeTo(200, 1);
$('body').find('span').css('z-index',1);
}).hoverIntent(function() {
$(this).find('img').fadeTo(200, 0.3);
$(this).find('span').css('z-index',3);
}, function() {
$(this).find('img').fadeTo(200, 1);
$(this).find('span').css('z-index',1);
});
$('#oupsmangallery').on('blur',function () {
$('#oupsmangallery').trigger("focus");
});
$('#oupsmangallery').jScrollPane({showArrows: true, hideFocus: true});
$('#oupsmangallery').trigger("focus");
});
The html code generated by the plugin is similar to this one :
<p class='explain'>Vous pouvez faire défiler la galerie avec les flèches gauche et droite du clavier. En positionnant le curseur de votre souris sur une image, la légende apparaitra</p>
<div id='oupsmangallery'>
<table id='gallery'><tbody><tr>
<td class="galleryelement"><div class="darkenjquery">
<img class="galleryimage" src="http://192.168.10.14/wp-content/uploads/2014/03/site_000_christiane_taubira_unnamed-750x500.jpg" alt=""><span class="legend">2013 - intervention de Madame Christiane Taubira, garde des seaux, dans le cadre du projet littéraire Images de femmes des jeunes écrivains des ateliers d'écriture "La Cite Des Mots" </span></div></td>
</tr></tbody></table>
</div>
There is (of course) a lot more cells in the table.
The first trigger of focus to the div whom id is “oupsmangallery” works perfectly well. But when this div lose the focus, the blur event is triggered, but the div don’t get focus back.
What am I missing here ?
Thanks a lot for your answers.
Instead of calling focus () in blur directly call it using a settimeout () 1 to 10 ms timeout should be enough.