Skip to content

Instantly share code, notes, and snippets.

@sergejmueller

sergejmueller/demo.html

Created June 15, 2012 08:10
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save sergejmueller/2935326 to your computer and use it in GitHub Desktop.
Save sergejmueller/2935326 to your computer and use it in GitHub Desktop.
Download ZIP
Fullscreen API Demo. Denkbar für eShops. Lauffähig unter Firefox, Chrome und Safari.
Raw
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Sergej Müller" />
<link href="style.css" rel="stylesheet" />
<title>Fullscreen Demo</title>
</head>
<body>
<div id="wrap">
<a href="http://oi48.tinypic.com/6h26c7.jpg" class="zoom-link">
<img src="http://oi45.tinypic.com/346rdeg.jpg" width="380" height="483" alt="Scarf Garden Eden" />
<span class="zoom-icon"></span>
</a>
</div>
<div id="fullscreen"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://sindresorhus.com/screenfull.js/src/screenfull.js"></script>
<script>
$(function() {
/* Lupe-Button */
$('.zoom-link').live(
'click',
function(e) {
/* Init */
var link = $(this),
screen = $('#fullscreen');
/* Inhalt schreiben */
screen.html(
'<img src="' + link.attr('href') + '" class="zoom-large" />' +
'<a href="" class="zoom-close"></a>'
);
/* Öffnen */
screenfull.request( screen.get(0) );
/* Raus */
e.preventDefault();
}
);
/* Schließen-Button */
$('.zoom-close').live(
'click',
function(e) {
/* Schließen */
screenfull.exit();
/* Raus */
e.preventDefault();
}
);
});
</script>
</body>
</html>
Raw
style.css
/* @group Global */
* {
border: 0;
margin: 0;
padding: 0;
outline: 0;
}
body {
background: #fff;
}
img {
display: inline-block;
}
/* @end */
/* @group Wrap */
#wrap {
width: 380px;
margin: 100px auto;
}
/* @end */
/* @group Zoom-Link */
.zoom-link {
display: block;
position: relative;
transition: opacity 400ms ease;
-moz-transition: opacity 400ms ease;
-webkit-transition: opacity 400ms ease;
}
.zoom-link:hover {
opacity: .6;
}
/* @end */
/* @group Zoom-Icons */
.zoom-icon {
width: 64px;
height: 64px;
right: 0;
bottom: 0;
display: block;
position: absolute;
background: url('data:;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAM1BMVEWCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoLMOqIiAAAAEHRSTlMAENCA8MCgUGCw4EAgkDBwDDzU7gAAAaFJREFUeF7tltuOwyAMRM31EkLr///aXSFX0A0wqdC+dR4NPh3bKUB/pUJxlqucjyd9qJj4XfqpPkk/+Cpr7iKy5rFsuAUwPJfHJlRfvHbGGOf6CCKoZj8FRaJcLIuOB8ifdSzaF2Hp4eXWnVd2aVXA/j2H9CAmyhTwkPw4WxfCdJq65S8JxwQQm/8eqa9bzBhwVIDrQzXSB9LCQqhwey4Bys6rTOJuCZBBpQFAcZUCALGgZhV4AgDys0kWWUCAMPuYnFhDACWzuqjWpgkCSE8G2YM1j+R7qxOAEdhY0sVdgPlXQFr1QOMesMNTaAAcFwCcd9/cDAHn7EOKN/8LsXV7RLYKAdLAad/6CADyOzTQUyysAf6t0tFRUZaAzFV5da3ExamsrgfvddU+4NUXaKzAgODR9eiFEMcOHXomtNs9DTbkY/HQwO+DU9whwqlZZH3XqtClYw9NzptfJcdNmECFgSAh6w3C4qXKOmhEWHTN+kykIKFXNkn2u2RyDQECECZ8CV+Cp10C7RJok2Bpk2BogwB6CAggHxJAPiZ4Zlvr/wFGc0zc/MpkTwAAAABJRU5ErkJggg==');
}
.zoom-close {
top: 2%;
right: 2%;
width: 47px;
height: 47px;
position: absolute;
background: url('data:;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAYAAABzJ5OsAAAC60lEQVR42tXay0tUURzA8dPIGFGhKEqLyFczQVHQNrH/oWTKTYmW9qCglRLZJIYELoOgUqGQdm0jaCkiioJiaI4ioq2CXqbU6MJfX+QIwzDee+6513kMfEZhLsP3DOPMeah6enr8CCGMGB5jGEmsZZDEsL4uhmIcEhFly0/0FbzAb2xCPNjEBqbRiFA24kOIYRoSoGnEENqv+Bp8huyjGTQFHR/HFiRL4kHE12IAkgMJRGzjo1iF5NAqol7jI/gKyTXdccpL/HNIHpkyje+D5KE+t/gzWM/PeLroc4p/CTH0BqexYh+0c7vg4QWbRVGm+BaIoXcIQSFqOYBn2IngZ4OHAbSkx4cxBzEwhFCGT6dliKFeKB2/O4B6/IG4mEM4Nf4c/kJcvIbaQx2WDN8qKj1eD+A8fkJctKXGd0IMfMRhl2/kRcgeuqEc4i/hn0HH4G78QXyBGBpBicMAqrEASROHSpMafg3bhg3fcUS/ZfRozY2i1GUA8xCtCyoTHd7sIRz00q30E4uFMZS5/A18QgeUg1aIhS7reG0c5VCWbkJyEq9NoMIivB3iQ7/veG0SlR7Cb0N8+qW4SwS4Dj1uEP4AklfxWswgfizI+C5IAO5BGajEZD7F34XyoAITEB/mgoi/A2WhHOO5/Khsdwm8j7MOj5dhzDbeanqg3XAJ74QggWqH60oxCvHolueJmdbqEv4QkmIB1Q5zmxKMQLxMzLxOibfR7BL+CJLBImodZpVHMWzYMWizGIkbbAuKgyXUOcznjxludLXZLAN/oH6P8G6IgWVEMrzyBzBgugy0XYCvoyEt/CnEgxVEkRr+1moBrhVhFmJgAxeh0OtjGy+q44fstj7sN52+4T3Eh0V8gBi6XtjbfYW/0Vr4W9yFf7jgJIJEjsJXcDKoAzXJon7UBHmU2YSZfY6ex9VCOkTewhpe4US2ju8bMYWkZXQSU7iMYhTZHd/bC6MKT9Bh+I8THfr6qt0Jli39S2H6D6aBCi5AlfPKAAAAAElFTkSuQmCC') no-repeat;
}
.zoom-large,
.zoom-close {
display: none;
}
/* @end */
/* @group Webkit Fullscreen */
:-webkit-full-screen {
width: 100%;
height: 100%;
text-align: center;
background: #fff;
}
:-webkit-full-screen .zoom-thumb {
width: auto;
height: 100%;
}
:-webkit-full-screen .zoom-large {
height: 100%;
display: inline-block;
}
:-webkit-full-screen .zoom-close {
display: block;
}
/* @end */
/* @group Mozilla Fullscreen */
:-moz-full-screen {
width: 100%;
height: 100%;
text-align: center;
background: #fff;
}
:-moz-full-screen .zoom-thumb {
width: auto;
height: 100%;
}
:-moz-full-screen .zoom-large {
height: 100%;
display: inline-block;
}
:-moz-full-screen .zoom-close {
display: block;
}
/* @end */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment