Skip to content

Instantly share code, notes, and snippets.

@hjanuschka

hjanuschka/gist:7f65946e1eabb2b3f4983586e68b392c

Created February 24, 2017 19:14
Show Gist options
  • Save hjanuschka/7f65946e1eabb2b3f4983586e68b392c to your computer and use it in GitHub Desktop.
Save hjanuschka/7f65946e1eabb2b3f4983586e68b392c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>fastlane/snapshot</title>
<meta charset="UTF-8">
<style type="text/css">
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.language {
}
.deviceName {
display: block;
font-size: 30px;
padding-bottom: 24px;
padding-top: 45px;
}
.screenshot {
cursor: pointer;
border: 1px #EEE solid;
z-index: 0;
}
th {
text-align: left;
}
td {
text-align: center;
min-width: 200px;
}
#overlay {
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.8);
z-index:5;
width:100%;
height:100%;
display:none;
cursor: zoom-out;
text-align: center;
}
#imageDisplay {
height: auto;
width: auto;
z-index: 10;
cursor: pointer;
}
#imageInfo {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
color: white;
margin: 20px;
padding: 10px;
position: absolute;
right: 0;
top: 0;
width: 250px;
z-index: -1;
}
#imageInfo:hover {
z-index: 20;
}
</style>
</head>
<body>
<h1 class="language">en-US</h1>
<hr>
<table>
<tr>
<th colspan="4">
<span class="deviceName">iPad</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPadAir-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadAir-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad"
data-counter="1" />
</a>
</td>
<td>
<a href="./en-US/iPadAir-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadAir-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad"
data-counter="2" />
</a>
</td>
<td>
<a href="./en-US/iPadAir-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadAir-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad"
data-counter="3" />
</a>
</td>
<td>
<a href="./en-US/iPadAir-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadAir-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad"
data-counter="4" />
</a>
</td>
</tr>
<tr>
<th colspan="4">
<span class="deviceName">iPad Air Pro (12.9 inch)</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPadPro(12.9-inch)-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(12.9-inch)-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (12.9 inch)"
data-counter="5" />
</a>
</td>
<td>
<a href="./en-US/iPadPro(12.9-inch)-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(12.9-inch)-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (12.9 inch)"
data-counter="6" />
</a>
</td>
<td>
<a href="./en-US/iPadPro(12.9-inch)-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(12.9-inch)-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (12.9 inch)"
data-counter="7" />
</a>
</td>
<td>
<a href="./en-US/iPadPro(12.9-inch)-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(12.9-inch)-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (12.9 inch)"
data-counter="8" />
</a>
</td>
</tr>
<tr>
<th colspan="4">
<span class="deviceName">iPad Air Pro (9.7 inch)</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPadPro(9.7-inch)-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(9.7-inch)-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (9.7 inch)"
data-counter="9" />
</a>
</td>
<td>
<a href="./en-US/iPadPro(9.7-inch)-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(9.7-inch)-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (9.7 inch)"
data-counter="10" />
</a>
</td>
<td>
<a href="./en-US/iPadPro(9.7-inch)-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(9.7-inch)-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (9.7 inch)"
data-counter="11" />
</a>
</td>
<td>
<a href="./en-US/iPadPro(9.7-inch)-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPadPro(9.7-inch)-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPad Air Pro (9.7 inch)"
data-counter="12" />
</a>
</td>
</tr>
<tr>
<th colspan="4">
<span class="deviceName">iPhone5 (4-Inch)</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPhone5-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone5-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone5 (4-Inch)"
data-counter="13" />
</a>
</td>
<td>
<a href="./en-US/iPhone5-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone5-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone5 (4-Inch)"
data-counter="14" />
</a>
</td>
<td>
<a href="./en-US/iPhone5-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone5-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone5 (4-Inch)"
data-counter="15" />
</a>
</td>
<td>
<a href="./en-US/iPhone5-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone5-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone5 (4-Inch)"
data-counter="16" />
</a>
</td>
</tr>
<tr>
<th colspan="4">
<span class="deviceName">iPhone6 (4.7-Inch)</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPhone6-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6 (4.7-Inch)"
data-counter="17" />
</a>
</td>
<td>
<a href="./en-US/iPhone6-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6 (4.7-Inch)"
data-counter="18" />
</a>
</td>
<td>
<a href="./en-US/iPhone6-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6 (4.7-Inch)"
data-counter="19" />
</a>
</td>
<td>
<a href="./en-US/iPhone6-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6 (4.7-Inch)"
data-counter="20" />
</a>
</td>
</tr>
<tr>
<th colspan="4">
<span class="deviceName">iPhone6Plus (5.5-Inch)</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPhone6Plus-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6Plus-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6Plus (5.5-Inch)"
data-counter="21" />
</a>
</td>
<td>
<a href="./en-US/iPhone6Plus-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6Plus-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6Plus (5.5-Inch)"
data-counter="22" />
</a>
</td>
<td>
<a href="./en-US/iPhone6Plus-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6Plus-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6Plus (5.5-Inch)"
data-counter="23" />
</a>
</td>
<td>
<a href="./en-US/iPhone6Plus-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone6Plus-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone6Plus (5.5-Inch)"
data-counter="24" />
</a>
</td>
</tr>
<tr>
<th colspan="4">
<span class="deviceName">iPhone7 (4.7-Inch)</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPhone7-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7 (4.7-Inch)"
data-counter="25" />
</a>
</td>
<td>
<a href="./en-US/iPhone7-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7 (4.7-Inch)"
data-counter="26" />
</a>
</td>
<td>
<a href="./en-US/iPhone7-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7 (4.7-Inch)"
data-counter="27" />
</a>
</td>
<td>
<a href="./en-US/iPhone7-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7 (4.7-Inch)"
data-counter="28" />
</a>
</td>
</tr>
<tr>
<th colspan="4">
<span class="deviceName">iPhone7Plus (5.5-Inch)</span>
</th>
</tr>
<tr>
<td>
<a href="./en-US/iPhone7Plus-0Launch-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7Plus-0Launch-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7Plus (5.5-Inch)"
data-counter="29" />
</a>
</td>
<td>
<a href="./en-US/iPhone7Plus-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7Plus-1LandscapeLeft-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7Plus (5.5-Inch)"
data-counter="30" />
</a>
</td>
<td>
<a href="./en-US/iPhone7Plus-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7Plus-2LandscapeRight-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7Plus (5.5-Inch)"
data-counter="31" />
</a>
</td>
<td>
<a href="./en-US/iPhone7Plus-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png" target="_blank" class="screenshotLink">
<img class="screenshot"
src="./en-US/iPhone7Plus-3Portrait-d41d8cd98f00b204e9800998ecf8427e.png"
style="width: 100%;"
alt="en-US iPhone7Plus (5.5-Inch)"
data-counter="32" />
</a>
</td>
</tr>
</table>
<div id="overlay">
<img id="imageDisplay" src="" alt="" />
<div id="imageInfo"></div>
</div>
<script type="text/javascript">
var overlay = document.getElementById('overlay');
var imageDisplay = document.getElementById('imageDisplay');
var imageInfo = document.getElementById('imageInfo');
var screenshotLink = document.getElementsByClassName('screenshotLink');
function doClick(el) {
if (document.createEvent) {
var evObj = document.createEvent('MouseEvents', true);
evObj.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evObj);
} else if (document.createEventObject) { //IE
var evObj = document.createEventObject();
el.fireEvent('onclick', evObj);
}
}
for (index = 0; index < screenshotLink.length; ++index) {
screenshotLink[index].addEventListener('click', function(e) {
e.preventDefault();
var img = e.target;
if (e.target.tagName == 'A') {
img = e.target.children[0];
}
// beautify
var tmpImg = new Image();
tmpImg.src = img.src;
imageDisplay.style.height = 'auto';
imageDisplay.style.width = 'auto';
if (window.innerHeight < tmpImg.height) {
imageDisplay.style.height = document.documentElement.clientHeight+'px';
} else if (window.innerWidth < tmpImg.width) {
imageDisplay.style.width = document.documentElement.clientWidth;+'px';
} else {
imageDisplay.style.paddingTop = parseInt((window.innerHeight - tmpImg.height) / 2)+'px';
}
imageDisplay.src = img.src;
imageDisplay.alt = img.alt;
imageDisplay.dataset.counter = img.dataset.counter;
imageInfo.innerHTML = '<h3>'+img.alt+'</h3>';
imageInfo.innerHTML += decodeURI(img.src.split("/").pop());
imageInfo.innerHTML += '<br />'+tmpImg.height+'&times;'+tmpImg.width+'px';
overlay.style.display = "block";
});
}
imageDisplay.addEventListener('click', function(e) {
e.stopPropagation(); // !
overlay.style.display = "none";
img_counter = parseInt(e.target.dataset.counter) + 1;
try {
link = document.body.querySelector('img[data-counter="'+img_counter+'"]').parentNode;
} catch (e) {
try {
link = document.body.querySelector('img[data-counter="0"]').parentNode;
} catch (e) {
return false;
}
}
doClick(link);
});
overlay.addEventListener('click', function(e) {
overlay.style.display = "none";
})
function keyPressed(e) {
e = e || window.event;
var charCode = e.keyCode || e.which;
switch(charCode) {
case 27: // Esc
overlay.style.display = "none";
break;
case 34: // right-arrow, Page Down, keypad right, ...
case 39:
case 54:
case 102:
e.preventDefault();
doClick(imageDisplay);
break;
case 33: // left-arrow, Page Up, keypad right, ...
case 37:
case 52:
case 100:
e.preventDefault();
document.getElementById('imageDisplay').dataset.counter -= 2; // hacky
doClick(imageDisplay);
break;
}
};
document.body.addEventListener('keydown', keyPressed);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment