Page Comparison

...

The first style is the default style to be applied to any image thumbnail. For our example, we'll float the images so that they appear to be in a grid, and give them a background colour:

.orderable-default{
    background-color: #eee;
    float: left;
}

The second style is applied to the element that has been selected. A visual indication will inform users that the thumbnail can then be moved using keystrokes. For our example, we'll change the background colour:

.orderable-hoverselected{
    background-color: lightyellow;
    cursor: move#ddd;
    float: left;
}

The Lightbox also supports mouse-based drag and drop, and another style is used when the cursor hovers over a thumbnail, to inform users that the thumbnail can be moved using the mouse. For our example, we'll change the background colour again, but we'll use a different colour:

.orderable-selectedhover{
    background-color: #ddd lightyellow;
    cursor: move;
    float: left;
}

When a thumbnail is in the process of being moved, either by keyboard or by mouse-based drag and drop, a 'dragging' style is applied to the thumbnail to indicate this. We'll change the background colour for this:

.orderable-dragging {
    background-color: lightyellow;
    float: left;
}

When the mouse is used to pick up a thumbnail and move it, an 'avatar' is created to represent the thumbnail being dragged. By default, the avatar is a copy of the item. A style is applied that can be used to modify the appearance of the avatar. For our example, we will make it transparent:

.orderable-avatar {
    opacity: 0.55;
    width: 300px;
    border: 0;
}

}

Finally, when the mouse is used to move a thumbnail, a 'drop marker' is displayed in the location where the thumbnail will end up if it is dropped. The last style is used to control what that marker looks like. We'll make it a vertical red bar:

.orderable-drop-marker{
    height: 10px !important;
    width: 4px;
    background-color: red;
    float: left;
}

That's it! Your Lightbox is now functional, and you can rearrange the images in your collection. Congratulations!