Carousel slide

http://www.tripwiremagazine.com/2012/01/jquery-carousel.html

http://caroufredsel.frebsite.nl/

novislide

nivoZoom: http://nivozoom.dev7studios.com/

Zoom: http://www.pixelzdesign.com/blog_view.php?id=59
http://www.redfoxmagazine.com/28-jquery-zoom-plugins-feel-happy/
http://www.tripwiremagazine.com/2012/03/jquery-effects.html 

colorbox: http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

caption: http://www.wbotelhos.com/capty/
http://www.ferretarmy.com/files/jQuery/ImageOverlay/ImageOverlay.html 

Hieu menu:

ma js:

 
$(document).ready(function() { 

$(".h_nav li").hover(function(){ 

        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
        },function(){ 
        $(this).find('ul:first').css({visibility: "hidden"}); 

        }); 
});

ma CSS:

.main_nav{
width: 675px;
height: 45px;
}
.left_h_nav{
height: 45px;
width: 5px;
float: left;
}

.h_nav{
float: left;
background: transparent url("../images/back_nav_center.png") repeat;
}
.h_nav> li{
height: 45px;
float: left;
padding: 0px 25px;
border-right: 1px solid #a48111;
position: relative;
}
.h_nav> li:hover{
background: transparent url("../images/back_nav_center_active.png") repeat !important;
}
.h_nav li a{
display: block;
font-size: 13px;
font-weight: bold;
color: #fff;
float: left;
line-height: 45px;
}
.ico_sub_menu{
display: block;
width: 10px;
height: 6px;
background: transparent url("../images/icon_sub_menu.png") no-repeat !important;
float: left !important;
margin-top: 22px !important;
margin-left: 5px !important;
}
.h_nav ul {
    position: absolute;
    width: 220px;
    top: 45px;
    display: none;
background: transparent url("../images/back_submenu.jpg") repeat;
border: 1px solid #3b341b;
left: 0px;
-moz-border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.h_nav ul li, .h_nav ul li ul li,.h_nav ul li ul li ul li{
width: 220px;
float: left;
position: relative;
border-bottom: 1px solid #676045;
}
.h_nav li ul a {
display: block !important;
width: 207px;
padding-left: 5px;
color: #faf8f8;
line-height: 30px;
float: left;
}
.h_nav li ul li span{
display: block;
width: 8px;
height: 13px;
float: right;
margin-top: 9px;
}
.h_nav li ul li:hover {
background: #574c28;
}
.h_nav ul ul, .h_nav ul ul ul{
    top: -1px;
}
.h_nav li ul ul, .h_nav li ul ul ul {
    left: 220px;
}
.h_nav li:hover ul ul,
.h_nav li:hover ul ul ul,
.h_nav li:hover ul ul ul ul {
    display: none;
}

.h_nav li:hover ul,
.h_nav li li:hover ul,
.h_nav li li li:hover ul,
.h_nav li li li li:hover ul {
    display: block;
}
.right_h_nav{
height: 45px;
width: 5px;
float: left;
}

javascript ()()()()()()()():

    $(document).ready(function(){
        $(".cont_help").hide();   
        $(".title_help").click(function(){
            $(".cont_help").slideToggle();   
        });       
        $('.title_help').click(function(){
            if($(".help_line div").hasClass('bg_tit2'))
            {
            $('.title_help').removeClass("bg_tit2");   
            }else
            {$('.title_help').addClass("bg_tit2");}
        });
           
    });