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
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.aspxIt'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