Skip to content

Instantly share code, notes, and snippets.

@timtrueman

timtrueman/LICENSE

Created January 1, 2012 18:25
Show Gist options
  • Save timtrueman/1547981 to your computer and use it in GitHub Desktop.
Save timtrueman/1547981 to your computer and use it in GitHub Desktop.
Download ZIP
Facebook-style superfast, preloading photo viewer
Raw
index.html
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<title>Photos</title>
<style>
*{margin:0;padding:0}
html,code{font:15px/22px arial,sans-serif}
html{background:#fff;color:#222;padding:15px}
#photograph img { border-width: 0.5em; border-style: solid; border-color: #222; -webkit-box-shadow: rgba(34,34,34,0.7) 3px 1px 7px; box-shadow: rgba(34,34,34,0.7) 3px 1px 7px; -moz-box-shadow: 3px 1px 7px rgba(34,34,34,0.7); }
</style>
<p><b>Photography</b> <em>Use the arrow keys (or j/k) to see more photos.</em>
<p id=photography>
<p>Sadly this won't work until you place photos that match up with the photos array in the JavaScript and you'll need jQuery or something like Ender to package up the needed things (e.g. $(), .html(), etc.): Qwery, Bonzo, and Bean will work. If you want to see a live/working example, check out <a href=http://timtrueman.com>http://timtrueman.com</a>
<script type=text/javascript src=photos.js></script>
Raw
LICENSE
Copyright (c) 2011 Tim Trueman @timtrueman
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Raw
photos.js
(function() {
// To see this in action, go to http://timtrueman.com
// Basically, what this does is preload the next three photos when the current photo is changed (and it wraps correctly when it reaches the end, including preloading)
var photos, photography;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
photos = ['<img src="images/1.jpg" width="900" height="600" alt="">',
'<img src="images/2.jpg" width="900" height="600" alt=""/>',
'<img src="images/3.jpg" width="900" height="600" alt="">',
'<img src="images/5.jpg" width="900" height="600" alt="">',
'<img src="images/6.jpg" width="900" height="600" alt="">',
'<img src="images/7.jpg" width="900" height="600" alt="">',
'<img src="images/8.jpg" width="900" height="600" alt="">',
'<img src="images/9.jpg" width="900" height="600" alt="">',
'<img src="images/10.jpg" width="900" height="600" alt="">'];
Array.prototype.shuffle = function() {
return this.sort(function() {
return 0.5 - Math.random();
});
};
photography = function(input) {
var preload, nextPhoto, photoindex, prevPhoto;
photos = photos.shuffle(); // Comment this out if you don't want a random ordering to the photo set
photoindex = Math.floor(Math.random() * photos.length);
$(input).html(photos[photoindex]);
preload = function(arrayOfImages) {
return $(arrayOfImages).each(function() {
return $('<img/>')[0].src = this.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1].replace(/"/g, '');
});
};
prevPhoto = function() {
photoindex -= 1;
if (photoindex < 0) {
photoindex = photos.length - 1;
}
$input).html(photos[photoindex]);
if (photoindex >= 2) {
return preload(photos.slice(photoindex - 2, (photoindex + 1) || 9e9));
} else if (photoindex >= 1) {
return preload(photos.slice(0, 2).concat(photos[photos.length - 1]));
} else if (photoindex >= 0) {
return preload(photos.slice(photos.length - 2, (photos.length - 1 + 1) || 9e9).concat(photos[0]));
} else {
return preload(photos.slice(photos.length - 3, (photos.length - 1 + 1) || 9e9));
}
};
nextPhoto = function() {
photoindex += 1;
if (photoindex >= photos.length) {
photoindex = 0;
}
$(input).html(photos[photoindex]);
if (photoindex <= photos.length - 3) {
return preload(photos.slice(photoindex, (photoindex + 2 + 1) || 9e9));
} else if (photoindex <= photos.length - 2) {
return preload(photos.slice(photos.length - 2, (photos.length - 1 + 1) || 9e9).concat(photos[0]));
} else if (photoindex <= photos.length - 1) {
return preload(photos.slice(0, 2).concat(photos[photos.length - 1]));
} else {
return preload(photos.slice(0, 3));
}
};
return $(document).bind('keydown', __bind(function(event) {
if (event.keyCode === 37 || event.keyCode === 75) {
prevPhoto();
return false;
} else if (event.keyCode === 39 || event.keyCode === 74) {
nextPhoto();
return false;
}
}, this));
};
// Pass in the #id of the element you want to put the image into
photography("#photography");
// You can easily add captions into the photos array or update the code to do captions
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment