forum.coppermine-gallery.net
Support => cpg1.5 plugins => cpg1.5.x Support => cpg1.5 plugin contributions => Topic started by: Αndré on January 07, 2009, 09:00:40 am
-
Navigate to the previous/next picture, go back to the thumbnail page and switch the file info details via the keyboard arrows.
Since version 2.0 it's possible to navigate to the previous/next thumbnail page.
-
It might be easier to just use jQuery to do all that, wouldn't this code work:
var sthhasfocus;
$('.navmenu_pic[rel!=nofollow]').each(function(id, el){
if(id==0){
$(this).attr('id', 'thumb');
}else if(id==1){
$(this).attr({id: 'prev', accesskey: 'p'});
}else if(id==2){
$(this).attr({id: 'next', accesskey: 'n'});
}
});
$('.textinput').blur(function () {sthhasfocus = false;});
$('.textinput').focus(function () {sthhasfocus = true;});
$(window).keydown(function(e){
if (!e)
e = window.event;
if (e.which)
Tastencode = e.which;
else if (e.keyCode)
Tastencode = e.keyCode;
console.log(sthhasfocus + ' ' + Tastencode);
if (sthhasfocus != true)
{
if(Tastencode == 37 && $('#prev').attr('title') != '')
window.location = $('#prev').attr('href');
if(Tastencode == 39 && $('#next').attr('title') != '')
window.location = $('#next').attr('href');
if(Tastencode == 38)
window.location = $('#thumb').attr('href');
if(Tastencode == 40)
{
blocking('picinfo','yes', 'block');
return false;
}
}
});
-
I haven't worked with jQuery yet, but your code doesn't work as is.
Is this function correct?
function(id, el){
if(id==0){
$(this).attr('id', 'thumb');
}else if(id==1){
$(this).attr({id: 'prev', accesskey: 'p'});
}else if(id==2){
$(this).attr({id: 'next', accesskey: 'n'});
}
}I think it could come to problems, when someone change the order of (or add/remove) buttons in the navbar.
-
I wrote this quickly and it worked for me, but there could be some mistakes :)
I just checked it and saw I left a firebug command in there, which prevents it from working when you don't have firebug
this code works for IE7, FF3 & Chrome:
var sthhasfocus;
$(document).ready(function() {
$('.navmenu_pic[rel!=nofollow]').each(function(id, el){
if(id==0){
$(this).attr('id', 'thumb');
}else if(id==1){
$(this).attr({id: 'prev', accesskey: 'p'});
}else if(id==2){
$(this).attr({id: 'next', accesskey: 'n'});
}
});
$('.textinput').blur(function () {sthhasfocus = false;});
$('.textinput').focus(function () {sthhasfocus = true;});
});
$(document).keydown(function(e){
if (!e)
e = window.event;
if (e.which)
Tastencode = e.which;
else if (e.keyCode)
Tastencode = e.keyCode;
if (sthhasfocus != true)
{
if(Tastencode == 37 && $('#prev').attr('title') != '')
window.location = $('#prev').attr('href');
if(Tastencode == 39 && $('#next').attr('title') != '')
window.location = $('#next').attr('href');
if(Tastencode == 38)
window.location = $('#thumb').attr('href');
if(Tastencode == 40)
{
blocking('picinfo','yes', 'block');
return false;
}
}
});
Concerning the change of order, I don't think the user will change the prev/next buttons :) But then again, who knows...
-
I have firebug, too. But it doesn't work for me (I have to say, that I don't have the actual svn version). Maybe I do something wrong ???
My codebase.php:
<?php
if (!defined('IN_COPPERMINE')) die('Not in Coppermine...');
js_include('plugins/keyboard_navigation_jquery/js/keyboard_navigation.js');The .js file will be included in the html source code.
In keyboard_navigation.js is your code. Something more to do?
-
You shouldn't include the script directly like that, you should do it within a function that's been called by the API, because now, the script is loaded before jQuery and it has to be loaded after it to use its functionality.
-
the script is loaded before jQuery and it has to be loaded after it to use its functionality.
You're right :D It works now in my gallery as plugin.
Can you explain me what the "el" is for?
$('.navmenu_pic[rel!=nofollow]').each(function(id, el){
It still works, if I delete the "el" :P
Concerning the change of order, I don't think the user will change the prev/next buttons :) But then again, who knows...
See here (http://erwischt.org/dessau/photos/displayimage.php?pos=-121163) - 1. prev file, 2. thumbnail page, 3. next file. Isn't there a better way to detect the buttons and give them an id? If not, I think my first plugin version is more flexible for the different themes.
-
Can you explain me what the "el" is for? It still works, if I delete the "el" :P
'el' was used in my first version until I remembered I could use the 'this' keyword
See here (http://erwischt.org/dessau/photos/displayimage.php?pos=-121163) - 1. prev file, 2. thumbnail page, 3. next file. Isn't there a better way to detect the buttons and give them an id? If not, I think my first plugin version is more flexible for the different themes.
Here I have a better one, this should work on all templates:
var sthhasfocus;
$(document).ready(function() {
$('.navmenu_pic img[src*=thumb]').parent().attr('id', 'thumb');
$('.navmenu_pic img[src*=prev]').parent().attr({id: 'prev', accesskey: 'p'});
$('.navmenu_pic img[src*=next]').parent().attr({id: 'next', accesskey: 'n'});
$('.textinput').blur(function () {sthhasfocus = false;});
$('.textinput').focus(function () {sthhasfocus = true;});
});
$(document).keydown(function(e){
if (!e)
e = window.event;
if (e.which)
Tastencode = e.which;
else if (e.keyCode)
Tastencode = e.keyCode;
if (sthhasfocus != true)
{
if(Tastencode == 37 && $('#prev').attr('title') != '')
window.location = $('#prev').attr('href');
if(Tastencode == 39 && $('#next').attr('title') != '')
window.location = $('#next').attr('href');
if(Tastencode == 38)
window.location = $('#thumb').attr('href');
if(Tastencode == 40)
{
blocking('picinfo','yes', 'block');
return false;
}
}
});
-
I attached the jQuery version (v1.1.0) in my first post.
I still use my plugin hook:
$template_img_navbar = CPGPluginAPI::filter('theme_img_navbar', $template_img_navbar);
Can someone commit this hook to the svn? I think it's useful for this plugin (because my plugin refers to the navbar) and maybe it can be used for other plugins (e.g. in my 1.4.x gallery I have added a button in the navbar to add/remove favorite pictures - I could use this hook to create a plugin for this). Thank you :)
-
Hook 'theme_img_navbar' committed to SVN.
-
Thank you Paver. Shall we split the coding discussion from the announcement thread?
-
I think everything before the release of 1.5 (beta or final release) is coding discussion so why not keep it all here for development.
Later, a separate announcement thread can be created for the plugin once 1.5 is released and then you can use that for support from users. This thread can be linked from it for historical purposes.
That's my suggestion.
-
Added plugin to downloads section and to subversion repository (http://coppermine.svn.sourceforge.net/viewvc/coppermine/branches/cpg1.5.x/plugins/keyboard_navigation/).
-
Hi guys!
I`m using this plugin v1.3 and LightBox Slideshow jquery (NotesFor.net) v2.9 plugin at the same time. When in LightBox view, the keyboard plugin overrides the LightBox keydown event and LightBox dissapears.
So I added one more condition before taking action on keydown event of this plugin. I`m checking if lightbox is currently on or not.
Added to codebase.php before line 40:
var lb = $("#jquery-lightbox").length;
if (sthhasfocus != true && lb!=1) { ....
Oh.. and description says "Coppermine 1.5.x Plugin - keyword_navigation" ... should be keyboard_navigation :)
Hope this helps for somebody else.
-
Thanks for reporting. Attached updated plugin to initial post.
-
Why not include javascript file with the $js_includes[]? The benefit is that the js file will be included at the same place than the other js files. The second benefit is that the Jsmin plugin (http://forum.coppermine-gallery.net/index.php/topic,63223.0.html) would be able to use the javascript file from this plugin.
-
I don't know / I can't remember ;) Maybe it's a historical issue. I'll think about that :)
-
Attached version 1.5 to initial post.
-
Thanks for your fast updated release.
-
Quick question: does the "Down" button do anything?
I thought maybe it would show / hide the file information, but I can't see any changes on my gallery.
-
@pols1337: Yes, that's what it's supposed to do. Please post a link to your gallery (http://forum.coppermine-gallery.net/index.php/topic,55415.msg270616.html#msg270616) if you require further help.
switch the file info details via the keyboard arrows.
-
Ah okay, yes it does show / hide the file information. I just wasn't sure about the functionality.
Another question: it only works on displayimage.php correct? For example, it does not navigate between album pages (that show the thumbnails)?
-
it does not navigate between album pages (that show the thumbnails)?
Correct. But that might be a good addition ;)
-
You should do it!
/support :)
-
Version 2.0 attached to initial post.
-
Version 2.1 (attached to initial post) uses a different way to detect if some form element currently has focus (better compatibility with e.g. the annotation plugin).
-
I installed the Keyboard Navigation for cpg1.5.x plugin and have noticed that, while the plugin is installed, using an arrow key while in the slideshow causes cpg to go to <mysite>\undefined, resulting in a 404 error page. I assume this is a bug?
-
Fixed in SVN revision 8628. Version 2.2 attached to initial post.