CODEWITHSUNDEEP
javascriptjquery
donkeyboy72
donkeyboy72

Reputation: 1943

JQuery Resize image plugin error

Im trying to implement a simple plugin that resize image based on a container. The problem is , I don't understand why it's not resizing my image when I placed it inside a container

This is the simple plugin demo page i'm trying to replicate

https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html

This is my Code 

<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
    $(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>


</head>
<body>

<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>

My CSS 

.container {height: 440px;  width: 950px; background:#FFFFFF}

Upvotes: 1

Views: 1853

Answers (1)

catherine
catherine

Reputation: 22808

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Image</title>

    <style>
        .container{
            background-color:#f7f7f7;
            border:2px solid #ccc;
            margin:10px;
            display:inline-block;
        }
        .imgLiquid {
            display:block;
            overflow: hidden;
            background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
        }
        .imgLiquid img{
            visibility:hidden;
        }
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
        type="text/javascript"></script>
    <script type="text/javascript"
        src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".imgLiquidFill").imgLiquid({
                fill: true,
                fadeInTime:200,
                horizontalAlign: "center",
                verticalAlign: "top"
            });
        });
    </script>
</head>

<body>  
    <div class="container">
        <span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
            <a href="/media/Woody.jpg"  target="_blank" title="test">
                <img alt="" src="/media/Woody.jpg"/>
            </a>
        </span>
    </div>
</body>
</html>

Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.

Upvotes: 1

Related Questions