Скрипт для души и смены фона.


как сменить фон на сайте

Простая реализация меняющего фона сайта на jquery или смена фоновых заставок на блоге .Плавное перетекание одного изображения в другое с настройкой по времени.Как сделать и установить себе на сайт или блог такое чудо можно узнать прочитав данный пост до конца.Вполне подойдёт для личного фотоблога для демонстрации наиболее запавших в душу фотоснимков.


Как сделать меняющийся фон сайта.


Установить скрипт для смены изображений не сложно и в принципе то и особо стараться не придётся.Всё что от вас потребуется это скопировать скрипт целиком и установить в любой гаджет поддерживающий НТМЛ, предварительно добавив адрес изображений в соответствующие поле.Гаджет HTML для этих целей более практичен,так как в дальнейшем позволит быстро найти и поменять одно изображение на другое.

Скрипт для смены фона блога или сайта.


<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8 http://v-gol.ru
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

<script>
//<![CDATA[
var images = [
"урл фото",
"урл фото",
"урл фото",
"урл фото",
"урл фото",
];

$(images).each(function(){
$('<img/>')[0].src = this;
});
var index = 0;
$.backstretch(images[index], {speed: 1000});
var slideshow = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
//]]>
</script>

Смотреть ещё

Оформление блоков для кода
Слайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог


скрипт для смены фона блога или сайта.


Стоит запомнить,что наличие больших объёмов медиа файлов затрудняют загрузку блога и не ленитесь уменьшать вес каждого загружаемого фото.Сделать это не сложно при помощи онлайн-сервисов для изменения размеров.Хотя бы  tinyjpg  он абсолютно бесплатен и прост в использовании.Да и не стоит забывать,что данный гаджет по смене фона на блоге работает на jquery и следует убедиться,что скрипт такого вида присутствует в шаблоне блога.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></script>

Отправить комментарий