Collapsed Image with Jquery and CSS.
Wall Script
Follow Me:
Tuesday, September 07, 2010

Collapsed Image with Jquery and CSS.

How to do collapsed image with Jquery and CSS. Orkut.com implemented this concept while updating image scrap, the scrap shows image in collapsed style to reduce the webpage height. This is very simple script using mouseover, mouseout and css Jquery functions.

facebook tag friends with jquery

Download Script     Live Demo

Javascript Code
Contains javascipt and HTML code. $(".imagebox").mouseover(function(){}).mouseout(function{})- imagebox is the class name of div tag. $(".showlink").click(function(){}) - .showlink is the class name of show anchor tag. $(".hidelink").click(function(){}) - .hidelink is the class name of hide anchor tag. Using Jquery CSS function chaning the max-height:100px
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Image Area Mouseover and Mouseout
$(".imagebox").mouseover(function()
{
$(".showhide").show();
}).mouseout(function()
{
$(".showhide").hide();
});

//Show link
$(".showlink").click(function()
{
$(".imagebox").css('max-height','');
$(".showlink").hide();
$(".hidelink").show();
});

//Hide link
$(".hidelink").click(function()
{
$(".imagebox").css('max-height','100px');
$(".hidelink").hide();
$(".showlink").show();
});

});
</script>
//HTML code
<div class="imagebox" style="max-height:100px;">
<img src="image.jpg"/>
<div class="showhide" >
<a href="#" class="showlink">show</a>
<a href="#" class="hidelink">hide</a>
</div>
</div>

CSS code
.imagebox
{
display:block;
position:relative;
overflow:hidden
}
.hidelink
{
display:none;
}
.showhide
{
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#F2f2f2 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:18px;
left:0;
line-height:18px;
padding-left:5px;
position:absolute;
width:100%;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


14 comments:

  1. Once again very nice... :)

    ReplyDelete
  2. Hey Srinivas,

    I am great follower of you, and now i have got stuck in a problem.
    and i need your help, as everybody knows about your skill , you can help me.

    i have a page where all the reporters names appears and what i want when anybody puts mouse on name,his whole profile appears in a div.

    i hope ,u have got it.

    my emailid-amansinha44@yahoo.co.in

    ReplyDelete
  3. @amansinha

    Try with jquery tooltip plugin

    ReplyDelete
  4. Srivinas, your post really nice!

    regards

    ReplyDelete
  5. very interesting concept...another good post from srinivas

    ReplyDelete
  6. so cool...
    maybe its can be stylish if add
    text-align:center;
    on CSS side (.showhide) :P
    good good

    ReplyDelete
  7. after doing the practice, it turns out good also add code ...
    style="width:100%"
    in writing HTML code "<img src="image.jpg"/>" to be
    <img style="width:100%" src="image.jpg"/>

    ReplyDelete
  8. Hey ...Nice! Wonderful ! simple coding and very easy.Thanks for sharing so good knowledge.

    ReplyDelete
  9. Thanks for this great lwsson .

    How can I show the pictuer at first place with hide option available and so on .

    Thanks

    ReplyDelete
  10. I mean how we can set it that by default when we open the page , the maximum size of the picture is shown and by clicking the hide link we can hide the picture .

    plz let me know , I really need it .

    Thanks

    ReplyDelete
  11. Rez, This problem are not solve. I am facing it. When i try to solve this problem. but next time it occurs. If you have any solution then please share with us.

    ReplyDelete
  12. thanks for the code. im thinking someway on how to use it.

    ReplyDelete
  13. Thanks for this great lesson but why i can not download this project

    ReplyDelete

Make in India