[MOD] Left Gallery Quick List V1.03I was asked by another person if this could be done or not so I gave it a try and it worked!
It is based on JQuery's Treeview script that can be found at
http://docs.jquery.com/Plugins/TreeviewDemo: http://www.budduke.com/galleryBackup the following files before you begin...includes/page_header.php
includes/functions.php
lang/english/main.php
your template folder/home.html
your template folder/categories.html
your template folder/header.html
Revisions:1.0 first try at it
1.01 fixed page number problem with modifield jquery.treeview.js file
1.02 fixed session issue problems and location highlighting when page#rs involved.
- replace the jquery.treeview.js file with the new one in the zip file attached
- replace the insert in the header.html and the functions.php files to fix these issues
1.03 fixed the hide list till page load problem with the updated code.
Let's begin with the mod...
New files added in attached zip file (The Treeview script from jquery)
In your template folder
create a folder and call it
"quickscript" and copy all files from the zip folder to that directory
along with a sub folder called images...
the finished path should look likt
templates/your template directory/quickscript/imagesin the
includes/page_header.php file
look for
?>insert
before//-----------------------------------------------------
//--- MOD Left Quicklist -------------------------------
//-----------------------------------------------------
$left_quicklist = get_left_quicklist($cat_id);
$site_template->register_vars(array(
"left_quicklist" => $left_quicklist,
"lang_left_quicklist" => $lang['left_quicklist']
));
unset($left_quicklist);
// END MOD Left quicklist
in the
includes/functions.php file
(updated for version 1.03)look for
?>insert
before//MOD Left QuickList
function get_left_quicklist_bits($cat_id, $cid = 0, $depth = 1) {
global $site_db, $drop_down_cat_cache, $cat_cache, $site_sess;
//config area
$left_quick_length=24; //length of category name, 0-3 =off (if on, will shorten name to fit with ... after it)
$adjust_depth=1; // try to adjust for depth for right side to line up
$with_folder=0; // if you want a folder to be displayed then set this to 1 (I thought it took to much screenspace)
//end config
if (!isset($drop_down_cat_cache[$cid])) {
return "";
}
$category_list = "";
foreach ($drop_down_cat_cache[$cid] as $key => $category_id) {
if (check_permission("auth_viewcat", $category_id)) {
$quick_cat_name=format_text($cat_cache[$category_id]['cat_name'],2);
$left_quick_length_var= $left_quick_length;
$test=strlen($quick_cat_name);
if ($adjust_depth && ($depth >1)){
$left_quick_length_var = $left_quick_length -(($depth-1)*3) -(($depth-1)*$with_folder);
}
if (($left_quick_length_var > 3) && (strlen($quick_cat_name)> $left_quick_length_var) ){
$quick_cat_name= substr($quick_cat_name, 0, ($left_quick_length_var - 3))."...";
}
if ($with_folder){
$category_list .= "<li><span class='folder'><a href='".$site_sess->url('categories.php?'.URL_CAT_ID.'='.$category_id)."'>".$quick_cat_name."</a></span>";
}
else {
$category_list .= "<li><a href='".$site_sess->url('categories.php?'.URL_CAT_ID.'='.$category_id)."'>".$quick_cat_name."</a>";
}
$result= get_left_quicklist_bits($cat_id, $category_id, $depth + 1);
if ($result){
$category_list .= "<ul>".$result."</ul></li>";
}
else {
$category_list .= "</li>";
}
}
}
unset($drop_down_cat_cache[$cid]);
return $category_list;
}
function get_left_quicklist($cat_id) {
global $drop_down_cat_cache, $cat_parent_cache;
$category = "<ul id='left_quicklist_nav' class='filetree' style='display: none'>";
$drop_down_cat_cache = array();
$drop_down_cat_cache = $cat_parent_cache;
$result= get_left_quicklist_bits($cat_id);
if ($result){
$category .= $result."</ul>";
}
return $category;
}
//END MOD Left QuickList
in the
lang/english/main.php file
look for
?>insert
before//-----------------------------------------------------
//--- Left Quick List -------------------------------------
//-----------------------------------------------------
$lang['left_quicklist'] = "Gallery Quick List";
in
your template folder/header.html file
(updated for version 1.03)look for
</head>insert
before<!-- MOD Left Quicklist -->
<link rel="stylesheet" href= "{template_url}/quickscript/jquery.treeview.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src= "{template_url}/quickscript/jquery.treeview.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var urlSessName = "<?=SESSION_NAME;?>";
var urlPageName = "<?=URL_PAGE;?>";
$(document).ready(function(){
// first example
$("#left_quicklist_nav").treeview({
collapsed: true,
unique: true,
persist: "location"
});
});
onload=function() {
document.getElementById('left_quicklist_nav').style.display ='block';
}
</script>
<!-- END MOD Left Quicklist -->
in
both your
template folder/home.html and
your template folder/categories.html files
Place this code where you would like to display the list on the left side
My example look for
{endif random_image}insert
after in
both files...
<!--MOD left Quicklist-->
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="head2" height="20"> <img src="{template_url}/images/spacer.gif" alt="" width="4" height="4" />{lang_left_quicklist}</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td>
{left_quicklist}
</td>
</tr>
<tr>
<td class="tablebgcolor"><img src="{template_url}/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
</table>
<!-- END MOD Left Quicklist-->
In the
includes/functions.php file you will see at the start of my functions some config settings that you can play with
If your sub categories go real real real deep you may want to place this somewhere else on your template to give it more room.
Inside the quickscript folder there is a jquery.treeview.css file that you can modify to fit into your template better.
The
.treeview, .treeview ul and the
.treeview ul both at the top of the css file were the best place I found to modify to get the background color to match your template.
There is also
.treeview a.selected area that is the background color used for the category you are currently viewing
That is the end of modification, you should now have a quicklist on your site...
