Once upon a time... однажды я скачал много много картинок - картин, являющихся произведениями искусства.
И их было так много, что я решил что каждый день можно ставить на свой рабочий стол одну из них... потом я решил это дело автоматизировать :)
Как это работает?
Я создал html страничку с чёрным фоном на котором показывается только одна картинка. Картинка подгоняется под размер окна браузера. Набор картинок называются ***.jpg где *** - номер картинки с ведущими нулями. Эти картинки расположены в каталоге Images, таким образом, что html страница может их загрузить по номеру. Все манипуляции выполнены при помощи JavaScript. Также я добавил одно окно настройки, которое можно открыть используя кнопочку '+ ' в левом верхнем углу окна. И наконец, вся информация о настройках сохраняется при помощи cookies. Кажется примерно так :)
Кстати:
1. Active Desctop в Windows позволяет ставить в качестве картинок на рабочий стол - htmlки.
2. Эта штука разработана для IE, так что возможно в других браузерах оно не работает, но нам оно и не важно :)
Для того чтобы всё заработало надо:
1. Скопировать html код в какой-нибудь html файл на вашем компьютере. (Для этого можно открыть блокнот, сохранить туда скопированный кусок html и сохранить файл как index.html
<html>
<head>
<script>
// global variables
var screenBorder = 50;
var screenX;
var screenY;
var $get;
var minImage = 1;
var maxImage = 5;
var imageIndex = 1;
var loadMode = "Random";
var image = new Image();
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
// save state to cookies
function saveState()
{
createCookie("minImage", minImage, 3650);
createCookie("maxImage", maxImage, 3650);
createCookie("imageIndex", imageIndex, 3650);
createCookie("loadMode", loadMode, 3650);
}
// load state from cookies
function loadState()
{
var tmp = readCookie("minImage");
if (tmp) minImage = parseInt(tmp);
tmp = readCookie("maxImage");
if (tmp) maxImage = parseInt(tmp);
tmp = readCookie("imageIndex");
if (tmp) imageIndex = parseInt(tmp);
tmp = readCookie("loadMode");
if (tmp) loadMode = tmp;
}
function showSetupWindow()
{
loadState();
$get('firstImg').value = minImage;
$get('lastImg').value = maxImage;
if (loadMode == "Random")
$get('randomButton').checked = true;
else
$get('currentButton').checked = true;
$get("setupWindow").style.visibility = "visible";
}
function closeSetupWindow()
{
// TODO: save state from window to variables.
//
minImage = parseInt($get('firstImg').value);
maxImage = parseInt($get('lastImg').value);
if ($get('randomButton').checked === true)
loadMode = "Random";
else
loadMode = "Current";
saveState();
$get("setupWindow").style.visibility = "hidden";
}
function prev()
{
imageIndex--;
if (imageIndex < minImage)
imageIndex = maxImage;
loadImage(imageIndex);
}
function next()
{
imageIndex++;
if (imageIndex > maxImage)
imageIndex = minImage;
loadImage(imageIndex);
}
function bodyLoad()
{
$get = document.getElementById;
screenX = document.body.clientWidth;
screenY = document.body.clientHeight;
loadState();
if (loadMode == "Random")
imageIndex = Math.round(Math.random()*(maxImage-minImage))+minImage;
saveState();
loadImage(imageIndex);
}
function loadImage(imageIndex)
{
var screenX = document.body.clientWidth - 60;
var screenY = document.body.clientHeight - 40;
var num = imageIndex;
if (imageIndex < 10) num = "0" + num;
if (imageIndex < 100) num = "0" + num;
image.onload = function(){
image.style.position = "absolute";
var imageWidth = image.width;
var imageHeight = image.height;
var img = document.getElementById('image1');
img.onload = function()
{
if ((screenX/imageWidth)*imageHeight <= screenY)
{
img.width = screenX;
img.height = (screenX/imageWidth)*imageHeight;
img.style.top = Math.round((screenY - (screenX/imageWidth)*imageHeight)/2 + 20) + "px";
img.style.left = "30px";
}
else
{
img.width = (screenY/imageHeight)*imageWidth;
img.height = screenY;
img.style.top = "40px";
img.style.left = Math.round((screenX - (screenY/imageHeight)*imageWidth) / 2 + 30) + "px";
}
}
img.src = image.src;
}
var desc = document.getElementById('desc1');
image.src = "images/" + num + ".jpg";
}
</script>
</head>
<body bgcolor="#000000" onload="bodyLoad();">
<img id="image1" style="position: absolute; top: 100px; left: 100px;" />
<a style="position: absolute; top: 10px; right: 10px; color: White;" href="http://taburetblog.blogspot.com/2008/03/blog-post.html" target="_blank">Home (taburet)</a>
<input type="button" value="+" onclick="showSetupWindow();" />
<div id="setupWindow" style="visibility: hidden; padding: 10px; overflow: hidden; position: absolute; top: 0px; left: 0px; width: 295px; height: 170px; background: black; border: 2px solid green; color: #FFFFFF;">
<div style="position: absolute; top: 10px; left: 10px;">Первая:</div>
<input id="firstImg" style="position: absolute; top: 10px; left: 100px;" id="firstImage" size="5" style="float: right;" type="text" />
<div style="position: absolute; top: 30px; left: 10px;">Последняя:</div>
<input id="lastImg" style="position: absolute; top: 30px; left: 100px;" id="lastImage" size="5" type="text" />
<input style="position: absolute; top: 60px; left: 10px; width: 150px;" type="button" name="prev" onclick="prev();" value="Предыдущая" />
<input style="position: absolute; top: 90px; left: 10px; width: 150px;" type="button" name="next" onclick="next();"value="Следующая" />
<div style="position: absolute; top: 10px; left: 190px;">Режим:</div>
<div style="position: absolute; top: 40px; left: 210px;">Случайная</div>
<input id="randomButton" style="position: absolute; top: 40px; left: 180px;" type="radio" name="loadMode" value="Random"/>
<div style="position: absolute; top: 60px; left: 210px;">Текущая</div>
<input id="currentButton" style="position: absolute; top: 60px; left: 180px;" type="radio" name="loadMode" value="Current" />
<input style="position: absolute; top: 130px; left: 10px; width: 270px;" type="button" onclick="closeSetupWindow();" value="Сохранить и закрыть" />
</div>
</body>
</html>
2. В каталоге, в который мы сохранили index.html, создать папку Images и записать туда пять (или больше) картинок с именами файлов 001.jpg 002.jpg 003.jpg 004.jpg 005.jpg
Для того чтобы это сделать, я подготовил следующие картинки:
3. Кликнуть правой кнопкой по рабочему столу и установить в качестве фона рабочего стола index.html, который мы создали.
4. Получать удовольствие :)
Чего ещё?
Используя окно настроек (просто кликнув по кнопке '+' в левом верхнем углу рабочего стола) можно изменить количество картинок в вашей коллекции увеличивая свойство Последняя.
Также можно разделить всю коллекцию на некоторые части и загружать только часть картинок используя свойства: Первая и Последняя.
Ещё можно передвигаться по коллекции картинок используя кнопки: Следующая и Предыдущая.
Можно сделать текущую картинку постоянно показываемой используя кнопку "Текущая"
Далее.
Я думаю в будущем можно добавить свойство: цвет фона. Плюс для каждой картинки можно определить файл описания, который может показываться вместе с картинкой - что-то вроде описания произведения искусства или там автора или просто коммент :)
Так же есть мысль сделать отдельный сайт с большим количеством коллекций изображений, таким образом пользователь только скачивает html, и потом лишь выбирает нужную коллекцию картинок, которая скачивается из интернета, по мере необходимости.
А может быть ещё что-нибудь =)
P.S. Ну если есть проблемы, пишите.
