forum.coppermine-gallery.net
Support => cpg1.4.x Support => Older/other versions => cpg1.4 miscellaneous => Topic started by: ir803 on February 13, 2007, 06:24:07 pm
-
Is it possible to code hard kard keyboard control to the previous and next image previews ? I've seen this on other sites but not a database driven site so 1. I don't know how you would do it, and 2. I don't know if you could do it.
Sorry if this is in the wrong section, I wasn't sure where to ask.
-
You can give them an accesskey, here p and n.
// HTML template for the image navigation bar
$template_img_navbar = <<<EOT
<tr>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="{LOCATION}images/thumbnails.gif" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="100%">
{PIC_POS}
</td>
<!-- BEGIN report_file_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
</td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif" border="0" align="middle" alt="{ECARD_TITLE}" /></a>
</td>
<!-- END ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}" accesskey="p"><img src="{LOCATION}images/prev.gif" border="0" align="middle" alt="{PREV_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}" accesskey="n"><img src="{LOCATION}images/next.gif" border="0" align="middle" alt="{NEXT_TITLE}" /></a>
</td>
</tr>
EOT;
Alternatively find some javascript to monitor the keyboard and trigger the links.
-
hi,
i tried to solve this with javascript.. i put the following code before the "EOT;" of the code that nibbler posted:
<script type="text/javascript">
function fuerjens(event) {
if(event.keyCode == 37) window.location.href="{NEXT_TGT}"
if(event.keyCode == 39) window.location.href="{PREV_TGT}"
if(event.keyCode == 38) window.location.href="{THUMB_TGT}"
}
document.onkeydown = fuerjens;
</script>
..extract out of my theme.php:
// HTML template for the image navigation bar
$template_img_navbar = <<<EOT
<tr>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="{LOCATION}images/thumbnails.gif" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="100%">
{PIC_POS}
</td>
<!-- BEGIN report_file_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
</td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif" border="0" align="middle" alt="{ECARD_TITLE}" /></a>
</td>
<!-- END ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}" accesskey="b"><img src="{LOCATION}images/prev.gif" border="0" align="middle" alt="{PREV_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}" accesskey="n"><img src="{LOCATION}images/next.gif" border="0" align="middle" alt="{NEXT_TITLE}" /></a>
</td>
</tr>
<script type="text/javascript">
function fuerjens(event) {
if(event.keyCode == 37) window.location.href="{NEXT_TGT}"
if(event.keyCode == 39) window.location.href="{PREV_TGT}"
if(event.keyCode == 38) window.location.href="{THUMB_TGT}"
}
document.onkeydown = fuerjens;
</script>
EOT;
but the source code on my gallery looks like:
if(event.keyCode == 37) window.location.href="displayimage.php?album=429&pos=34"
if(event.keyCode == 39) window.location.href="displayimage.php?album=429&pos=32"
if(event.keyCode == 38) window.location.href="thumbnails.php?album=429&page=2"
how can i decode the "&" to "&" .. i tried it with with html_entity_decode (http://de2.php.net/manual/en/function.html-entity-decode.php), but this doesn't work :( i think because the constants are set after this code..
or maybe someone knows a javascript function where the html entities are decoded by the browser? :x
can you help me, please?
thx
andré
-
UPDATE: Please use the improved code from this post (http://forum.coppermine-gallery.net/index.php/topic,41223.msg281523.html#msg281523) or the plugin version (http://forum.coppermine-gallery.net/index.php/topic,57460.0.html).
I got it :)
// HTML template for the image navigation bar
$template_img_navbar = <<<EOT
<tr>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}" id="thumb"><img src="{LOCATION}images/thumbnails.gif" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="100%">
{PIC_POS}
</td>
<!-- BEGIN report_file_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
</td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif" border="0" align="middle" alt="{ECARD_TITLE}" /></a>
</td>
<!-- END ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}" accesskey="b" id="prev"><img src="{LOCATION}images/prev.gif" border="0" align="middle" alt="{PREV_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}" accesskey="n" id="next"><img src="{LOCATION}images/next.gif" border="0" align="middle" alt="{NEXT_TITLE}" /></a>
</td>
</tr>
<script type="text/javascript">
function fuerjens(Ereignis) {
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.which) {
Tastencode = Ereignis.which;
} else if (Ereignis.keyCode) {
Tastencode = Ereignis.keyCode;
}
if(Tastencode == 37) window.location = document.getElementById('prev').href;
if(Tastencode == 39) window.location = document.getElementById('next').href;
if(Tastencode == 38) window.location = document.getElementById('thumb').href;
}
document.onkeydown = fuerjens;
</script>
EOT;
I just inserted some ids in the buttons and changed the javascript to use the hrefs from the buttons.
-
attention.
If you type a comment and want to go back some letters with the Navigation keys, you accidently activate and suddenly the image jumps backward/forward.
So this needs further improvement.
-
I already improved this on my personal website. I'll collect the code and post it soon.
-
Here it is. All you have to do is to copy this code to your theme.php:
$template_img_navbar = <<<EOT
<tr>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}" id="thumb"><img src="{LOCATION}images/thumbnails.gif" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="100%">
{PIC_POS}
</td>
<!-- BEGIN report_file_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
</td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif" border="0" align="middle" alt="{ECARD_TITLE}" /></a>
</td>
<!-- END ecard_button -->
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}" accesskey="b" id="prev"><img src="{LOCATION}images/prev.gif" border="0" align="middle" alt="{PREV_TITLE}" /></a>
</td>
<td align="center" valign="middle" class="navmenu" width="48">
<a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}" accesskey="n" id="next"><img src="{LOCATION}images/next.gif" border="0" align="middle" alt="{NEXT_TITLE}" /></a>
</td>
</tr>
<script type="text/javascript">
var sthhasfocus;
function fuerjens(Ereignis)
{
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.which)
Tastencode = Ereignis.which;
else if (Ereignis.keyCode)
Tastencode = Ereignis.keyCode;
if (sthhasfocus != true)
{
if(Tastencode == 37)
window.location = document.getElementById('prev').href;
if(Tastencode == 39)
window.location = document.getElementById('next').href;
if(Tastencode == 38)
window.location = document.getElementById('thumb').href;
if(Tastencode == 40)
{
blocking('picinfo','yes', 'block');
return false;
}
}
}
document.onkeydown = fuerjens;
</script>
EOT;
$template_add_your_comment = <<<EOT
<form method="post" name="post" action="db_input.php">
<table align="center" width="{WIDTH}" cellspacing="1" cellpadding="0" class="maintable">
<tr>
<td width="100%" class="tableh2_compact"><b>{ADD_YOUR_COMMENT}</b></td>
</tr>
<tr>
<td colspan="1">
<table width="100%" cellpadding="0" cellspacing="0">
<!-- BEGIN user_name_input -->
<tr>
<td class="tableb_compact">
{NAME}
</td>
<td class="tableb_compact">
<input type="text" class="textinput" name="msg_author" onfocus="sthhasfocus = true" onblur="sthhasfocus = false" size="10" maxlength="20" value="{USER_NAME}" />
</td>
<!-- END user_name_input -->
<!-- BEGIN input_box_smilies -->
<td class="tableb_compact">
{COMMENT}
</td>
<td width="100%" class="tableb_compact">
<input type="text" class="textinput" id="message" name="msg_body" onfocus="sthhasfocus = true" onblur="sthhasfocus = false" onselect="storeCaret_post(this);" onclick="storeCaret_post(this);" onkeyup="storeCaret_post(this);" maxlength="{MAX_COM_LENGTH}" style="width: 100%;" />
</td>
<!-- END input_box_smilies -->
<!-- BEGIN input_box_no_smilies -->
<td class="tableb_compact">
{COMMENT}
</td>
<td width="100%" class="tableb_compact">
<input type="text" class="textinput" id="message" name="msg_body" onfocus="sthhasfocus = true" onblur="sthhasfocus = false" maxlength="{MAX_COM_LENGTH}" style="width: 100%;" />
</td>
<!-- END input_box_no_smilies -->
<td class="tableb_compact">
<input type="hidden" name="event" value="comment" />
<input type="hidden" name="pid" value="{PIC_ID}" />
<input type="submit" class="comment_button" name="submit" value="{OK}" />
</td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN smilies -->
<tr>
<td width="100%" class="tableb_compact">
{SMILIES}
</td>
</tr>
<!-- END smilies -->
</table>
</form>
EOT;
$template_image_comments = <<<EOT
<table align="center" width="{WIDTH}" cellspacing="1" cellpadding="0" class="maintable">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="tableh2_compact" nowrap="nowrap">
<b>{MSG_AUTHOR}</b><a name="comment{MSG_ID}"></a>
<!-- BEGIN ipinfo -->
({IP})
<!-- END ipinfo -->
</td>
<td class="tableh2_compact" align="right" width="100%">
<!-- BEGIN report_comment_button -->
<a href="report_file.php?pid={PID}&msg_id={MSG_ID}&what=comment" title="{REPORT_COMMENT_TITLE}"><img src="images/report.gif" width="16" height="16" border="0" align="middle" alt="{REPORT_COMMENT_TITLE}" /></a>
<!-- END report_comment_button -->
<!-- BEGIN buttons -->
<a href="javascript:;" onclick="blocking('cbody{MSG_ID}','', 'block'); blocking('cedit{MSG_ID}','', 'block'); return false;" title="{EDIT_TITLE}"><img src="images/edit.gif" border="0" align="middle" /></a>
<a href="delete.php?msg_id={MSG_ID}&what=comment" onclick="return confirm('{CONFIRM_DELETE}');"><img src="images/delete.gif" border="0" align="middle" /></a>
<!-- END buttons -->
</td>
<td class="tableh2_compact" align="right" nowrap="nowrap">
<span class="comment_date">[{MSG_DATE}]</span>
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="tableb_compact">
<div id="cbody{MSG_ID}" style="display:block">
{MSG_BODY}
</div>
<div id="cedit{MSG_ID}" style="display:none">
<!-- BEGIN edit_box_smilies -->
<table width="100%" cellpadding="0" cellspacing="0">
<form name="f{MSG_ID}" method="POST" action="db_input.php">
<input type="hidden" name="event" value="comment_update" />
<input type="hidden" name="msg_id" value="{MSG_ID}" />
<tr>
<td>
<input type="text" name="msg_author" onfocus="sthhasfocus = true" onblur="sthhasfocus = false" value="{MSG_AUTHOR}" class="textinput" size="25" />
</td><td>
</tr>
<tr>
<td width="80%">
<textarea cols="40" rows="2" class="textinput" name="msg_body" onfocus="sthhasfocus = true" onblur="sthhasfocus = false" onselect="storeCaret_f{MSG_ID}(this);" onclick="storeCaret_f{MSG_ID}(this);" onkeyup="storeCaret_f{MSG_ID}(this);" style="width: 100%;">{MSG_BODY_RAW}</textarea>
</td>
<td class="tableb_compact">
</td>
<td>
<input type="submit" class="comment_button" name="submit" value="{OK}" />
</td>
</form>
</tr>
<tr>
<td colspan="3"><img src="images/spacer.gif" width="1" height="2" /><br /></td>
</tr>
</table>
{SMILIES}
<!-- END edit_box_smilies -->
<!-- BEGIN edit_box_no_smilies -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<form name="f{MSG_ID}" method="POST" action="db_input.php">
<input type="hidden" name="event" value="comment_update" />
<input type="hidden" name="msg_id" value="{MSG_ID}" />
<td>
<input type="text" name="msg_author" value="{MSG_AUTHOR}" class="textinput" size="25" />
</td>
</tr>
<tr>
<td width="100%">
<textarea cols="40" rows="2" class="textinput" name="msg_body" style="width: 100%;">{MSG_BODY_RAW}</textarea>
</td>
<td class="tableb_compact">
</td>
<td>
<input type="submit" class="comment_button" name="submit" value="{OK}" />
</td>
</form>
</tr>
<tr>
<td colspan="3"><img src="images/spacer.gif" width="1" height="2" /><br /></td>
</tr>
</table>
<!-- END edit_box_no_smilies -->
</div>
</td>
</tr>
</table>
EOT;
If necessary, you have to replace the old code with this one.
-
Maybe I'll create a plugin for this in the next time. I think it should be possible, but I'm not sure :P
Some people might find it better to have a plugin for this, because the arrangement of the navigation buttons and other changes in the variables $template_img_navbar, $template_add_your_comment and $template_image_comments will not be affected.
-
Here is the announcement thread for the plugin: http://forum.coppermine-gallery.net/index.php/topic,57460.0.html