• [MOD] Facebook chat bar style bar for 4images 5 0 5 1
Currently:  

Author Topic: [MOD] Facebook chat bar style bar for 4images  (Read 18492 times)

0 Members and 1 Guest are viewing this topic.

Offline GaYan

  • Sr. Member
  • ****
  • Posts: 301
  • ♫ | G2 | ♫
    • View Profile
    • Ziramagic
[MOD] Facebook chat bar style bar for 4images
« on: April 29, 2010, 07:31:25 PM »
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


installation will take only about 2 mins

Version 2 - With Cool Effects

Demo of version 2 - 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

Code: [Select]
</script>

paste the code below

Code: [Select]
<!-- 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/

2) open up the header.html and find

Code: [Select]
<body>

and paste below

Code: [Select]
<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

Code: [Select]
<!-- 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

 
Code: [Select]
</body>
and paste above

Code: [Select]
<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
« Last Edit: April 30, 2010, 01:38:39 PM by GaYan »
I'm Back :)

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.805
  • I ♥ 4I
    • View Profile
Re: [MOD] Facebook chat bar style bar for 4images
« Reply #1 on: April 29, 2010, 08:01:23 PM »
Very Nice!
THX

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Re: [MOD] Facebook chat bar style bar for 4images
« Reply #2 on: April 30, 2010, 12:22:27 AM »
Thanks for sharing :)

On your site it looks fine in FF, but doesn't in IE browser. On the ryan.rawswift.com site looks fine in both IE and FF.


P.S.
It is always a good practice give credit to the authors of the software you are using, even when it's open source with MIT license ;)

[EDIT]
Just realized, the code in step 2 could also be placed in header.html just below <body> tag or in footer.html above </body>, no need to mess around with multiple templates this way.
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline batu544

  • Sr. Member
  • ****
  • Posts: 336
    • View Profile
    • Free Celebrity wallpapers
Re: [MOD] Facebook chat bar style bar for 4images
« Reply #3 on: April 30, 2010, 05:42:57 AM »
Well.. There is another tool bar with more features available and it can be integrated more easily in the 4image gallery also.

Step 1. visit  http://www.wibiya.com/ and create your own tool bar. There are lot of options available like facebook connect, become a fan, twitter, online user statistics.. etc

Step2 : At the last step of your registration, they will provide a code. Just include that code in the footer.html template and its done.. ..


Demo:  There are lot of websites which are using this.. at tihis moment you can try to visit this and notice the tool bar at the bottom==>  http://www.skins.be/

Offline GaYan

  • Sr. Member
  • ****
  • Posts: 301
  • ♫ | G2 | ♫
    • View Profile
    • Ziramagic
Re: [MOD] Facebook chat bar style bar for 4images
« Reply #4 on: April 30, 2010, 01:08:58 PM »
code updated ;) Thanks sir V@no ... all bugs fixed  :)
« Last Edit: April 30, 2010, 01:40:07 PM by GaYan »
I'm Back :)

Offline webvision

  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: [MOD] Facebook chat bar style bar for 4images
« Reply #5 on: May 16, 2010, 06:43:07 AM »
Hello

I try to integrate this script:  http://www.fleaim.com/  this bar to make a facebook but can not be hollowing out to make ...

Does anyone has already managed to make such an integration?

Good day

Offline GaYan

  • Sr. Member
  • ****
  • Posts: 301
  • ♫ | G2 | ♫
    • View Profile
    • Ziramagic
Re: [MOD] Facebook chat bar style bar for 4images
« Reply #6 on: May 17, 2010, 03:44:24 AM »
This is not related to mod itself , but i tested it cuz of you,, it works fine !
I'm Back :)