Coding... play frontend script with beautiful models~~
Click to view the girl, you can find the source code below.
<!-- 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>
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;
}
$(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();
}
});