Jquery JavaScript DHTML




  
    jQuery UI Droppable - Simple photo manager
    
    
    
    
    
    
    
    
    
      #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
      .gallery.custom-state-active { background: #eee; }
      .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
      .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
      .gallery li a { float: right; }
      .gallery li a.ui-icon-zoomin { float: left; }
      .gallery li img { width: 100%; cursor: move; }
      #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
      #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
      #trash h4 .ui-icon { float: left; }
      #trash .gallery h5 { display: none; }
    
    
      $(function() {
        // there's the gallery and the trash
        var $gallery = $('#gallery'), $trash = $('#trash');
        // let the gallery items be draggable
        $('li',$gallery).draggable({
          cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
          revert: 'invalid', // when not dropped, the item will revert back to its initial position
          containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
          helper: 'clone',
          cursor: 'move'
        });
        // let the trash be droppable, accepting the gallery items
        $trash.droppable({
          accept: '#gallery > li',
          activeClass: 'ui-state-highlight',
          drop: function(ev, ui) {
            deleteImage(ui.draggable);
          }
        });
        // let the gallery be droppable as well, accepting items from the trash
        $gallery.droppable({
          accept: '#trash li',
          activeClass: 'custom-state-active',
          drop: function(ev, ui) {
            recycleImage(ui.draggable);
          }
        });
        // image deletion function
        var recycle_icon = 'Recycle image';
        function deleteImage($item) {
          $item.fadeOut(function() {
            var $list = $('ul',$trash).length ? $('ul',$trash) : $('').appendTo($trash);
            $item.find('a.ui-icon-trash').remove();
            $item.append(recycle_icon).appendTo($list).fadeIn(function() {
              $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
            });
          });
        }
        // image recycle function
        var trash_icon = 'Delete image';
        function recycleImage($item) {
          $item.fadeOut(function() {
            $item.find('a.ui-icon-refresh').remove();
            $item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
          });
        }
        // image preview function, demonstrating the ui.dialog used as a modal window
        function viewLargerImage($link) {
          var src = $link.attr('href');
          var title = $link.siblings('img').attr('alt');
          var $modal = $('img[src$="'+src+'"]');
          if ($modal.length) {
            $modal.dialog('open')
          } else {
            var img = $('')
              .attr('src',src).appendTo('body');
            setTimeout(function() {
              img.dialog({
                  title: title,
                  width: 400,
                  modal: true
                });
            }, 1);
          }
        }
        // resolve the icons behavior with event delegation
        $('ul.gallery > li').click(function(ev) {
          var $item = $(this);
          var $target = $(ev.target);
          if ($target.is('a.ui-icon-trash')) {
            deleteImage($item);
          } else if ($target.is('a.ui-icon-zoomin')) {
            viewLargerImage($target);
          } else if ($target.is('a.ui-icon-refresh')) {
            recycleImage($item);
          }
          return false;
        });
      });
    
  
  
    
      
        
          High Tatras
          
          View larger
          Delete image
        
        
          High Tatras 2
          
          View larger
          Delete image
        
        
          High Tatras 3
          
          View larger
          Delete image
        
        
          High Tatras 4
          
          View larger
          Delete image
        
      
      
        Trash Trash
      

    

    
      

You can delete an image either by dragging it to the Trash or by clicking the trash icon.


      

You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.


      

You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.