fancybox Plugin for jQuery
From fancybox.net: FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
Here I trigger a fancybox to open by code rather than a user click.
HTML
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div id="title-1" class="hidden">
‘Eye Contact’, 2010 exhibition poster
<a href="images/projects/brief-habits/eye-contact/EYE CONTACT.pdf">Download PDF</a>
</div>
<a class="fancybox" rel="eye-contact" href="http://www.flatness.eu/images/projects/Amateurist-network/1.png" data-title-id="title-1"><img src="http://www.flatness.eu/images/projects/brief-habits/image-thumbs/first-eyecontact.png" alt=""><br />Slideshow</a>
<!--eye-contact-->
<a class="fancybox" rel="eye-contact" href="http://www.flatness.eu/images/projects/brief-habits/eye-contact/2Pedro Lasch Naturalisations, 2010.JPG" title="Pedro Lasch <i>Naturalizations workshop at Amateurism conference</i>, 2010
"></a>
<a class="fancybox" rel="eye-contact" href="http://www.flatness.eu/images/projects/brief-habits/eye-contact/Amateurism.JPG" title="Pedro Lasch <i>Naturalizations workshop at Amateurism conference</i>, 2010
"></a>
<a class="fancybox" rel="eye-contact" href="http://www.flatness.eu/images/projects/brief-habits/eye-contact/4Pedro Lasch Naturalisations, 2010.JPG" title="Pedro Lasch <i>Naturalizations workshop at Amateurism conference</i>, 2010
"></a>
<a class="fancybox" rel="eye-contact" href="http://www.flatness.eu/images/projects/brief-habits/eye-contact/conradinline.jpg" title="Film still, Tony Conrad, <i>In Line</i>, 1986
"></a>
CSS
.hidden{
display:none;
}
JavaScript
$(".fancybox").fancybox({
openEffect: 'slideDown',
prevEffect: 'slideUp',
nextEffect: 'slideDown'
});
(function ($, F) {
F.transitions.slideUp = function() {
F.wrap.slideUp();
};
F.transitions.slideDown = function() {
F.wrap.slideDown();
};
}(jQuery, jQuery.fancybox));