Javascript

【Javascript】JavascriptとCSSで実装。MINIMAL LIGHTBOX RESPONSIVE

August 9, 2016
minimal-lightbox

MINIMAL LIGHTBOX RESPONSIVEはjQueryを使用せず、JavascriptとCSSで実装されたレスポンシブライトボックス

CSS

	<style>
		@import 'https://fonts.googleapis.com/css?family=Abel';
		body {
			margin: 0;
			font-family: 'Abel';
		}
		#header  {
			width: 100%;
			height: 200px;
			background-color: #333;
			text-align: center;
			font-size: 20px;
			color: #FFF;
			line-height: 65px;
			text-transform: uppercase;
		}
		#header span {
			font-size: 14px;
		}
		@media(max-width: 520px) {
			#header span {
				font-size: 8px;
			}
		}
		#image {
			width: 100%;
			text-align: center;
		}
		#image img {
			height: auto;
			width: 320px;
			margin: 40px 0px;
		}
		#usage {
			width: 100%;
			text-align: center;
		}
		#usage pre {
			padding: 3px;
		}
		#usage h3 {
			text-transform: uppercase;
		}
		#usage h3 span {
			color: blue;
			font-size: 12px;
		}
		@media(max-width: 530px) {
			#usage pre {
				font-size: 10px;
			}
		}
		@media(max-width: 400px) {
			#usage pre {
				font-size: 8px;
			}
		}
		.download {
			display: inline;
			padding: 10px;
			font-size: 10px;
			background-color: rgba(255, 255, 255, 0.2);
			border: 1px solid rgba(255, 255, 255, 1);
			margin: 0px 2px;
		}
		.download:hover {
			background-color: rgba(255, 255, 255, 0.1);
		}
		#header a {
			color: #FFF;
			text-decoration: none;
		}
		#header a:visited {
			color: #FFF;
		}
	</style>

JS

<script type="text/javascript" src="minimal.lightbox.js"></script>

HTML

<img minimal-lightbox src="img/factory.jpg"/>