css

        .jg .image img {
            border: 1px solid silver;
            padding: 4px;
            width: 300px;
            height: 300px;
        }
        .jg li {
            opacity: .7;
            border: 1px solid #999;
            float: left;
        }
        .jg li img {
            width: 80px;
            height: 80px;
        }
        .jg li.selected {
            opacity: 1;
            border: 1px solid green;
        }

html

<ul class="jgal3">
            <li><img src="img/firefox.jpg" title="Firefox" /></li>                                                        
            <li><img src="img/safari.jpg" title="Safari" /></li>                                                          
            <li><img src="img/chrome.jpg" title="Chrome" /></li>                                                          
            <li><img src="img/opera.jpg" title="Opera" /></li>                                                            
            <li><img src="img/ie.jpg" title="IE" /></li>                                                                  
</ul>

js

            var id = "jgal3";                                                                                             
            var origHtml = $("ul.jgal3");                                                                                 
            var newHtml = $('<div class="jg" id="'+id+'"><div class="image"><img src="" /></div>'+                        
                '<div id="jgal-org">' + origHtml.html() + '</div></div>');                                                
            origHtml.replaceWith(newHtml);                                                                                
            wrap = $("#"+id);                                                                                             
    
            // Add onclick to each li>img                                                                                 
            wrap.find("li").click(function() {                                                                            
                // If allready selected, fuck it
                var node = $(this);
                if (!node.hasClass("selected")) {
                    // Find previous selected and deselect
                    $("#"+id+" li.selected").removeClass("selected");
                    $("#"+id+" div.image img").attr("src", node.find("img").attr("src"))
                        .attr("title", node.find("img").attr("title"));
                    node.addClass("selected");
                }
            }).css("cursor", "pointer");

            // Increase size of our main window
            var curImage = wrap.find("li:first-child img");
            curImage.parent("li").addClass("selected");
            wrap.find("div.image img").attr("src", curImage.attr("src"));
            wrap.find("div.image img").attr("title", curImage.attr("title"));

            // Add rating functionality
            $("#"+id+" div.image").append('<p class="rating">'+
                '<a href="#1">1</a>' + 
                '<a href="#2">2</a>' + 
                '<a href="#3">3</a></p><h2></h2>').find("p.rating a").click(function(e) {
                    // When clicked
                    e.preventDefault();
                    rated = $(this).parent().nextAll("h2");
                    var data = {
                        rating: $(this).attr("href").replace("#", ""),
                        name: $(this).parents("div.image").find("img").attr("title")
                    };
                    $.getJSON("rate.php", data, function(data) {
                        // Rating sendt
                        rated.text(data.rating + "/" + data.count);
                    });
                });