The one issue with Lightbox portfolios is that as you scroll through, there’s no unique URL to appear at the top. So the thousands of art directors (…) who are looking at my site can’t send each other a link.
Until now.
With a few code tweaks, you can now scroll through my portfolio and see a unique url at the top to send off to a friend.
Here are the steps:
- Install Lightbox
- In your header html, paste the following code directly above the HEAD tag. (thanks to Bram.us)
<script type="text/javascript">
// < ![CDATA[
// Automagically load Lightbox on Page Load
// - by Bramus! (http://www.bram.us/)
// Code modded from
// http://www.huddletogether.com/forum/comments.php?
// DiscussionID=1269&page=1#Item_0
function autoFireLightbox() {
//Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
setTimeout(function() {
if(document.location.hash && $(document.location.hash.substr(1)).rel.indexOf('lightbox')!=-1) {
myLightbox.start($(document.location.hash.substr(1)));
}},
250
);
}
Event.observe(window, 'load', autoFireLightbox, false);
// ]]>
</script>
- On your page with images make sure to put an id attribute on every anchor tag that has a lightboxed link, so you might now have:
<a href="foo.jpg" rel="lightbox" id="UniqueName"><img src="foo_thumbnail.jpg"/></a> - In lightbox.js
CHANGE
imageArray.push(new Array(imageLink.getAttribute('href'), stimuli_image_title));- TO
imageArray.push(new Array(imageLink.getAttribute('href'), stimuli_image_title, imageLink.getAttribute('id')));
CHANGE
imageArray.push(new Array(anchor.getAttribute('href'), stimuli_image_title));- TO
imageArray.push(new Array(anchor.getAttribute('href'), stimuli_image_title, imageLink.getAttribute('id')));
FIND the function
changeImage: function(imageNum), and:ADD
document.location.hash=imageArray[activeImage][2];
window.scroll(0,0);- AFTER
imgPreloader.src = imageArray[activeImage][0];
- If you want to be able to drag images to the desktop, you basically have to get in the css. A few simple changes get you most of the way there:
ADD
height: 100px !important;- TO
#stimuli_hoverNav a
ADD
height: 100px !important; top:350px;- TO
#stimuli_hoverNav
Tweak as you see fit.
