Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
lightbox script for full screen overlay
hello forum,
i’m looking for a way to make a lightbox that overlays the website content fullscreen and automatically adjust it if the browser window resizes.
if anybody has realized something similar and could support me with tips and tricks (or just could point me to a jquery plugin) i would greatly appreciate.
thanks, christoph
Offline
#2 2012-06-29 12:26:01
- mmelon
- Member
- Registered: 2006-03-02
- Posts: 95
Re: lightbox script for full screen overlay
doesn’t fancybox do it? the free version before the commercial (2?) release?
Offline
Re: lightbox script for full screen overlay
Offline
Re: lightbox script for full screen overlay
hi joe,
thanks for your reply. very interesting script indeed. but i’m looking for a lightbox script overlaying my content. i’ll see if i can style fancybox to my needs as it has an option to fill the screen (thanks mmelon).
Offline
Re: lightbox script for full screen overlay
There is a hack for FancyBox 1 and a beta plug-in for Fancybox 2. I use Fancybox but haven’t attempted to use either of these, they both sound like hard work. If you don’t mind coughing up a couple of bucks, the latest version of Galleria can probably do what you want, Fullscreen and Folio themes for instance. Galleria supports native full screen too in browsers that have it.
Offline
Re: lightbox script for full screen overlay
hi joe,
galleria folio theme looks good. it will need some styling, but does what i want. the only drawback is native fullscreen (which doesn’t worked for me in the demo on chrome 15). i don’t like the look of the native mode …
however, very helpful hints. thanks a lot.
Offline
Re: lightbox script for full screen overlay
I’ve done this with jquery anystretch (a fork of backstretch) and a div overlay that you make fill the whole screen. Grab the zip from github and then save the code below as an html file in that folder for a proof of concept:
<!doctype html>
<html lang="en">
<head>
<title>jQuery Anystretch fullscreen overlay</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Just a test page to show off some CSS gubbins">
<meta name="author" content="Elliot Jay Stocks">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" media="screen">
* { margin:0; padding:0; }
body { background:#ccc; color:#fff; font:1em/1.4em Georgia, 'Times New Roman', serif; }
h1, div + p { color:#333; text-align:center; }
h1 { line-height:1.2em; padding:5% 20% 0 20%; }
div + p { padding:0 20% 5% 20%; }
h2 { font-size:1.5em; line-height:1.2em; }
h2, p { padding:0.5em 0; }
a { border-bottom:1px solid #333; color:#333; text-decoration:none; }
a:hover { background:#fff; }
.launcher {
float:left;
margin: 50px;
display:block;
overflow:hidden;
}
.launcher img {
cursor: pointer;
}
#fullscreen {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: red;
z-index: 200;
}
#close_fullscreen {
position: absolute;
top: 20px;
right: 20px;
padding: 6px 10px;
line-height: 1em;
text-align: center;
color: #000;
background: #fff;
text-decoration: none;
border-bottom: 0;
cursor: pointer;
}
</style>
</head>
<body>
<figure class="launcher">
<img src="img01.jpg" width="150" height="100" alt="launcher image">
<figcaption>Image one</figcaption>
</figure>
<figure class="launcher">
<img src="img02.jpg" width="150" height="100" alt="launcher image">
<figcaption>Image two</figcaption>
</figure>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../jquery.anystretch.min.js"></script>
<script>
// append container
$('body').append('<div id="fullscreen"><a id="close_fullscreen">Close</a><span class="caption"></span></div>');
var $fullscreen = $('#fullscreen');
$('.launcher').click(function() {
var $this = $(this),
$caption = $this.find('figcaption').text(),
$img_src = $this.find('img').attr('src');
$fullscreen.fadeIn().anystretch($img_src,{elPosition: 'absolute'});
$fullscreen.find('.caption').text($caption);
});
$('#close_fullscreen').click(function() {
$fullscreen.fadeOut();
});
</script>
</body>
</html>Last edited by jakob (2012-06-29 16:43:42)
TXP Builders – finely-crafted code, design and txp
Offline
Re: lightbox script for full screen overlay
hi jakob,
thanks for your reply and for sharing your code. i checked it and soon started to realize that i wasn’t precise enough with my question: i need a solution that doesn’t crop the image and leaves the aspect ratio untouched (site is for an art gallery).
of course that means it can’t fill the whole screen (as anystretch does perfectly). so i have to correct myself: what i’m looking for is a script that sets the height fullscreen and the width according to the given aspect ratio.
a perfect example can be found here. just click on the image and see the “fullscreen” lightbox pop up.
i’m sure it can be done with a customized gallery script. just wanted to ask here first in case somebody did already invent the wheel …
even though anystretch is not the perfect fit in this case, it’s a very good script that opens up new possibilities. thanks again for that.
christoph
Last edited by totoff (2012-06-29 21:23:01)
Offline
Re: lightbox script for full screen overlay
Probably a tweak to the plugin code would solve that – in fact a quick look at github’s fork graph shows there’s a fork of anystretch with the additional attributes fitWidth and fitHeight. I’ve not tried it but maybe that solve it for you…
EDIT: I was mistaken, this is a fork of backstretch (which is body tag only) not of anystretch. You could probably carry over the principle to anystretch, though.
Last edited by jakob (2012-06-29 22:04:18)
TXP Builders – finely-crafted code, design and txp
Offline
Re: lightbox script for full screen overlay
I had a go at trying this out. Here’s a first attempt at a merge. Try demo_fullscreen_fit.html in the attached zip.
TXP Builders – finely-crafted code, design and txp
Offline
Re: lightbox script for full screen overlay
hi jakob,
very short after the em final: thanks a lot, that’s that’s extraordinary kind of you. i gave it a try on my machine and it works perfect. tomorrow i’ll implement it online and report back.
again, many thanks!
Offline
Re: lightbox script for full screen overlay
hi,
very sorry to report back that the script didn’t work for me. for some weird reaseon the overlay image didn’t fit to the viewport, when the browser window was resized (although this worked offline with the included index.html).
however, i bought a fancybox licence and it does what i need. here is my code
// fancybox
$(".fancybox").fancybox({
helpers : {
overlay : {
opacity: 0.2,
css : {
'background-color' : '#000'
}
}
},
padding:0,
fitToView:true,
topRatio:0,
closeBtn:true,
margin:0,
loop:true,
fixed:true,
nextEffect: 'fade',
prevEffect: 'fade'
}); // fancyboxwith some additional amendments to the css file it looks really good now :-)
many thanks again for setting me on the right track and of course for sharing your code and hacking it individually for me.
christoph
Offline