~firefox
12 itemsDownload ./*


..
stylish
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
mailorder.html
remoteButter.html
slideshow.html
template.html


firefoxslideshow.html
2 years agoDownloadRawClose


<!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 at openmailbox dot org
©twily.info 2013 - 2017



744 936 visits
... ^ v