-
1. Re: Dreamweaver CC lightbox
Nancy O. Dec 1, 2014 3:21 PM (in response to Deb205)Why not just just use jQuery Fancybox2? It's very easy to set-up. Copy & paste this code into a new, blank document. The code comments will guide you on what to do.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--LATEST JQUERY CORE LIBRARY-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--FANCYBOX plugins-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: silver;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
#wrapper {
width: 90%;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
/**left sidebar**/
aside {
float: left;
width: 25%;
border-right: 1px dotted #999;
min-height: 400px;
padding: 2%
}
/**this styles image container**/
#thumbs {
float: left;
width: 75%
}
#thumbs li {
list-style: none;
float: left;
width: 160px;
margin: 10px 1% 0 1%; /**space between containers**/
}
/**recommend using same size images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
opacity: 0.75;
}
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
content: ".";
clear: left;
font-size: 0px;
line-height: 0;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<aside> Left Sidebar </aside>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Image Viewer</h1>
<!--insert thumbnails with links to full size images below-->
<ul id="thumbs">
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
</ul>
<!--end thumbs-->
</div>
<!--end wrapper-->
<!--FancyBox function code-->
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
</body>
</html>
❄ ☃ ❄
Nancy O.
-
2. Re: Dreamweaver CC lightbox
Deb205 Dec 1, 2014 3:24 PM (in response to Nancy O.)Thanks,
how have you been? Did you enjoy Thanksgiving?
-
3. Re: Dreamweaver CC lightbox
Nancy O. Dec 1, 2014 3:42 PM (in response to Deb205)I did but confess I'm still recovering from the cooking marathon. Next year we're dining out!! I keep telling myself that but it never happens.
Nancy O.


