Ha Model !

Demo 1   Demo 2

Coding... play frontend script with beautiful models~~


Click to view the girl, you can find the source code below.

HTML Code:

      <!-- The gallery container: -->
      <div id="gallery">
      
      <!-- The droppable share box -->
      <div class="drop-box">
      </div>
      
      </div>
      
      <div class="clear"></div>
      
      <!-- This is later converted to the modal window with the url of the image: -->
      <div id="modal" title="Share this picture">
      <form>
      <fieldset>
      <label for="name">URL of the image</label>
      <input type="text" name="url" id="url" onfocus="this.select()" />
      </fieldset>
      </form>
      
      </div>
    

CSS Code:

      body{
          /* Styling the body */
          color:white;
          font-size:13px;
          background: #222222;
          font-family:Arial, Helvetica, sans-serif;
      }
      
      #gallery{
          /* The pics container */
          width:100%;
          height:580px;
          position:relative;
      }
      
      .pic, .pic a{
          /* Each picture and the hyperlink inside it */
          width:100px;
          height:100px;
          overflow:hidden;
      }
      
      .pic{
          /* Styles specific to the pic class */
          position:absolute;
          border:5px solid #EEEEEE;
          border-bottom:18px solid #eeeeee;
      
          /* CSS3 Box Shadow */
          -moz-box-shadow:2px 2px 3px #333333;
          -webkit-box-shadow:2px 2px 3px #333333;
          box-shadow:2px 2px 3px #333333;
      }
      
      .pic a{
          /* Specific styles for the hyperlinks */
          text-indent:-999px;
          display:block;
          /* Setting display to block enables advanced styling for links */
      }
      
      .drop-box{
          /* The share box */
          width:240px;
          height:130px;
          position:absolute;
          bottom:0;
          right:0;
          z-index:-1;
      
          background:url(img/drop_box.png) no-repeat;
      }
      
      .drop-box.active{
          /* The active style is in effect when there is a pic hovering above the box */
          background-position:bottom left;
      }
      
      label, input{
          /* The modal dialog URL field */
          display:block;
          padding:3px;
      }
      
      label{
          font-size:10px;
      }
      
      fieldset{
          border:0;
          margin-top:10px;
      }
      
      #url{
          /* The URL field */
          width:240px;
      }
    

JavaScript Code:

      $(document).ready(function(){
          // Executed once all the page elements are loaded
          var preventClick=false;
          $(".pic a").bind("click",function(e){
      
              /* This function stops the drag from firing a click event and showing the lightbox */
              if(preventClick)
              {
                  e.stopImmediatePropagation();
                  e.preventDefault();
              }
          });
      
          $(".pic").draggable({
      
              /* Converting the images into draggable objects */
              containment: 'parent',
              start: function(e,ui){
                  /* This will stop clicks from occuring while dragging */
                  preventClick=true;
              },
              stop: function(e, ui) {
                  /* Wait for 250 milliseconds before re-enabling the clicks */
                  setTimeout(function(){ preventClick=false; }, 250);
              }
          });
      
          $('.pic').mousedown(function(e){
              /* Executed on image click */
              var maxZ = 0;
      
              /* Find the max z-index property: */
              $('.pic').each(function(){
                  var thisZ = parseInt($(this).css('zIndex'))
                  if(thisZ>maxZ) maxZ=thisZ;
              });
      
              /* Clicks can occur in the picture container (with class pic) and in the link inside it */
              if($(e.target).hasClass("pic"))
              {
                  /* Show the clicked image on top of all the others: */
                  $(e.target).css({zIndex:maxZ+1});
              }
              else $(e.target).closest('.pic').css({zIndex:maxZ+1});
          });
      
          /* Converting all the links to a fancybox gallery */
          $("a.fancybox").fancybox({
              zoomSpeedIn: 300,
              zoomSpeedOut: 300,
              overlayShow:false
          });
      
          /* Converting the share box into a droppable: */
          $('.drop-box').droppable({
              hoverClass: 'active',
              drop:function(event,ui){
      
                  /* Fill the URL text field with the URL of the image. */
                  /* The id of the image is appended as a hash #pic-123 */
                  $('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id'));
                  $('#modal').dialog('open');
              }
          });
      
          /* Converts the div with id="modal" into a modal window  */
          $("#modal").dialog({
              bgiframe: true,
              modal: true,
              autoOpen:false,
      
              buttons: {
                  Ok: function() {
                      $(this).dialog('close');
                  }
              }
          });
      
          if(location.hash.indexOf('#pic-')!=-1)
          {
              /* Checks whether a hash is present in the URL */
              /* and shows the respective image */
              $(location.hash+' a.fancybox').click();
          }
      });