CTRL + CLICK / SHIFT + CLICK

by Robodude

HTML

<div class="MiniSlidePreview"></div>
<div class="MiniSlidePreview"></div>
<div class="MiniSlidePreview"></div>
<div class="MiniSlidePreview"></div>
<div class="MiniSlidePreview"></div>
<div class="MiniSlidePreview"></div>
<div class="MiniSlidePreview"></div>
<div id="initialIndex"></div>
<div id="selectedIndex"></div>

CSS

.MiniSlidePreview
{
    padding: 3px;
    border: 2px solid black;
    margin: 2px;
    width: 50px;
    height: 50px;
}

.MiniSlidePreviewSelected
{
    border: 2px dotted red;
}

JavaScript

var scInitialIndex = -1; 



$(".MiniSlidePreview").live("click", function (e) {
            var t = $(this);
            var selectedIndex = $(".MiniSlidePreview").index(t);
                    
            if (e.ctrlKey)
            {
                if (t.hasClass("MiniSlidePreviewSelected"))
                {
                    scInitialIndex = $(".MiniSlidePreview").index(t);
                    t.removeClass("MiniSlidePreviewSelected");
                    
                    if ($(".MiniSlidePreviewSelected").length == 1)
                    {
                        scInitialIndex = -1;
                    }
                }
                else
                {
                    t.addClass("MiniSlidePreviewSelected");

                    scInitialIndex = $(".MiniSlidePreview").index(t);
                }
            }
            else if (e.shiftKey)
            {
                if ($(".MiniSlidePreviewSelected").length > 0)
                {
                    $(".MiniSlidePreview").each(function(i, e){
                        if (scInitialIndex < selectedIndex)
                        {
                            if (((i > scInitialIndex ) && (i < selectedIndex)) || i == scInitialIndex )
                            {
                                $(e).addClass("MiniSlidePreviewSelected");
                            }
                            else
                            {
                                $(e).removeClass("MiniSlidePreviewSelected");
                            }
                        }
                        else
                        {
                            if ((i <= scInitialIndex ) && (i > selectedIndex))
                            {
                                $(e).addClass("MiniSlidePreviewSelected");
                            }
                            else
                            {
                                $(e).removeClass("MiniSlidePreviewSelected");
                           ...