Skip to content

Commit

Permalink
First commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
Kristoffer Jelbring committed Sep 20, 2012
0 parents commit 5193354
Show file tree
Hide file tree
Showing 58 changed files with 3,910 additions and 0 deletions.
156 changes: 156 additions & 0 deletions demos/demo1.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
body {
background:#333;
padding:20px;
color:#fff;
font-size:12px;
font-family:'helvetica neue',helvetica,sans-serif;
}

h1 {
letter-spacing:3px;
text-transform:uppercase;
font-size:1.2em;
margin:10px 0;
}

#main {
width:986px;
margin:0 auto;
}

#images {
display:none;
}

.panel {
float:left;
}

ul.exposureThumbs {
background:#111;
border:12px solid #111;
border-right:none;
padding:0;
margin:0;
list-style-type:none;
}

ul.exposureThumbs li {
margin:0 0 12px 0;
padding:0;
text-align:center;
display:none;
}

ul.exposureThumbs li img {
cursor:pointer;
}

ul.exposureThumbs li.last {
margin:0;
}

.exposureTarget {
width:800px;
height:600px;
background-color:#111;
background-image:url(res/loader.gif);
background-repeat:no-repeat;
background-position:center center;
float:left;
padding:0;
margin:0;
border:12px solid #111;
position:relative;
overflow:hidden;
}

.exposureWrapper {
position:absolute;
top:0;
left:0;
}

.exposureWrapper img {
cursor:pointer;
position:absolute;
top:0;
left:0;
}

.exposureLoaded {
background-image:none;
}

.exposureData {
position:absolute;
left:0;
right:0;
bottom:0;
height:60px;
padding:7px;
background-image:url(res/veil.png);
color:#fff;
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:16px;
font-weight:bold;
}

/* In this demo we are using thumbs with fixed size */
ul.exposureThumbs li {
width:150px;
height:79px;
}

.exposureSlideshowControls a,
.exposureControls span,
.exposureControls a {
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:11px;
padding:8px;
background-color:#555;
display:block;
float:left;
}

.exposureSlideshowControls a {
float:right;
}

.exposureSlideshowControls a,
.exposureControls a {
color:#ccc;
text-decoration:none;
outline:none;
}

.exposureSlideshowControls a:active,
.exposureSlideshowControls a:hover,
.exposureControls a:active,
.exposureControls a:hover {
background-color:#444;
color:#ddd;
}

.exposurePaging .active {
color:#fff;
background-color:#111;
}

.clear {
clear:both;
}

p.info {
margin:40px auto;
text-align:center;
width:600px;
}

p.info a {
color:#006fc0;
}

p.info a:hover, p.info a:active {
color:#0084e7;
}
76 changes: 76 additions & 0 deletions demos/demo1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Exposure - Demo 1</title>
<link href="demo1.css?v=1.0" type="text/css" rel="stylesheet" />
<script src="res/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.exposure.js?v=1.0" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var gallery = $('#images');
gallery.exposure({controlsTarget : '#controls',
controls : { prevNext : true, pageNumbers : true, firstLast : false },
visiblePages : 2,
slideshowControlsTarget : '#slideshow',
onThumb : function(thumb) {
var li = thumb.parents('li');
var fadeTo = li.hasClass($.exposure.activeThumbClass) ? 1 : 0.3;

thumb.css({display : 'none', opacity : fadeTo}).stop().fadeIn(200);

thumb.hover(function() {
thumb.fadeTo('fast',1);
}, function() {
li.not('.' + $.exposure.activeThumbClass).children('img').fadeTo('fast', 0.3);
});
},
onImage : function(image, imageData, thumb) {
// Fade out the previous image.
image.siblings('.' + $.exposure.lastImageClass).stop().fadeOut(500, function() {
$(this).remove();
});

// Fade in the current image.
image.hide().stop().fadeIn(1000);

// Fade in selected thumbnail (and fade out others).
if (gallery.showThumbs && thumb && thumb.length) {
thumb.parents('li').siblings().children('img.' + $.exposure.selectedImageClass).stop().fadeTo(200, 0.3, function() { $(this).removeClass($.exposure.selectedImageClass); });
thumb.fadeTo('fast', 1).addClass($.exposure.selectedImageClass);
}
},
onPageChanged : function() {
// Fade in thumbnails on current page.
gallery.find('li.' + $.exposure.currentThumbClass).hide().stop().fadeIn('fast');
}
});
});
</script>
</head>
<body>
<div id="main">
<h1>Exposure - Demo 1</h1>
<div class="panel">
<ul id="images">
<li><a href="slides/IMG_2198.jpg"><img src="thumbs/IMG_2198.jpg" title="Home made" /></a></li>
<li><a href="slides/IMG_2339.jpg"><img src="thumbs/IMG_2339.jpg" title="Chocolate" /></a></li>
<li><a href="slides/IMG_2446.jpg"><img src="thumbs/IMG_2446.jpg" title="Love birds" /></a></li>
<li><a href="slides/IMG_2623.jpg"><img src="thumbs/IMG_2623.jpg" title="Blue" /></a></li>
<li><a href="slides/IMG_5077.jpeg"><img src="thumbs/IMG_5077.jpeg" title="White" /></a></li>
<li><a href="slides/IMG_5177.jpeg"><img src="thumbs/IMG_5177.jpeg" title="Yellow on blue" /></a></li>
<li><a href="slides/IMG_5278.jpeg"><img src="thumbs/IMG_5278.jpeg" title="Heat" /></a></li>
<li><a href="slides/IMG_5324.jpeg"><img src="thumbs/IMG_5324.jpeg" title="Cold" /></a></li>
<li><a href="slides/IMG_5650.jpeg"><img src="thumbs/IMG_5650.jpeg" title="Homes" /></a></li>
<li><a href="slides/IMG_9006.jpg"><img src="thumbs/IMG_9006.jpg" title="Ace" /></a></li>
</ul>
<div id="controls"></div>
<div class="clear"></div>
</div>
<div id="exposure"></div>
<div class="clear"></div>
<div id="slideshow"></div>
</div>
<p class="info"><a href="demo2.html?v=1.0">View next demo</a></p>
<p class="info">This is a demo showing the <a href="http://exposure.blogocracy.org/">Exposure plugin for jQuery</a>. With Exposure you can give your gallery any look you want, this is just an example. <a href="http://exposureforjquery.wordpress.com/download/">Download Exposure</a> or <a href="http://exposure.blogocracy.org/">learn more</a>.</p>
</body>
</html>
96 changes: 96 additions & 0 deletions demos/demo2.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
body {
background:#333;
padding:20px;
color:#fff;
font-size:12px;
font-family:'helvetica neue',helvetica,sans-serif;
}

