...
| Code Block |
|---|
|
<script type="text/javascript">
fluid.lightbox.createLightboxFromIds ("image-collection", {orderChangedCallback : function(){}});
</script>
|
Step 4: Define styles
The final step is to create styles so that 'interesting moments' in the reordering of images are easily apparent to the user.
The Lightbox pre-defines a number of class names that will be used for this purpose. It's possible, through the optional configuration, to override these class names, but for this example, we'll just define styles for the default class names.
The first style is the default style to be applied to any image thumbnail.
| Code Block |
|---|
|
.orderable-default{
background-color: #eee;
float: left;
}
|
| Code Block |
|---|
|
.orderable-hover{
background-color: lightyellow;
cursor: move;
float: left;
}
|
| Code Block |
|---|
|
.orderable-selected{
background-color: #ddd;
float: left;
}
|
| Code Block |
|---|
|
.orderable-dragging {
background-color: lightyellow;
float: left;
}
|
| Code Block |
|---|
|
.orderable-avatar {
opacity: 0.55;
width: 300px;
border: 0;
}
|
| Code Block |
|---|
|
.orderable-drop-marker{
background-colorheight: 10px red!important;
heightwidth: 2px4px;
marginbackground-color: -4pxred;
paddingfloat: 0pxleft;
}
|