Facebook Chat bar style bar for 4images
A MOD by GaYan
This mod will create a staic footer like in facebook ( chat bar ) for 4images with tooltip support , you have more cooler features in this mod than in the facebook chat bar :mrgreen: im kidding
Demo of version 1 = http://www.nuwaragedara.com/Gallery/ (http://www.nuwaragedara.com/Gallery/)
installation will take only about 2 mins
Version 2 - With Cool Effects
Demo of version 2 - http://ryan.rawswift.com/ (http://ryan.rawswift.com/) , this site belongs to the original author of this script, dont forget to thank him :wink:
Setp 1
1) 1st, download this package and unzip js folder in the downloaded package to the js folder in your root path, if you havent got one, create new 1, then it should look like this
js/
js/jquery-1.3.2.min.js
js/src/jixedbar-0.0.2.js
js/themes/vista/jx.stylesheet.css
2) then unzip the icons and put the stuff into the icons folder in your template root :wink:
Setp 2
1) Open up the header.html and find
</script>
paste the code below
<!-- jixedbar starts here -->
<link type="text/css" href="js/themes/vista/jx.stylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/src/jixedbar-0.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#demo-bar").jixedbar({
hoverOpaque: true,
roundedCorners: true
});
});
</script>
<!-- jixedbar end here -->
note - jixedbar is a great creation , get the updates from http://code.google.com/p/jixedbar/ (http://code.google.com/p/jixedbar/)
2) open up the header.html and find
<body>
and paste below
<div id="demo-bar">
<ul>
<li alt="Bicolano Express"><a href="http://ryan.rawswift.com/"><img src="{template_url}/icons/home.png" alt="Home" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li alt="About"><a href="#"><img src="{template_url}/icons/information.png" /></a></li>
<li alt="New Images"><a href="{url_new_images}"><img src="{template_url}/icons/blogs.png" /></a></li>
<li alt="Top Images"><a href="{url_top_images}"><img src="{template_url}/icons/block.png" /></a></li>
{ifnot lang_loggedin_msg}
<li alt="Register"><a href="{url_register}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/megaphone.png" /></a></li> {endifnot lang_loggedin_msg}
</ul>
<span class="jx-separator-left"></span>
<ul class="jx-bar-button-left">
<li alt="Facebook"><a href="#"><img src="{template_url}/icons/balloon-facebook-left.png" /></a></li>
<li alt="Twitter"><a href="#"><img src="{template_url}/icons/balloon-twitter-left.png" /></a></li>
<li alt="Flickr"><a href="#"><img src="{template_url}/icons/pictures.png" /></a></li>
<li alt="Linkedin"><a href="#"><img src="{template_url}/icons/card-address.png" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<div><a href="http://code.google.com/p/jixedbar/">jixedbar</a> - a <a href="http://jquery.com/">jQuery</a> plugin.- Mod by GaYan</div>
<span class="jx-separator-right"></span>
<ul class="jx-bar-button-right">
<li alt="Feed"><a href="{rss_url}"><img src="icons/feed.png" /></a></li></li>
<li alt="Comment Feed"><a href="#"><img src="icons/balloon-quotation.png" /></a></li>
</ul>
<span class="jx-separator-right"></span>
</div>
Note - You can customize the the links and tooltip text including the icons , :) for some icons i have kept the link null ;)
Okay// Thats it for today.. Have Fun .... if you want to install the non flashy thing.. i mean a simple 1 as in the demo, you can try the version 1 which is just below :mrgreen:
Version 1 - Old version
Setp 1
1) Goto your template root and open up header.html or header.htm and paste this code
<!-- chat bar starts here -->
<link type="text/css" href="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/themes/default/jx.stylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/src/jixedbar-0.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#demo-bar").jixedbar();
});
</script>
<!-- Chat bar end here -->
Note - Always respect the authors of this script :wink:
Setp 2
2) Goto your template root and open up footer.html
and find
</body>
and paste above
<div id="demo-bar">
<ul>
<li alt="Gallery Home"><a href="http://nuwaragedara.com/Gallery/"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/home.png" alt="Home" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li alt="Latest Images"><a href="{url_new_images}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/blogs.png" /></a></li>
<li alt="Top Images"><a href="{url_top_images}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/block.png" /></a></li>
{ifnot lang_loggedin_msg}
<li alt="Register"><a href="{url_register}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/megaphone.png" /></a></li>{endifnot lang_loggedin_msg}
</ul>
<span class="jx-separator-left"></span>
<ul class="jx-bar-button-left">
<li alt="Join our Facebook"><a href="http://www.facebook.com/group.php?gid=154572024219&ref=ts"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/balloon-facebook-left.png" /></a></li>
<li alt="Follow me on Twitter"><a href="https://twitter.com/G2gayan"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/balloon-twitter-left.png" /></a></li>
</ul>
<span class="jx-separator-left"></span>
<div>Design by - <a href="http://www.g2designlabs.com/">G2 Design Labs</a></div>
<ul class="jx-bar-button-right">
<li alt="Feed"><a href="{rss_url}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/feed.png" /></a></li></li>
<li alt="Search Images"><a href="{url_search}"><img src="http://ryan.rawswift.com/sandbox/jixedbar-0.0.2/demo/icons/balloon-quotation.png" /></a></li>
</ul>
<span class="jx-separator-right"></span>
</div>
Thats All ,, You are ready to go now :)
next version will be released with cool shading effects and more advanced stuff