[MOD] Previous◄ and Next ► Image in Details by Keypress

[x23piracy]

Hi,

this is a simple mod that lets you toggle between the next and previous images on details page.
(Nothing visible just a bit of javascript)

Browser compatibility: tested... (FF, IE, Safari, Opera, Chrome)


First of all is the base script, add this into your details.html template file:
(maybe on top after the {header})

[New Code (thanks to Lucifix) now the keypress doesn't have any effect if you are in input fields]
jquery is required!

Code: [Select]

<script type="text/javascript">

$(document).ready(function(){

function checkKey(e){
if (e.target.tagName.match(/input|textarea/i)) return;

switch (e.keyCode) {
case 37:
var MyId = document.getElementById('next_image_url');
if ( MyId != null) {
document.location.href = document.getElementById('next_image_url').href;
}
break;
case 39:
var MyId = document.getElementById('prev_image_url');
if ( MyId != null) {
document.location.href = document.getElementById('prev_image_url').href;
}
break;
default:
}      
}

if ($.browser.mozilla) {
$(document).keypress (checkKey);
} else {
$(document).keydown (checkKey);
}

});

</script>

[This is the old code, that also changes the picture even if you are in an input field, like writing an comment or something]
only use this if you are not using the script above, you have to decide what to use...

Code: [Select]

<script type="text/javascript">

function onk(ev) {
  if (!ev) ev = window.event;
  if (ev.which) { tcode = ev.which; }
  else if (ev.keyCode) { tcode = ev.keyCode; }

  if(tcode == 37 ) {
 var MyId = document.getElementById('prev_image_url');
  if ( MyId != null) {
  document.location.href = document.getElementById('prev_image_url').href;
  }
  }

  if(tcode == 39 ) {
 var MyId = document.getElementById('next_image_url');
  if ( MyId != null) {
  document.location.href = document.getElementById('next_image_url').href;
  }
  }
}

document.onkeydown = onk;

</script>
To get image url caching work you need to set an identifier (id):

search for:

Code: [Select]

<a href="{next_image_url}">{next_image_name}</a>
and

Code: [Select]

<a href="{prev_image_url}">{prev_image_name}</a>
add to each matching identifiers like:

Code: [Select]

<a href="{next_image_url}" id="next_image_url">{next_image_name}</a>
and

Code: [Select]

{prev_image_url}" id="prev_image_url">{prev_image_name}</a>

That's it i believe... it works for me  

From now you can use left and right arrow for changing the picture.

If you want other key for trigger previous and next image check this site for example:
http://www.aspdotnetfaq.com/Faq/What-is-the-list-of-KeyCodes-for-JavaScript-KeyDown-KeyPress-and-KeyUp-events.aspx

It's also possible to trigger other stuff by keypresses like entering lightbox, starting a slideshow, deleting a photo etc...
Any idea's suggestions or any unrelated bulls*it let me hear it.


Greetz X23

[Jan-Lukas]

http://www.4homepages.de/forum/index.php?topic=7294.msg124362#msg124362

[x23piracy]

http://www.4homepages.de/forum/index.php?topic=7294.msg124362#msg124362

Hi,

was soll mir das sagen?
Gehts darum wie da die id untergebracht werden muss?

Mach maln Satz draus.


Gruß Jens

[Jan-Lukas]

Sorry, dachte dies wäre der gleiche Mod

[Sunny C.]

 

[x23piracy]

Sorry, dachte dies wäre der gleiche Mod

Hi,

ich hab ja auch erst sowas vermutet und mir bestimmt 15 Minuten Zeit genommen
dahinter zu kommen wo die Ähnlichkeit ist bis immer klarer wurde öhm.... da stimmt doch was nicht

Also das Ding ist da um die Bilder auf Tastendruck zu wechseln  
(Ich dachte ihr seid des englischen mächtig)

@Benny was grummelst du denn so rum?

Hat das mal einer von euch ausprobiert?

Die Intention dieses "MOD's" ist es 4Images einen Picture-Viewer touch zu geben, das Template (div basierend) an dem ich baue ist stark web 2.0 lastig.
Das lässt sich ja noch stark ausbauen, am coolsten wäre es ja im ACP Tastenbelegungen vergeben zu können für aktionen.

Ein Bilderzoom auf Tastendruck (+/-) wäre zum Beispiel gut denkbar, das starten der Slideshow (Highslide) oder das benutzen der "F-Tasten" für Funktionen
(Kommetar abgeben, Kommentare ein und ausblenden) usw. usw...


Gruß Jens

[Lucifix]

This mod works almost perfect, the only problem is when using is typing comment in textarea and want to use cursor to navigate through letter to make some correction. This will cause to move to another page.  


If you're using jquery i suggest to test this:

Code: [Select]

<script type="text/javascript">

$(document).ready(function(){

function checkKey(e){
if (e.target.tagName.match(/input|textarea/i)) return;

switch (e.keyCode) {
case 37:
var MyId = document.getElementById('prev_image_url');
if ( MyId != null) {
document.location.href = document.getElementById('prev_image_url').href;
}
break;
case 39:
var MyId = document.getElementById('next_image_url');
if ( MyId != null) {
document.location.href = document.getElementById('next_image_url').href;
}
break;
default:
}      
}

if ($.browser.mozilla) {
$(document).keypress (checkKey);
} else {
$(document).keydown (checkKey);
}

});

</script>

[x23piracy]

If you're using jquery i suggest to test this:

Hi,

thanks for your suggestions lucifix  
Your change is doing it's job but you switched the keys
(Do you remember the Band kris kross... ?)


hehe


Greetz X23

[Lucifix]

Hehe you're right Anyway I've fix the problem.

Here is updated mod which won't let you press nex/prev keyboard button if there is some text in textform:

Code: [Select]

<script type="text/javascript">

$(document).ready(function(){

function checkKey(e){
if (e.target.tagName.match(/input|textarea/i)) return;

{if user_loggedin}
var comment_text = $("#comment_text").val(); // id of comment textarea - change if needed!
if (comment_text != '') return;
{endif user_loggedin}

switch (e.keyCode) {
case 37:
var MyId = document.getElementById('prev_image_url');
if ( MyId != null) {
document.location.href = document.getElementById('prev_image_url').href;
}
break;
case 39:
var MyId = document.getElementById('next_image_url');
if ( MyId != null) {
document.location.href = document.getElementById('next_image_url').href;
}
break;
default:
}     
}

if ($.browser.mozilla) {
$(document).keypress (checkKey);
} else {
$(document).keydown (checkKey);
}

});

</script>

[x23piracy]

Here is updated mod which won't let you press nex/prev keyboard button if there is some text in textform:

Hi,

what is the difference to your first code?
Is it that it also reacts to the keypress if im in an input field but haven't entered text yet?

Code update: My old code is now optional, added lucifix's first suggestion.
http://www.4homepages.de/forum/index.php?topic=28386.msg153360#msg153360


EDIT:

Your code update isn't working for me, the picture never changes now, maybe the script checks for any
given input fields on the page?

That crashes with my layout if have a sliding login panel that presents image codes [URL]http...[...] and so
on... that are always filled input fields... so the pic never changes.

How to give the input field check more borders?


EDIT2:

After more testing with your first code i mentioned that it don't need the input text check for my site,
because i present the make comment form in non visible div thats visible if the user clicks the comment
button, in that case i tried to press the arrow key with and without text in some of the input fields and
it didn't changed the pic while the comment div is visible great for me...

But maybe you can fix that? The most user will use standard templates.


Greetz X23

[Jan-Lukas]

Sorry, dachte dies wäre der gleiche Mod

Also das Ding ist da um die Bilder auf Tastendruck zu wechseln  
(Ich dachte ihr seid des englischen mächtig)

Hat das mal einer von euch ausprobiert?

Gruß Jens

Ach bitte, mein englisch ist fast 40 Jahre her, und auf der Arbeit und auf meiner Seite brauch ich das auch nicht.
Es reicht gerade um mir was zu essen und trinken zu bestellen *gg*

ausprobiert ? nicht wirklich, und auch nicht und böse sein, ich halte so etwas für eine unnötige Sache 
Aber trotzdem, wer es braucht...

weiter machen 

[x23piracy]

ausprobiert ? nicht wirklich, und auch nicht und böse sein, ich halte so etwas für eine unnötige Sache 
Aber trotzdem, wer es braucht...

Hi,

da bin ich doch keinem böse
Für mich ist sowas eben usability...


Gruß Jens

[Jan-Lukas]

na ja, könnte es ja für die User einbauen, möglich das die es gebrauchen können

[x23piracy]

na ja, könnte es ja für die User einbauen, möglich das die es gebrauchen können

Hi,

mach es doch wie Microsoft und nenne es "Eingabehilfe"
Schau und hätte damals Bill nicht Steve's Idee geklaut hätte ein Windows PC wahrscheinlich garkeine Maus.

Und nicht auszudenken was bei Microsoft passiert wäre unter dem Motto besser gut geklaut als schlecht kopiert.


MfG Jens

[Jan-Lukas]

weiter klicken klappt, zurück nicht
habe den alten Code genommen