shibbyonline

Search box, Light Box and other Scripty goodness

I’ve been working away at those extra little bits on the site, you know all that fluff that makes you feel good about the amount of time you spend sitting in front of a computer screen.

The latest installments apart from some style changes are the use of the various script.aculo.us Java scripts. First off we have the new AJAX powered search bar found on the home page, in the archives and on any 404. The second is the use of Lightbox for displaying photograph’s and images from within posts.
I have always enjoyed using the script.aculo.us libraries for various effects but since moving themes around I sort of missed the boat when it came to the whole Lightbox revolution that appears to have taken the web by storm.

My problem was that I did want to find a way to display images in a way that kept a small clean image in the post but would allow the reader to see a larger version without directing them to an external source such as my Flickr account. I’m afraid that at present Lightbox is the perfect answer, of course I could have followed Derek’s comments and tried Thickbox which runs off the more streamlined compressed jquery script. But when I’m already loading part of the script.aculo.us for the search bar it makes no sense to load another library to save space. Besides which due to my limited readership, bandwidth or page load is not a concern, I’m not exactly digg material!

[more...]

One step forward, two back

Last night I had a bit of blast on the site, trying to finish off some of the features I never had time to put in before it went live.

We now have a AJAX powered search feature, currently it is only present on the home page and archive page, not sure if you need it in the side bar on every page or not?
I’ve also sorted, well close too to sorted, the seperation of comments and pingbacks. The styling is not complete but the function is there.
The final feature which is not quite working yet is a ‘mint popular’ list (it’s a clever play on the standard most popular list) on the archives page. However I’m having some problems getting it to call just pages and not files.

So I was pretty chuffed to get all this working, but some where along the line the Falbum plugin decided not to work. I don’t think this is just a plugin issue as the settings and database records are totally trashed. I’m pretty certain everything will work together but I just can’t get the plugin to re-install, every time I upload and activate it remembers the settings from last time, which are not much good.
Back to the drawing board I think.

AJAXy sidebar menu options

On the Binary Bonsai forums it has been asked how I got those Java powered AJAXy looking features in my sidebar, I’ve also had a few emails about them so I thought I better write the code and share the knowledge. Here goes:
It is a java script that creates a visual effect, you can also chuck some ajax inspired calls in there too but I opted for just creating the blind effect. The code and javascripts can be found at script.aculo.us. If you are using K2 then chances are you already have the scripts installed, check your /js folder in the K2 theme directory. These scripts are called for in header.php I have found that in r118 they are no longer called by default, previous r96 versions did call the scripts and it also depends on ajax commenting, to be on the safe side I added the following lines to the header.php around line 39
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js"></script>
Thats the scripts sorted now the page styling. You call the script using a <a href> link with the varables for the java in there. Here’s the code I used to make the Del.ici.ous menu in my sidebar:
<?php if ((function_exists('delicious')) && is_home() && !(is_paged()) ) { $k2deliciousname = get_option('k2deliciousname'); ?>
<div class="sb-delicious"><h2><a href="http://del.icio.us/<?php echo $k2deliciousname; ?>" title="My del.icio.us links library">Del.icio.us</a></h2><span class="metalink"><a href="#" onclick="Effect.BlindDown('deli');; return false;">Open</a></span>
<div id="deli" style="display:none;"><ul>
<span class="metalink"><a href="http://del.icio.us/rss/<?php echo $k2deliciousname; ?>" title="RSS Feed for del.icio.us links">Connect to RSS feed</a></span>
<div><?php delicious($k2deliciousname); ?></div>
</ul><span class="metalink"><a href="#" onclick="Effect.BlindUp('deli');; return false;">Close Del.icio.us</a></span>
</div>
</div>

The first part is the standard section of the K2 sidebar, it checks for the delicious plugin and name and would display your links. But the link to # is the clever part, you see it calls the Effect.BlindDown with a variable of deli (delicious if you want) This variable is a div tag, you can see this tag next, making the style display none means the page will not show as standard, if you wanted the panel open by default remove this tag.
Clicking on the link runs the script which in my case does the blind down effect on the div tag which then shows the delicious links, remember to put an extra closing div at the end or a close link if you want which would call the Effect.BlindUp script.
At present I’ve only used this on the one section but if you spend the time looking through the script.aculo.us site and testing the various other effects I’m sure it will open up a world of ideas and inspiration and as this only runs from a div tag you could add this to nearly any section of a site.
Thanks to Paul and Ka-Meng for helping me sort out the display of code.