Textpattern Forum

You are not logged in. Register | Login | Help

#1 2012-06-29 11:08:32

totoff
Member
From: Cologne, Germany
Registered: 2011-04-04
Posts: 145
Website

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: 64

Re: lightbox script for full screen overlay

doesn’t fancybox do it? the free version before the commercial (2?) release?

Offline

#3 2012-06-29 12:53:48

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 477
Website

Re: lightbox script for full screen overlay

Offline

#4 2012-06-29 12:59:03

totoff
Member
From: Cologne, Germany
Registered: 2011-04-04
Posts: 145
Website

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

#5 2012-06-29 13:48:08

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 477
Website

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

#6 2012-06-29 14:00:38

totoff
Member
From: Cologne, Germany
Registered: 2011-04-04
Posts: 145
Website

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

#7 2012-06-29 16:43:07

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 1,943
Website

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

#8 2012-06-29 20:17:54

totoff
Member
From: Cologne, Germany
Registered: 2011-04-04
Posts: 145
Website

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

#9 2012-06-29 21:48:25

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 1,943
Website

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

#10 2012-07-01 10:54:51

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 1,943
Website

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

Board footer

Powered by FluxBB