renoirb · July 1, 2013 23:49 · ryanve · Mar 27, 2014
diff --git a/dabblet.css b/dabblet.css
 /**
 * Lea Verou's CSS Lightbox, taken on webplatform.org
 * For redistribution purposes
 * @author Lea Verou <[email protected]>
 */
 #lightbox {
 	visibility: hidden;
 	position: fixed;
 	top: 50%;
 	left: 50%;
 	z-index: 10;
 	width: 0;
 	height: 0;
 	padding: 10px;
 	margin: -10px 0 0 -10px;
 	background: white;
 	box-shadow: 2px 2px 10px rgba(0,0,0,.5);
 }

 #lightbox.closed {
 	-webkit-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
 	-moz-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
 	-o-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
 	transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
 }

 #lightbox.open {
 	visibility: visible;
 	width: 640px;
 	height: 360px;
 	margin: -190px 0 0 -330px;
 	box-shadow: 2px 2px 10px rgba(0,0,0,.5), 0 0 0 4000px rgba(0,0,0,.3);
 	
 	-webkit-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
 	-moz-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
 	-o-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
 	transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
 }

 	#lightbox > a { /* Close button */
 		visibility: hidden;
 		position: absolute;
 		right: -.5em;
 		top: -.5em;
 		width: 1em;
 		padding: .3em;
 		background: #694D9F;
 		border: .2em solid white;
 		border-color: hsla(0,0%,100%,.6);
 		border-radius: 50%;
 		box-shadow: 1px 1px 6px rgba(0,0,0,.5);
 		color: white;
 		text-shadow: 0 -.1em .1em rgba(0,0,0,.5);
 		text-align: center;
 		font: bold 200%/1 serif;
 	}
 	
 	#lightbox.open > a {
 		visibility: visible;
 	}
 	
 	#lightbox > a:hover {
 		background: #D02E27;
 	}
 	
 	#lightbox > iframe {
 		width: 100%;
 		height: 100%;
 		border: 0;
 	}
 	
 	#lightbox > iframe {
 		display: none;
 		background: black;
 	}
 	
 	#lightbox.open > iframe {
 		display: block;
 	}
diff --git a/dabblet.html b/dabblet.html
 <!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
 		<section id="lightbox" class="open">
 		    <img src="http://placekitten.com/g/400/650" width=650 height=400 />
 		</section>	
 	</body>
 </html>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
	/**
	* Lea Verou's CSS Lightbox, taken on webplatform.org
	* For redistribution purposes
	* @author Lea Verou <[email protected]>
	*/
	#lightbox {
	visibility: hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: 0;
	height: 0;
	padding: 10px;
	margin: -10px 0 0 -10px;
	background: white;
	box-shadow: 2px 2px 10px rgba(0,0,0,.5);
	}

	#lightbox.closed {
	-webkit-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
	-moz-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
	-o-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
	transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility;
	}

	#lightbox.open {
	visibility: visible;
	width: 640px;
	height: 360px;
	margin: -190px 0 0 -330px;
	box-shadow: 2px 2px 10px rgba(0,0,0,.5), 0 0 0 4000px rgba(0,0,0,.3);

	-webkit-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
	-moz-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
	-o-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
	transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow;
	}

	#lightbox > a { /* Close button */
	visibility: hidden;
	position: absolute;
	right: -.5em;
	top: -.5em;
	width: 1em;
	padding: .3em;
	background: #694D9F;
	border: .2em solid white;
	border-color: hsla(0,0%,100%,.6);
	border-radius: 50%;
	box-shadow: 1px 1px 6px rgba(0,0,0,.5);
	color: white;
	text-shadow: 0 -.1em .1em rgba(0,0,0,.5);
	text-align: center;
	font: bold 200%/1 serif;
	}

	#lightbox.open > a {
	visibility: visible;
	}

	#lightbox > a:hover {
	background: #D02E27;
	}

	#lightbox > iframe {
	width: 100%;
	height: 100%;
	border: 0;
	}

	#lightbox > iframe {
	display: none;
	background: black;
	}

	#lightbox.open > iframe {
	display: block;
	}
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<section id="lightbox" class="open">
	<img src="http://placekitten.com/g/400/650" width=650 height=400 />
	</section>
	</body>
	</html>