4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: x23piracy on November 28, 2010, 11:15:47 AM
-
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!
<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...
<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:
<a href="{next_image_url}">{next_image_name}</a>
and
<a href="{prev_image_url}">{prev_image_name}</a>
add to each matching identifiers like:
<a href="{next_image_url}" id="next_image_url">{next_image_name}</a>
and
{prev_image_url}" id="prev_image_url">{prev_image_name}</a>
That's it i believe... it works for me :mrgreen:
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
-
http://www.4homepages.de/forum/index.php?topic=7294.msg124362#msg124362
-
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
-
Sorry, dachte dies wäre der gleiche Mod
-
:roll:
-
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 :mrgreen:
(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
-
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. :roll:
If you're using jquery i suggest to test this:
<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>
-
If you're using jquery i suggest to test this:
Hi,
thanks for your suggestions lucifix :thumbup:
Your change is doing it's job but you switched the keys ;)
(Do you remember the Band kris kross... ?)
(http://www.xup.in/tn/2010_11/19487737.jpeg) (http://www.xup.in/dl,19487737/temp2.jpg/)
hehe
Greetz X23
-
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:
<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>
-
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 (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
-
Sorry, dachte dies wäre der gleiche Mod
Also das Ding ist da um die Bilder auf Tastendruck zu wechseln :mrgreen:
(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 :wink:
Aber trotzdem, wer es braucht...
weiter machen :thumbup:
-
ausprobiert ? nicht wirklich, und auch nicht und böse sein, ich halte so etwas für eine unnötige Sache :wink:
Aber trotzdem, wer es braucht...
Hi,
da bin ich doch keinem böse :)
Für mich ist sowas eben usability...
Gruß Jens
-
na ja, könnte es ja für die User einbauen, möglich das die es gebrauchen können ;)
-
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
-
weiter klicken klappt, zurück nicht
habe den alten Code genommen
-
weiter klicken klappt, zurück nicht
habe den alten Code genommen
Hi,
du meinst mit alten Code den Ursprungscode aus meinem ersten Beitrag und nicht den zweiten
Vorschlag von lucifix?
Ich habe beide scripte in den 5 gängigen Browsern auf 2 Systemen getestet, bist du dir da
ganz sicher?
Achja und der muss noch rein:
weiter klicken klappt...
Wie klickst du deine Tastatur? :D
Gruß Jens
-
Wie klickst du deine Tastatur? :D
Gruß Jens
*räusper*, mit dem Hammer auf die rechte Seite klopfen ;)
Pfeiltasten :wink:
<tr valign="top">
<td class="row2"> {if prev_image_name}{lang_prev_image}<br />
<b>{prev_image_url}" id="prev_image_url">{prev_image_name}</a></b>
<!-- <br /><br /><a href="{prev_image_url}"><img src="{prev_thumb_file}" border="1"></a> -->
{endif prev_image_name} </td>
<td align="right" class="row2"> {if next_image_name}{lang_next_image}<br />
<b><a href="{next_image_url}" id="next_image_url">{next_image_name}</a></b>
<!-- <br /><br /><a href="{next_image_url}"><img src="{next_thumb_file}" border="1"></a> -->
{endif next_image_name}</td>
</tr>
-
Hallo,
habe den Code eingebaut, aber es funktioniert auch nur "die alte" Version. Dachte, es liegt nur an der Zeile
if (e.target.tagName.match(/input|textarea/i)) return;aber dem ist nicht so. Getestet vorerst nur mit Mozilla - wenn der schon nicht klappt, brauche ich nicht weiter probieren.
Im Einbau-Tread ist noch ein kleiner Fehlerm so müßte die Zeile korrekt aussehen :wink::
<a href="{prev_image_url}" id="prev_image_url">{prev_image_name}</a>
Viele Grüße,
Henry