Делаем автоматическую смену фона сайта без перезагрузки

11071
Это мой первый пост, так что прошу сильно не пинать.
Расскажу я о том, как сделать автоматическую смену фона сайта, БЕЗ перезагрузки страницы.
Смена будет происходить плавно, с заданным интервалом.
Ну, начнем.
Этот код, вставляем в файл templates/_default_/template.php после <body>:
Код PHP:
<img  src="" alt="background" id="bg" style="display:none" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" class="noprint">
	var aImages = new Array();
	var aURL = new Array();
	var aArtists = new Array();
	var iPrev = -1;
	var iRnd = -1;
	
	aImages[0] = "templates/_default_/images/bg/bg.jpg";
	aImages[1] = "templates/_default_/images/bg/bg1.jpg";
	aImages[2] = "templates/_default_/images/bg/bg2.jpg";
	aImages[3] = "templates/_default_/images/bg/bg3.jpg";
		
	


	$(document).ready(function() {
	
		
		$("img#bg").load(function()
			{
				
				$("img#bg").fadeTo(2000,1);
				
						
				
		    	setTimeout(function() 
			    	{
			    		$("#image_description").animate({right: '-=150'}, 1000);
			    		$("img#bg").fadeOut(2000);
			    		
			    		
			    		setTimeout(LoadImages,2500);
			    	}
			    	,30000);
			}			
		)
	
		
		setTimeout(LoadImages,1000);
		
    });

    function LoadImage(iNr)
	{
	
		$("img#bg").attr("src", aImages[iNr]);
      
                        	
    };
    
    function LoadImages()
    {
    	
    	/* Select a random image number and make sure this is not equal to the previous image */
    	while(iPrev == iRnd)
    	{
    		iRnd = Math.floor(Math.random()*aImages.length);
    	}
    	
    	/* Show the selected image */
    	LoadImage(iRnd);
    	
    	iPrev = iRnd;
    	
    };
</script> 
Ссылки на картинки, естественно, меняем под себя.

А этот в templates/_default_/css/style.css:
Код PHP:
img#bg {
    /* Stretch background */
        position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:-3;
}


Демо-версия
Красивое слайд-шоу на главной странице(в модуле "Добро пожаловать")
Теги: фон, jquery, background
Комментарии (25)
Марат 6 октября 2011 в 02:19 +2
+
Молодец! Прикольно.
abasia 6 октября 2011 в 02:23 0
Интересно получилось+
джин 6 октября 2011 в 10:46 0
Полезно.
Alexneva 6 октября 2011 в 14:06 0
Интересно! Не встречал такого!
Александр 6 октября 2011 в 14:15 0
У тебя на демо прописанно для загрузки 4 картинки
Код PHP:
aImages[0] = "templates/_default_/images/bg/bg.jpg";
	aImages[1] = "templates/_default_/images/bg/bg1.jpg";
	aImages[2] = "templates/_default_/images/bg/bg2.jpg";
	aImages[3] = "templates/_default_/images/bg/bg3.jpg";
А грузиться только две. Почему не сделать проще ротируються все 4 изображения, смена к примеру через каждыйе 30 сек.
iron_cam 6 октября 2011 в 16:37 0
На демо-сайте, меняются 4 картинки, как раз раз в 30 секунд. Но чтоб не показывалась во время смены картинки заливка, сделал бэкграундом другую картинку.
lezginka.ru 6 октября 2011 в 16:12 0
+
Колёк 7 октября 2011 в 16:35 0
iron_cam, отличный хак, но у меня кофликтует со слайдером новостей.
Убираю эту строчку, конфликт исчезает, но и фон не работает:
Код PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Как решить конфликт?
iron_cam 7 октября 2011 в 16:37 0
В слайдере есть ссылка на скрипт джакуры?(такой-же код, возможно с другой версией)?
И как проявляется конфликт?
Колёк 7 октября 2011 в 16:44 0
Картинки вылезают:
Колёк 7 октября 2011 в 16:51 0
Насчёт ссылки, я незнаю где её искать, а так у меня jquery 1.3.4
iron_cam 7 октября 2011 в 17:07 0
Дай ссылку на сайт, я гляну.
Скорее всего, у тебя дважды указана ссылка на джакуру, надо просто удалить ссылку из кода слайдера(сделав бэкапы, естественно).
Колёк 7 октября 2011 в 17:11 0
http://rk-pechora.ru
iron_cam:
Скорее всего, у тебя дважды указана ссылка на джакуру, надо просто удалить ссылку из кода слайдера
Ещё бы наяти её...
iron_cam 7 октября 2011 в 17:16 0
Вот она:
Код PHP:
<script type="text/javascript" src="http://rk-pechora.ru/includes/jquery/jquery.min.js"></script>
В файле шаблона удали её, и встать вместо неё:
Код PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
И не забываем про бэкапы)))
Колёк 7 октября 2011 в 17:22 0
Код PHP:
http://rk-pechora.ru/includes/jquery/jquery.min.js
Код PHP:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
Это одинаковые, просто я файл jquery.min.js перекачал себе
iron_cam 7 октября 2011 в 17:24 0
Со ссылкой на гугл не работает?
iron_cam 7 октября 2011 в 17:20 0
А вообще нет...Ссылка одна, и версия такая-же...
Что за слайдер стоит?
Колёк 7 октября 2011 в 17:28 0
Я незнаю, Женя ставил http://instantcms.ru/users/zau4man
iron_cam 7 октября 2011 в 17:52 0
Ну, тогда советую писать Жене))
Бурдель Дмитрий 25 января 2013 в 20:25 0
Каким размером лучше картинки ставить? Посоветуйте размеры... От меня +
lokanaft 25 января 2013 в 20:32 +1
Явно не меньше 1920х1080 и она должна быть статичной (не скроллится), либо должна быть не просто первая попавшаяся фотка, а нормально обработанное изображение, у которого края плавно переходят в цвет заливки фона.
Иногда диву даёшься на широком мониторе...
Бурдель Дмитрий 25 января 2013 в 20:55 0
Вот поэтому и спрашиваю, спасибо..
toropa 22 марта 2013 в 19:05 0
интересная фишка.
+
но меня больше интересует смена фона в разных разделах. Такое возможно?
Олег Васильевич я 22 марта 2013 в 20:21 0
Если вам, как и мне, плевать на условности, в личку стукните - подскажу способ
Lisandr 14 сентября 2014 в 18:18 0
На 2.0 не пашет