Hello,
Many people ask me about the "tweaks" i've installed on my commercial page. I can't reply to everyone, so i decided to publish some of the codes i used.
Today, we start with the details.php.
WhatThis tweak mod allows you to show options/image info/rating and comments
only if the user wants to see them. The script uses
cookies to remember the users preferences.
VersionsTested on 1.7.1/1.7.2/1.7.3/1.7.4 , works on FF 1.0+, IE 5.0+ and Opera
Demohttp://unfb.info/4images/details.php?image_id=3look under the image
Step 1open /templates/default/
header.htmllook for:
<meta http-equiv="content-type" content="text/html; charset={charset}" />
<link rel="stylesheet" href="{template_url}/style.css" />
insert
below<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:100%;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
/***********************************************
* Copyright by Martial B of http://getElementById.com/
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
save and closeStep 2open /templates/default/
details.htmldepending on your previous modifications, you have to be careful. But if you use the standard code do the following:
search for:
{lightbox_button} {postcard_button} {download_button} {download_zip_button}
</div>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
<td class="head1" valign="top" colspan="2">{image_name}</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_description}</b></td>
<td valign="top" class="row1">{image_description}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_keywords}</b></td>
<td valign="top" class="row2">{image_keywords}</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_date}</b></td>
<td valign="top" class="row1">{image_date}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_hits}</b></td>
<td valign="top" class="row2">{image_hits}</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_downloads}</b></td>
<td valign="top" class="row1">{image_downloads}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_rating}</b></td>
<td valign="top" class="row2">{image_rating} ({image_votes}
{lang_votes})</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_file_size}</b></td>
<td valign="top" class="row1">{image_file_size}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_added_by}</b></td>
<td valign="top" class="row2">{user_name_link}</td>
</tr>
</table>
</td>
</tr>
</table>
{if iptc_info}
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
<td class="head1" valign="top" colspan="2">IPTC Info</td>
</tr>
{iptc_info}
</table>
</td>
</tr>
</table>
{endif iptc_info}
{if exif_info}
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
<td class="head1" valign="top" colspan="2">EXIF Info</td>
</tr>
{exif_info}
</table>
</td>
</tr>
</table>
{endif exif_info}
{if rate_form}
<br />
<div align="center">{rate_form}</div>
{endif rate_form}
{if allow_comments}
<a name="comments"></a>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="head1" valign="top">
<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td valign="top" class="head1">{lang_author}</td>
<td valign="top" class="head1">{lang_comment}</td>
</tr>
{comments}
</table>
</td>
</tr>
</table>
<br />
{comment_form} {endif allow_comments}
and
replace it with:
</div>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')"><small>+/-</small> Options</div>
<span class="submenu" id="sub1">
{lightbox_button} {postcard_button} {download_button} {download_zip_button}
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')"><small>+/-</small> Image details</div>
<span class="submenu" id="sub2">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
<td class="head1" valign="top" colspan="2">{image_name}</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_description}</b></td>
<td valign="top" class="row1">{image_description}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_keywords}</b></td>
<td valign="top" class="row2">{image_keywords}</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_date}</b></td>
<td valign="top" class="row1">{image_date}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_hits}</b></td>
<td valign="top" class="row2">{image_hits}</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_downloads}</b></td>
<td valign="top" class="row1">{image_downloads}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_rating}</b></td>
<td valign="top" class="row2">{image_rating} ({image_votes}
{lang_votes})</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_file_size}</b></td>
<td valign="top" class="row1">{image_file_size}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_added_by}</b></td>
<td valign="top" class="row2">{user_name_link}</td>
</tr>
</table>
</td>
</tr>
</table>
{if iptc_info}
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
<td class="head1" valign="top" colspan="2">IPTC Info</td>
</tr>
{iptc_info}
</table>
</td>
</tr>
</table>
{endif iptc_info}
{if exif_info}
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td class="bordercolor">
<table width="100%" border="0" cellpadding="3" cellspacing="0">
<tr>
<td class="head1" valign="top" colspan="2">EXIF Info</td>
</tr>
{exif_info}
</table>
</td>
</tr>
</table>
{endif exif_info}
</span>
<div class="menutitle" onclick="SwitchMenu('sub3')"><small>+/-</small> Rating</div>
<span class="submenu" id="sub3">
{if rate_form}
<br />
<div align="center">{rate_form}</div>
{endif rate_form}
</span>
<div class="menutitle" onclick="SwitchMenu('sub4')"><small>+/-</small> Comments</div>
<span class="submenu" id="sub4">
{if allow_comments}
<a name="comments"></a>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="head1" valign="top">
<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td valign="top" class="head1">{lang_author}</td>
<td valign="top" class="head1">{lang_comment}</td>
</tr>
{comments}
</table>
</td>
</tr>
</table>
<br />
{comment_form} {endif allow_comments} <br />
</span>
</div>
save and closeStep 3 (optional)If you want to change the style of the links look in the new code in your header.html end edit the css.
I think you understand the algorithm of that code, so custom modifications shouldn't be a problem. For further questions please post in this thread.
Don't remove the copyright