jquery slide out navigation plugin

what is jquery slideout navigation plugin?

slide out plugin is very simple to use in your site, gives you a very beautiful and professional look for your pages, simply it's a horizontal navigation when the visitor put the mouse over the navigation it will slideout, when the user move  mouse out of navigation it will hide again.

i don't love big explanation so let's see small demo of our slide out jquery plugin
See Demo 
Download Source

OK i think you are finished downloading the source files, now i will show you how to use it in your site.

the method to use it in your site is very simple.

1- put this code after the body tag directly:

 <div class="header"></div>
        <ul id="navigation">
            <li class="home"><a href=""><span>Home</span></a></li>
            <li class="about"><a href=""><span>About</span></a></li>
            <li class="search"><a href=""><span>Search</span></a></li>
            <li class="photos"><a href=""><span>Photos</span></a></li>
            <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
            <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
            <li class="contact"><a href=""><span>Contact</span></a></li>
        </ul>

       
        <script type="text/javascript" src="slideout/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

2- put this code between head tags to activate css style:
<link rel="stylesheet" href="slideout/css/style.css" type="text/css" charset="utf-8"/>

3- ok, now the slide out jquery plugin is ready and work correctly in your site
 to change the caption of any nav just change the text between span tags.
to put the link of any page, put it between the cotations after href like href="http://news.php".
example:
say we will change the caption of (about) nav and the link of the same nav.
here is the original code.
<li class="about"><a href=""><span>About</span></a></li>
here is the changed code
<li class="about"><a href="http://www.news.com"><span>news</span></a></li>

you can share this article with your friend. or like our page on facebook
Readyphp

jquery image overlay effect script

what is jquery image overlay effect script?

jquery image overlay effect script allow the user to enlarge the picture into same page, and other content on the rest of the page will appear faded.

what is jquery image overlay effect features?
- you can overlay the image in the actual window.
- support all formats of images.
- you can See the pictures on the actual page, just by clicking on the thumbnails at the bottom of this page.
- Gives your site a professional look with an eye catching jquery slideshow effect.
-image overlay effect script plugin supports in all web browsers.
- Make use of this script to animate simple gallery of images and change the images every time you want.

lightbox Preview

image overlay effect jquery
Click on the image to view the image effect



* you can see preview Here
* Download the code here lightbox.zip

how to use it
its very simple to use it in your site:
- Download and unzip Lightbox.zip file.
- under folder images you can place any image you want.
- (optional) If you want to change the content or modify the order of display, you can edit the following in lightbox.php file.
$con = Array("Girl sitting in a Garden.","Baby sleeping in a cradle.","Cute smiling baby.","Baby lying on a bed and thinking of something.");