Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hover preview for linked images on webpage.

Browse Source
This commit is contained in:
ccd0 2015-03-07 22:08:07 -08:00
parent 5b23d36f8b
commit 3ba1ac26fb
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
template.jst
View File

@ -10,24 +10,43 @@ h1 {
text-align: center;
background-color: #eee;
}
img {
img.screenshot {
display: block;
margin: auto;
width: 640px;
max-width: 100%;
height: auto;
}
@media (min-width: 1120px) {
img {
img.screenshot {
float: right;
margin-left: 8px;
}
}
img.hover {
display: none;
}
a:hover + img.hover {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
pointer-events: none;
box-shadow: 5px 5px 20px rgba(0,0,0,0.4);
}
</style>
<link rel="icon" href="src/General/img/icon.gif">
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ohnjgmpcibpbafdlkimncjhflgedgpam">
</head><body>
<%= content.replace('</h1>', '</h1><a href="img/screenshot.png"><img src="img/screenshot.png"></a>') %>
<%=
content
.replace('</h1>', '</h1><a href="img/screenshot.png"><img class="screenshot" src="img/screenshot.png"></a>')
.replace(/(<a href="([^"]+\.png)">.*?<\/a>)/g, '$1<img class="hover" src="$2">')
%>
<script>
var links = document.querySelectorAll('a[href="https://chrome.google.com/webstore/detail/4chan-x/ohnjgmpcibpbafdlkimncjhflgedgpam"]');
for (var i = 0; i < links.length; i++) {