CODEWITHSUNDEEP
jquerycss
Lanka
Lanka

Reputation: 31

CSS with jquery

In my image gallery I used jquery to get a popup window with image when I click on that image. This is my code.

    <html>
<head>
<title>jQuery: Image preview in popup with Grey out background</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" language="javascript">
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) /     2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) /     2+$(window).scrollLeft() + "px");
        return this;
    }

    $(document).ready(function() {      
        $("#thumbnail img").click(function(e){

            $("#background").css({"opacity" : "0.7"})
                            .fadeIn("slow");            

            $("#large").html("<img src='"+$(this).parent().attr("href") +"'     alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
                       .center()
                       .fadeIn("slow");         

            return false;
        });

        $(document).keypress(function(e){
            if(e.keyCode==27){
                $("#background").fadeOut("slow");
                $("#large").fadeOut("slow");
            }
        });

        $("#background").click(function(){
            $("#background").fadeOut("slow");
            $("#large").fadeOut("slow");
        });

        $("#large").click(function(){
            $("#background").fadeOut("slow");
            $("#large").fadeOut("slow");
        });

    });
</script>
<style>
img {
    border: none;
   }
    #thumbnail img {
    cursor: pointer;    
}
#large {
    display: none;
    position: absolute;     
    background: #FFFFFF;    
    padding: 5px;
    z-index: 10;
    min-height: 200px;
    min-width: 200px;
    color: #336699;
}
#background{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right:0;
    background: #000000;    
    z-index: 1;
}
</style>
</head>
<body>
<div align="center">  
   <div id="thumbnail">
        <h3>Click on the image</h3>
        <a href="image1.jpg"><img src="image1-thumb.jpg" alt="image1" rel="image1     Image" /></a>
        <a href="image2.jpg"><img src="image2-thumb.jpg" alt="image2" rel="image2     Image" /></a>
        <a href="image3.jpg"><img src="image3-thumb.jpg" alt="image3" rel="image3     Image" /></a>
        <a href="image4.jpg"><img src="image4-thumb.jpg" alt="image4" rel="image4     Image" /></a>

        <p id="large"></p>
    </div> 
   <div id="large"></div>   
<div id="background"></div>
</div>
</body>
</html>

When I click on image it displays inside the popup box. But these images haven't same size. How can I have same size for each images when I click on it.

Upvotes: 0

Views: 135

Answers (2)

trashr0x
trashr0x

Reputation: 6565

This solution leaves your jQuery code clean as it does not inject CSS and makes debugging with Firebug or other web dev debuggers much easier.

#large has both width and height set. Assuming that you already know the proportions of your image will be 200x300px (i.e. not bigger than their parent element):

#large img {
    width: 200px;
    height: 300px;
}

If the sizes of the images are not fixed-size but you want to keep them proportionate:

 #large img {
    width: 200px;
 }

..and remove height from the parent element (#large)

Upvotes: 1

Tejesh
Tejesh

Reputation: 189

$("#large").html("<img height='SET_HEIGHT_HERE' src='"+$(this).parent().attr("href") +"'     alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
                   .center()
                   .fadeIn("slow");

or

$("#large").html("<img width='SET_WIDTH_HERE' src='"+$(this).parent().attr("href") +"'     alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
                   .center()
                   .fadeIn("slow");

to constrain the proportions of image

or

set both width and height to give any image a fixed dimensions

Upvotes: 2

Related Questions