24 items •
Download ./*
24 items •
Download ./*
firefoxslideshow.html
9 years ago• 4 151
{}
<!DOCTYPE html>
<html>
<head>
<title>Twily's Slideshow</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
html,body { margin: 0; padding: 0; background: #000; }
.slideshow {
position: absolute; top: 0; left: 400px /* 0 */;
width: calc(100% - 400px) /* 100% */; height: 100%; z-index: 1;
background: #000 no-repeat center center; background-size: cover; /* cover || contain */
opacity: 0; transition: opacity 3s ease; /* Image crossfade time */
}
/* Chat Implementation (CSS) begin */
#chat {
border: 0; border-radius: 0;
position: fixed; bottom: 0; left: 0; padding: 1px;
overflow: hidden; width: 400px; height: calc(100% - 2px);
background: #111113; z-index: 9; visibility: hidden;
}
/* Chat Implementation (CSS) end */
</style>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
// Command to generate imagelist (GNU/Linux) [Requires find, sed and vim]
// $ function list() { echo "var filepath=\"file://"$(pwd)"/\";" && find "$1" -maxdepth 1 -type f -regex ".*\.\(jpg\|jpeg\|png\)" -exec echo " "\"{}\", \; | sed "s/%/%25/g" | sed "s/\.\///g" | vim -; }; list .
//
// If filenames (or the path) contain '%' they will need to be replaced by '%25' (Eg.: ..%25.. to ..%2525..)
// (The command above does this automatically using sed)
var imagelist=[
"wallhaven-110491.jpg",
"wallhaven-123187.jpg",
"wallhaven-134400.jpg",
"wallhaven-137115.jpg",
"wallhaven-149753.jpg",
"wallhaven-20260.jpg",
"wallhaven-26620.jpg",
"wallhaven-31652.jpg",
"wallhaven-50083.jpg",
"wallhaven-51234.jpg",
"wallhaven-54308.jpg",
"wallhaven-6463.jpg",
"wallhaven-65157.jpg",
"wallhaven-6688.jpg",
"wallhaven-69760.jpg",
"wallhaven-72147.jpg",
"wallhaven-82896.jpg",
"wallhaven-8489.jpg",
"wallhaven-86566.jpg",
];
var wTimer=5; // Seconds before next image
var wOpacity=100; // 0 (Transparent) - 100 (Opaque)
var filepath="file:///home/guest/Pictures/Wallpapers/wallhaven/"; // Path to find images (filepath+imagelist[x])
function init() {
nextImage(); // Show first image
if(imagelist.length>1) setInterval("nextImage();",wTimer*1000); // Run the slideshow
}
var wshow="img1",whide="img2",newimg,curimg;
function nextImage() {
curimg=newimg;
while(newimg==curimg) newimg=Math.floor(Math.random()*imagelist.length); // Generate next random image
(new Image()).src=filepath+imagelist[newimg]; // Preload next image
whide=[wshow,wshow=whide][0]; // Swap values
$(wshow).style.backgroundImage="url('"+filepath+imagelist[curimg]+"')"; // Show current image
$(wshow).style.opacity=wOpacity/100;
$(whide).style.opacity=0;
if(curimg==null) nextImage(); // Buffer one image ahead
}
</script>
</head>
<body onload="init();">
<div id="img1" class="slideshow"></div>
<div id="img2" class="slideshow"></div>
<!-- Chat Implementation (JS) begin -->
<script type="text/javascript">
var lt,l=true;
function createChat() {
var i=document.createElement("iframe");
i.id="chat";
i.src="http://twily.info/chat/";
i.scrolling="no";
i.onload=function() {
i.style.visibility="visible";
if(l) {
clearTimeout(lt);
lt=setTimeout(function() { i.src=i.src; l=false; },1000);
}
};
document.body.appendChild(i);
}
if(window.addEventListener) window.addEventListener("load",createChat,false);
else if(window.attachEvent) window.attachEvent("onload",createChat);
else window.onload=createChat;
</script>
<!-- Chat Implementation (JS) end -->
</body>
</html>
Top
©twily.info 2013 - 2024
2 176 207 visits