jPicDetail 0.5

List of Objects with hidden details -- jQuery-Plugin, tested with 1.6x, all Markup HTML 5. So use recent versions of Firefox, Opera, Safari or Chrome -- Hover over an object to slide in the details <h3>Parameters</h3> <pre> <code> $('.jPicDetail').jPicDetail( { stickDurationAfter: 0, // Stick duration after leaving the image overlayColor: "#000", // Overlay Color overlayTransparency: 1, // Transparancy of the background descrTextColor: "#FFF", // Color of the description text descriptionPadding: 10 // Set textpadding, don't use css });

by Umar

HTML

<ul class="jPicDetail">
  <li><img src="http://placehold.it/200x100/5193d4/FFFFFF" alt="1" data-descr="Description here" /></li>
    <li><img src="http://placehold.it/160x300/5193d4/FFFFFF" alt="2" data-descr="Even <strong>Formating</strong> works" /></li>
  <li><img src="http://placehold.it/150x100/5193d4/FFFFFF" alt="3" data-descr="Longer text, Longer text, Longer text, Longer text," /></li>
  <li><img src="http://placehold.it/122x130/5193d4/FFFFFF" alt="4" data-descr="Some more text. Lorem ipsum dolor sit amet" /></li>
</ul>

CSS

.jPicDetail ul { list-style: none; }
.jPicDetail li { float: left; margin: 0 20px 20px 0; list-style: none; }
.jPicDetail li span { color: #fff; font-family: Helvetica, Arial, Sans-Serif; font-size: 0.8em }
.jPicDetail li span h2 { font-size: 1.2em; }
.jPicDetail li span p { font-style: italic; }
.jPicDetail li span strong { color:#ff0000; }

JavaScript

/*
 * jPicDetail
 * Show Information on Thumbnails in a smooth overlay
 *
 * Copyright (c) 2011, Michael Zahno
 *
 * Licensed under MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Launch  : November 2011
 * Version : 0.5
 * Released: 1th Nov, 2011
 *
 * 
 * Usage (with default values):
 * $('.jPicDetail').jPicDetail({
 *      stickDurationAfter: 800,
 *      overlayColor: "#000",
 *      overlayTransparency: 0.8,
 *      descriptionTextColor: "#FFF",
 *      descriptionPadding: 0
 * });
 * 
 * 
 * Follow me on Twitter: 
 * http://twitter.com/SmartforceWeb
 * 
 * More information on GitHub:
 * https://github.com/mikezahno/jPicDetail
 */

(function($) {
    $.fn.jPicDetail = function(options) {

        var defaults = {
            stickDurationAfter: 0,
            overlayColor: "#000",
            overlayTransparency: 0.8,
            descriptionTextColor: "#FFF",
            descriptionPadding: 0
        };
        options = $.extend({}, defaults, options);


        return this.each(function() {

            // Define the ul wrapper for easy access
            var obj = $(this);

            // Fetch dimension of the image

            function getDimension(ob) {
                var dimensions = [];
                dimensions.imgHeight = ob.find("img").innerHeight();
                dimensions.imgWidth = ob.find("img").innerWidth();
                dimensions.spanHeight = ob.find("span").innerHeight();
                return dimensions;
            }

            function setDimension(ob) {
                // Set height and width of containing elements (li, for now)
                ob.css({
                    "position": "relative",
                    "overflow": "hidden",
                    "height": getDimension(ob).imgHeight,
                    "width": getDimension(ob).imgWidth
                });

                // Set width of overlay (span, for now)
                ob.find("span").css({
                    "width":...