Floating gallery (DHTMLSuite.floatingGallery)

Specifications

Widget/Class name: DHTMLSuite.floatingGallery
Demo: demo-image-gallery-1.html.
Css: [THEMES_FOLDER]/css/floating-gallery.css
Other classes used by this widget:
- DHTMLSuite.mediaCollection - Data source for images.
- DHTMLSuite.imageSelection - For the drag'n drop feature.

Configuration

This is the code for this gallery

Step 1: Create the HTML datasource

This is a plain UL,LI list. The script reads properties from this list:

id - Id of LI tag. This will be the unique id for the image.
title - title of LI tag represents the title of the image.
caption - A custom attribute for the li tag. It is not visible in the floating gallery, but will be stored in the media model. It can be used by other scripts, example: in the imageEnlarger script which I hooked up in a callback function in the demo.
largeImagePath - Also a custom attribute for the li tag. This is where you specify path to a larger version of the image.
thumbnailPathSmall - A small thumbnail.
src - src of the img tag is the image you'll see in the floating gallery.

Step 2: Create a mediaCollection object and point it to this UL list

var myCollection = new DHTMLSuite.mediaCollection(); myCollection.addItemsFromMarkup('galleryModel');

Step 3: Create a floatingGallery object and point it to the mediaCollection object

var myGallery = new DHTMLSuite.floatingGallery();
myGallery.setMediaCollectionRef(myCollection);
myGallery.setTargetId('gallery');
myGallery.setCallBackFunctionOnClick('displayLargeImage');
myGallery.init();

Add drag and drop features to the floating gallery

Drag and drop features are available by use of the DHTMLSuite.imageSelection class. In the demo in the pane splitter(Open the demos "Floating Gallery" and "Drag and drop tree" from the menu), I have used this code for that:

var myImageSelection = new DHTMLSuite.imageSelection();
myImageSelection.addSelectableElements('gallery');
myImageSelection.addDestinationElement('destinationBox');
myImageSelection.setCallBackFunctionOnDrop('dropItems');
addEventToFolderTree();
myImageSelection.init();

First, I create the object named myImageSelection. Then I use the addSelectableElements method to make something selectable. the addSelectableElements takes one argument, and that is a reference to the parent node of the elements we want to make dragable. That method will add drag-features to all direct childs(only sub, not sub->sub). Your users will now be able to drag these elements either by pressing down their mouse button directly on the image, or by dragging a rectangle around one or more images.

The next thing we do is to specify where to drop images. As you can see from the line myImageSelection.addDestinationElement('destinationBox') I have added the element with id "destinationBox" as a possible destination. Also notice that I call a custom function which I have called addEventToFolderTree. This function looks like this:

/* Add the nodes of the folder tree as destinations */
function addEventToFolderTree()
{
if(!myImageSelection.addDestinationElementsByTagName('node10000','A'))setTimeout('addEventToFolderTree()',1000);
}

Here, I'm using the addDestinationElementsByTagName method to make more than one element into a possible destination with only one line of code. The addDestinationElementsByTagName method takes three arguments, the 2 first arguments is

The id of parent node and
The tag name of the child nodes.

So, in this case, all <A> tags inside element with id "node10000", will be added as possible destinations. The reason why I'm using a setTimeout function is simply because I'm in the demo doesn't know if the folder tree is loaded or not. node10000 is the root node of my folder tree.

Highlight nodes with css

All stying is handled by a special class name "imageSelection". For the folder tree, I added this css

.DHTMLSuite_tree li a.imageSelection{
background-color:#316AC5;
color:#FFF;
}

Which specifies that when you drag images over a node in the tree, the node will get a blue background color and white text color.

And for the div "destinationBox" in the demo, I wrote this css:

div#destinationBox.imageSelection{
background-color:#c6d6ef;
}

I.e.: All div elements with id "destinationBox" and class name "imageSelection" should have a "bluish" background color.

Creating call back function

The imageSelection class takes care of the process of moving one or more elements to a destination. What's happen afterwards, is out of the scope for this script. This is what we take care of in a callback function. In the code above, a call back function is defined in this line:

myImageSelection.setCallBackFunctionOnDrop('dropItems');

It says that a function named "dropItems" should be called when one or more items has been dropped on a destination. Two arguments will be sent to this function:

An array of sources, i.e. the dragged elements.
A reference to the destination.

This information makes it possible for us to make our decisions what to do in our call back function. Let's take a look at the dropItems function:

function dropItems(sources,destination)
{
  var string = 'Dropping elements:';
  for(var no=0;no<sources.length;no++){
    string = string + sources[no].id + '';
    myGallery.deleteImageFromGallery(sources[no].id);  // Deleting image

  }
  if(!destination.id)destination = destination.parentNode;
  string = string + ' on to element ' + destination.id;

  document.getElementById('destinationBox').innerHTML = string;
  }

In my call back function, I'm just creating a string explaining which elements was dragged and to which element they were dropped.

In the for-loop, I'm looping through all the sources. I then concatinate the string and call the deleteImageFromGallery method for the floatingGallery class to remove the specific image from view.

A more useful example will typically involve some ajax code. Perhaps something like:

First I'm buidling an url with the get variables "sources" and "destination". I send this in an Ajax request to a file named moveImages.php. When this file is finished processing the sources, it will output the string "OK", which will be sent back to my dropItems_complete function. In there, I check for that string and if it's "OK", then I loop through all the sources once again, but this time, I'm calling the deleteImageFromGallery in order to delete the moved images from the view.

Advertisement:
LudoJS framework
dhtmlchess.com