Tutorial: K2 Ajax Shelf
This entry was published from Low End Theory. You can comment here or on the original post..
Like this tutorial? Clique It
This is a quicky on how I created my little ajax shelf with K2.The functionality is already there, since K2 uses a lot of script.aculo.us goodies already, all you have to do is add in the functionality.
Adding the JS for the Effect: For my shelf I chose to use the "Phase" effect that combines the BlindUp/Down and Fade/Appear effects.
Navigate to the js/ directory which is a sub-directory of your K2 theme.
Open up the file: effects.js.php and paste the following code at the very bottom of the file:
Download: js_effect.txt
Adding the Shelf to your theme: Now that all of the functionality for it is there, all you need to do is add it to your theme.
Wherever you want your shelf to open and close, you'll need to add a div for it. We don't want it to be open by default, so we'll hide the display:
<div id="theshelf" style="display:none;"> The content for your shelf will go in here </div>
Finally, create the link to open and close your shelf. <a href="#" onclick="Effect.Combo('theshelf', {duration: .5}); return false" title="open ajax shelf">
Now that you're finished, you can style #theshelf { } in your K2 scheme.
