Dynamic Image Gallery

Dynamically flow the images to fit within the available space.

by Alexander

HTML

<div style="maxwidth: 695px;">
    <!-- This is only here to simulate being in the fixed-width DNN skin. -->
    <ul>
        <li>
            <div class="thumbnail"> <a href="#">
                    <img src="http://placehold.it/288x151" alt="..." />
                    <div class="post-content">
                        <p>Honey-Caper Shrimp atop Spinach with Raisins</p>
                    </div>
                </a>

            </div>
        </li>
        <li>
            <div class="thumbnail"> <a href="#">
                    <img src="http://placehold.it/208x151" alt="..." />
                    <div class="post-content">
                        <p>Minted Shrimp with Lentills, Rice and Pasta</p>
                    </div>
                </a>

            </div>
        </li>
        <li>
            <div class="thumbnail"> <a href="#">
                    <img src="http://placehold.it/208x151" alt="..." />
                    <div class="post-content">
                        <p>Honey-Caper Shrimp atop Spinach with Raisins</p>
                    </div>
                </a>

            </div>
        </li>
        <li>
            <div class="thumbnail"> <a href="#">
                    <img src="http://placehold.it/208x151" alt="..." />
                    <div class="post-content">
                        <p>Minted Shrimp with Lentills, Rice and Pasta</p>
                    </div>
                </a>

            </div>
        </li>
        <li>
            <div class="thumbnail"> <a href="#">
                    <img src="http://placehold.it/208x151" alt="..." />
                    <div class="post-content">
                        <p>Honey-Caper Shrimp atop Spinach with Raisins</p>
                    </div>
                </a>

            </div>
        </li>
        <li>
            <div class="thumbnail"> <a href="#">
                    <img src="http://placehold.it/208x151" alt="..." />
                    <div class="post-content">
     ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

/* These styles rely on css browser selector being run (https://github.com/rafaelp/css_browser_selector/) */
 .post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    top: 0;
    left: 0;
    position: absolute;
    width: 90%;
    border-bottom-right-radius: 15px;
    min-height: 1.25em;
}
.thumbnail {
    position: relative;
}
.thumbnail a {
    text-decoration: none;
}
.thumbnail img {
    border-style: none;
}
.thumbnail a:hover img {
    border: 2px solid rgb(153, 102, 50);
    margin: -2px;
}
.ie .thumbnail a:hover img {
    margin: 1;
}
/* <== This is only applied to IE. */
 .post-content p {
    margin: 1px 4px;
    font-family:'Open Sans', sans-serif;
    font-size: .7em;
    color: red;
}
ul {
    list-style-type: none;
    margin: 0 0 0 21px;
    padding: 0;
    text-align: left;
}
ul li {
    display: inline-block;
    margin: 0 11px 10px 0;
}

JavaScript

/*
CSS Browser Selector v0.4.0 (Nov 02, 2010)
Rafael Lima (http://rafael.adm.br)
http://rafael.adm.br/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u) {
    var ua = u.toLowerCase(),
        is = function (t) {
            return ua.indexOf(t) > -1
        }, g = 'gecko',
        w = 'webkit',
        s = 'safari',
        o = 'opera',
        m = 'mobile',
        h = document.documentElement,
        b = [(!(/opera|webtv/i.test(ua)) && /msie\s(\d)/.test(ua)) ? ('ie ie' + RegExp.$1) : is('firefox/2') ? g + ' ff2' : is('firefox/3.5') ? g + ' ff3 ff3_5' : is('firefox/3.6') ? g + ' ff3 ff3_6' : is('firefox/3') ? g + ' ff3' : is('gecko/') ? g : is('opera') ? o + (/version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1 : (/opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) : is('konqueror') ? 'konqueror' : is('blackberry') ? m + ' blackberry' : is('android') ? m + ' android' : is('chrome') ? w + ' chrome' : is('iron') ? w + ' iron' : is('applewebkit/') ? w + ' ' + s + (/version\/(\d+)/.test(ua) ? ' ' + s + RegExp.$1 : '') : is('mozilla/') ? g : '', is('j2me') ? m + ' j2me' : is('iphone') ? m + ' iphone' : is('ipod') ? m + ' ipod' : is('ipad') ? m + ' ipad' : is('mac') ? 'mac' : is('darwin') ? 'mac' : is('webtv') ? 'webtv' : is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') : is('freebsd') ? 'freebsd' : (is('x11') || is('linux')) ? 'linux' : '', 'js'];
    c = b.join(' ');
    h.className += ' ' + c;
    return c;
};
css_browser_selector(navigator.userAgent);