JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<script src="http://dl.dropbox.com/u/5550635/Test%20rounded%20gallery/jquery.easing.1.3.js"></script>
<div class="friend-selection">
                    <ul>
                        <li id="parent_picture1">
                            <div id="picture1">    
                                <div class="glow"></div>
                                <img src="http://thenextcorner.com/WindowsLiveWriter/Southpark-character.jpg" width="111" height="166" id="img_picture1">
                                <span class="name">Naam Achternaam</span>
                            </div>        
                        </li>
                        <li id="parent_picture2">
                            <div id="picture2">
                                <div class="glow"></div>
                                <img src="http://thenextcorner.com/WindowsLiveWriter/Southpark-character.jpg" width="111" height="166" id="img_picture2">
                                <span class="name">Naam Achternaam</span>
                            </div>
                        </li>
                        <li id="parent_picture3">
                            <div id="picture3">
                                <div class="glow"></div>
                                <img src="http://thenextcorner.com/WindowsLiveWriter/Southpark-character.jpgg" width="111" height="166" id="img_picture3">
                                <span class="name">Naam Achternaam</span>
                            </div>
                        </li>
                        <li id="parent_picture4">
                            <div id="picture4">
                                <div class="glow"></div>
                                <img src="http://thenextcorner.com/WindowsLiveWriter/Southpark-character.jpg" width="111" height="166" id="img_picture4">
                                <span class="name">Naam Achternaam</span>
                            </div>
                        </li>
                        <li...

CSS

/* friend selection */
.select-friends {
    overflow                : hidden;
    background                : url(../img/bg-friends-selection.jpg) no-repeat left top;
}

.select-friends h1 {
    float                    : left;
    position                : relative;
    padding                    : 255px 0 0 30px;
    font-size                : 6.900em;
    width                    : 31%;
    color                    : rgb(255, 255, 255);
    line-height                : 61px;
    letter-spacing            : -0.005em;
    text-shadow                : rgb(72, 72, 72) 0 0 6px;
}

.select-friends span {
    padding                    : 0 0 0 34px;
}

.select-friends .aside {
    float                    : right;
    position                : relative;
    width                    : 625px;
}

.friend-selection li {
    position                : absolute;
}

.friend-selection li > div {    
    width                    : 111px;
    height                    : 166px;
    overflow                : hidden;
}

.friend-selection img {
    display                    : block;
    position                : relative;
    -moz-box-shadow            : rgb(0, 0, 0) 2px 0 4px;
    -webkit-box-shadow        : rgb(0, 0, 0) 2px 0 4px;
    box-shadow                : rgb(0, 0, 0) 2px 0 4px;
}

.friend-selection .glow {
    position                : absolute;
    top                        : 0;
    left                    : 0;
    width                    : 111px;
    height                    : 131px;
    z-index                    : 20;
    background                : url(../img/bg-glow.png) no-repeat left top;
}

.friend-selection .name {
    position                : absolute;
    left                    : -16px;
    bottom                    : 5px;
    width                    : 141px;
    padding                    : 4px 0;
    text-align                : center;
    font-size                : 14px;
    font-family                : Georgia, "Times New Roman", Times, serif;
   ...

JavaScript

//random images from a list - will work nicely w/ asteroids
var images = [];

        function init() {
            $('.friend-selection li > div').each(function(){
        
                var id = this.id;
                var img = $('#img_' + id);
                var randomTop = 500*Math.random(); //random top position
                var randomLeft = 500*Math.random(); //random left position
            
                $("#parent_" + id).css({ //apply the position to parent divs
                    top        : randomTop,
                    left    : randomLeft
                });
            });
        };

        init();