h1 {
letter-spacing:3px;
text-transform:uppercase;
font-size:1.2em;
margin:10px 0;
}

#main {
width:824px;
margin:0 auto;
}

.exposureTarget {
width:800px;
height:600px;
background-color:#111;
background-image:url(res/loader.gif);
background-repeat:no-repeat;
background-position:center center;
float:left;
padding:0;
margin:0;
border:12px solid #111;
position:relative;
overflow:hidden;
}

.exposureWrapper {
position:absolute;
top:0;
left:0;
}

.exposureWrapper img {
cursor:pointer;
position:absolute;
top:0;
left:0;
}

.exposureLoaded {
background-image:none;
}

.exposureControls span,
.exposureControls a {
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:12px;
padding:8px;
background-color:#555;
display:block;
float:left;
}

.exposureControls a {
color:#ccc;
text-decoration:none;
outline:none;
}

.exposureControls a:active,
.exposureControls a:hover {
background-color:#444;
color:#ddd;
}

.exposurePaging .active {
color:#fff;
background-color:#111;
}

.clear {
clear:both;
}

p.info {
margin:40px auto;
text-align:center;
width:600px;
}

p.info a {
color:#006fc0;
}

p.info a:hover, p.info a:active {
color:#0084e7;
}
49 changes: 49 additions & 0 deletions demos/demo2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!-- saved from url=(0014)about:internet -->
<head>
<title>Exposure - Demo 2</title>
<link href="demo2.css?v=1.0" type="text/css" rel="stylesheet" />
<script src="res/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.exposure.js?v=1.0" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var gallery = $('#images');
gallery.exposure({controlsTarget : '#controls',
showThumbs : false,
showCaptions : false,
showExtraData : false,
onImage : function(image, imageData, thumb) {
gallery.wrapper.find('.exposureLastImage').stop().fadeOut(500, function() {
$(this).remove();
});
image.hide().stop().fadeIn(1000);
}
});
});
</script>
</head>
<body>
<div id="main">
<h1>Exposure - Demo 2</h1>
<ul id="images">
<li><a href="slides/IMG_2198.jpg" title="Home made"></a></li>
<li><a href="slides/IMG_2339.jpg" title="Chocolate"></a></li>
<li><a href="slides/IMG_2446.jpg" title="Love birds"></a></li>
<li><a href="slides/IMG_2623.jpg" title="Blue"></a></li>
<li><a href="slides/IMG_5077.jpeg" title="White"></a></li>
<li><a href="slides/IMG_5177.jpeg" title="Yellow on blue"></a></li>
<li><a href="slides/IMG_5278.jpeg" title="Heat"></a></li>
<li><a href="slides/IMG_5324.jpeg" title="Cold"></a></li>
<li><a href="slides/IMG_5650.jpeg" title="Homes"></a></li>
<li><a href="slides/IMG_9006.jpg" title="Ace"></a></li>
</ul>
<div id="exposure"></div>
<div class="clear"></div>
<div id="controls"></div>
<div class="clear"></div>
</div>
<p class="info"><a href="demo1.html?v=1.0">View previous demo</a> | <a href="demo3.html?v=1.0">View next demo</a></p>
<p class="info">This is a demo showing the <a href="http://exposure.blogocracy.org/">Exposure plugin for jQuery</a>. With Exposure you can give your gallery any look you want, this is just an example. <a href="http://exposureforjquery.wordpress.com/download/">Download Exposure</a> or <a href="http://exposure.blogocracy.org/">learn more</a>.</p>
</body>
</html>
Loading

0 comments on commit 5193354

Please sign in to comment.