Image Overlay Using JQuery Plugin With ASP.Net Example

Click Here to Download JQueryImageOverlay.zip

Image overlay means give text caption to image. Using Image overlay we can provide more details regarding image on mouse hover of image. This overlay is common in modern websites. We are using JQuery Image Overlay Plugin. This is a javascript file which you found online as well as we place this javascript in our example so you can download that from our given asp.net example.

There are many options and advance settings provided by Overlay Plugin javascript "jquery.ImageOverlay.js". You can set without any options for simple purpose. There are options like border color, overlay origin, overlay color, and overlay text color, overlay speed, overlay speed out etc.

By setting this option you made you custom overlay, like border cover , text color , different In and Out overlay animation etc..
You can also use JQuery MetaData Plugin "jquery.metadata.js" to display meta data information in overlay.

Here is example for this.
In this example we take several images to display various uses of Image overlay with Asp.Net.

ASPX Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
    <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
    <script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        jQuery Image Overlay</h1>
    <fieldset>
        <legend><b>Without any options : </b></legend>
        <ul id="firstGallery" class="image-overlay">
            <li><a href="http://www.yahoo.com">
                <img alt="Palm Tree" src="Images/palmtree.jpg" />
                <div class="caption">
                    <h3>
                        Write a Title Here</h3>
                    <p>
                        Put a Caption Here</p>
                </div>
            </a></li>
            <li><a href="http://www.google.com">
                <img alt="Iguana" src="Images/iguana.jpg" />
                <div class="caption">
                    <h3>
                        Another Title</h3>
                    <p>
                        click for more info</p>
                </div>
            </a></li>
            <li><a href="http://www.google.com">
                <img alt="Ceynote" src="Images/ceynote.jpg" />
                <div class="caption">
                    <h3>
                        Just a Title Here</h3>
                </div>
            </a></li>
        </ul>
    </fieldset>
    <br />
    <br />
    <fieldset>
        <legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
            overlay_speed, overlay_speed_out) : </b></legend>
        <ul id="secondGallery" class="image-overlay">
            <li><a href="http://www.mozilla.com/">
                <img alt="firefox" src="Images/firefox-512-200x200.png" />
                <div class="caption">
                    <h3>
                        Get Firefox</h3>
                </div>
            </a></li>
            <li><a href="http://www.mozilla.com/">
                <img alt="jungle" src="Images/jungle.jpg" />
                <div class="caption">
                    <h3>
                        Tall Overlay</h3>
                    <p>
                        The overlay height is based upon the content it contains</p>
                </div>
            </a></li>
        </ul>
    </fieldset>
    <br />
    <br />
    <fieldset>
        <legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
            metadata plugin</a> : </b></legend>
        <ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
            <li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
                <img alt="bamboo" src="Images/bamboo.jpg" />
                <div class="caption">
                    <h3>
                        Connect to a Lightbox</h3>
                    <p>
                        overlay origin is overridden, not animated</p>
                </div>
            </a></li>
            <li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
                <img alt="Ships" src="Images/josh-ships.jpg" />
                <div class="caption">
                    <h3>
                        &#39;Ships&#39; by Josh Neal</h3>
                    <p>
                        different in/out speeds</p>
                </div>
            </a></li>
            <li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
                href="http://www.mozilla.com/">
                <img alt="cypress" src="Images/cypress.jpg" />
                <div class="caption">
                    <h3>
                        Digg This!</h3>
                    <p>
                        colors, overlay speed overridden, overlay always open</p>
                </div>
            </a></li>
        </ul>
    </fieldset>
    <script type="text/javascript">
        // JavaScript for the Image Overlay galleries.
        $("#firstGallery").ImageOverlay();
        $("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
        $("#thirdGallery").ImageOverlay();
    </script>
    </form>
</body>
</html>

CSS :

.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }

.image-overlay a
{
    margin: 9px;
    float: left;
    background: #fff;
    border: solid 2px;
    overflow: hidden;
    position: relative;
}
.image-overlay img
{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.image-overlay .caption
{
    float: left;
    position: absolute;
    background-color: #000;
    width: 100%;
    cursor: pointer;
    /* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
        longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
        To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
    margin: 10px 0 10px 2px;
    font-size: 20px;
    font-weight: bold;
    padding: 0 0 0 5px;
}
.image-overlay p
{
    text-indent: 0;
    margin: 10px;
    font-size: 1em;
}

Output :

(To view original image , click on image)

Note : Give Us your valuable feedback in comments. Give your suggestions in this article so we can update our articles according to that.

Beginning .net | .Net Tips | C# Tips | MVC | c# .net programming | vb .net programming | SQL Server

Pages

Monday, 24 December 2012

Image Overlay Using JQuery Plugin With ASP.Net Example

1 comment: