Child pages
  • Tutorial - Image Reorderer

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:

Code Block
none
none
.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:

Code Block
none
none
.orderable-hoverselected{
    background-color: lightyellow#ddd;
    cursor: move;
    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:

Code Block
none
none
.orderable-selectedhover{
    background-color: #dddlightyellow;
    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:

Code Block
none
none
.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:

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

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:

Code Block
none
none
.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!