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

+37
13.31K
Это мой первый пост, так что прошу сильно не пинать.
Расскажу я о том, как сделать автоматическую смену фона сайта, БЕЗ перезагрузки страницы.
Смена будет происходить плавно, с заданным интервалом.
Ну, начнем.
Этот код, вставляем в файл templates/_default_/template.php после <body>:
  1. <img src="" alt="background" id="bg" style="display:none" />
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  3. <script type="text/javascript" class="noprint">
  4. var aImages = new Array();
  5. var aURL = new Array();
  6. var aArtists = new Array();
  7. var iPrev = -1;
  8. var iRnd = -1;
  9.  
  10. aImages[0] = "templates/_default_/images/bg/bg.jpg";
  11. aImages[1] = "templates/_default_/images/bg/bg1.jpg";
  12. aImages[2] = "templates/_default_/images/bg/bg2.jpg";
  13. aImages[3] = "templates/_default_/images/bg/bg3.jpg";
  14.  
  15.  
  16.  
  17.  
  18. $(document).ready(function() {
  19.  
  20.  
  21. $("img#bg").load(function()
  22. {
  23.  
  24. $("img#bg").fadeTo(2000,1);
  25.  
  26.  
  27.  
  28. setTimeout(function()
  29. {
  30. $("#image_description").animate({right: '-=150'}, 1000);
  31. $("img#bg").fadeOut(2000);
  32.  
  33.  
  34. setTimeout(LoadImages,2500);
  35. }
  36. ,30000);
  37. }
  38. )
  39.  
  40.  
  41. setTimeout(LoadImages,1000);
  42.  
  43. });
  44.  
  45. function LoadImage(iNr)
  46. {
  47.  
  48. $("img#bg").attr("src", aImages[iNr]);
  49.  
  50.  
  51. };
  52.  
  53. function LoadImages()
  54. {
  55.  
  56. /* Select a random image number and make sure this is not equal to the previous image */
  57. while(iPrev == iRnd)
  58. {
  59. iRnd = Math.floor(Math.random()*aImages.length);
  60. }
  61.  
  62. /* Show the selected image */
  63. LoadImage(iRnd);
  64.  
  65. iPrev = iRnd;
  66.  
  67. };
  68. </script>
Ссылки на картинки, естественно, меняем под себя.

А этот в templates/_default_/css/style.css:
  1. img#bg {
  2. /* Stretch background */
  3. position: fixed;
  4. top:0;
  5. left:0;
  6. width:100%;
  7. z-index:-3;
  8. }
Иллюстрация
Иллюстрация
Демо-версия
+2
Марат Марат 13 лет назад #
+
Молодец! Прикольно.
0
abasia abasia 13 лет назад #
Интересно получилось+
0
джин джин 13 лет назад #
Полезно.
0
Alexneva Alexneva 13 лет назад #
Интересно! Не встречал такого!
0
Александр Александр 13 лет назад #
У тебя на демо прописанно для загрузки 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 сек.
0
iron_cam iron_cam 13 лет назад #
На демо-сайте, меняются 4 картинки, как раз раз в 30 секунд. Но чтоб не показывалась во время смены картинки заливка, сделал бэкграундом другую картинку.
0
lezginka.ru lezginka.ru 13 лет назад #
+
0
Колёк Колёк 13 лет назад #
iron_cam, отличный хак, но у меня кофликтует со слайдером новостей.
Убираю эту строчку, конфликт исчезает, но и фон не работает:
Код PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Как решить конфликт?
0
iron_cam iron_cam 13 лет назад #
В слайдере есть ссылка на скрипт джакуры?(такой-же код, возможно с другой версией)?
И как проявляется конфликт?
0
Колёк Колёк 13 лет назад #
Картинки вылезают:
0
Колёк Колёк 13 лет назад #
Насчёт ссылки, я незнаю где её искать, а так у меня jquery 1.3.4
0
iron_cam iron_cam 13 лет назад #
Дай ссылку на сайт, я гляну.
Скорее всего, у тебя дважды указана ссылка на джакуру, надо просто удалить ссылку из кода слайдера(сделав бэкапы, естественно).
0
Колёк Колёк 13 лет назад #
http://rk-pechora.ru
iron_cam:
Скорее всего, у тебя дважды указана ссылка на джакуру, надо просто удалить ссылку из кода слайдера
Ещё бы наяти её...
0
iron_cam iron_cam 13 лет назад #
Вот она:
Код 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>
И не забываем про бэкапы)))
0
Колёк Колёк 13 лет назад #
Код 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 перекачал себе
0
iron_cam iron_cam 13 лет назад #
Со ссылкой на гугл не работает?
0
iron_cam iron_cam 13 лет назад #
А вообще нет...Ссылка одна, и версия такая-же...
Что за слайдер стоит?
0
Колёк Колёк 13 лет назад #
Я незнаю, Женя ставил http://instantcms.ru/users/zau4man
0
iron_cam iron_cam 13 лет назад #
Ну, тогда советую писать Жене))
0
Бурдель Дмитрий Бурдель Дмитрий 11 лет назад #
Каким размером лучше картинки ставить? Посоветуйте размеры... От меня +
+1
lokanaft lokanaft 11 лет назад #
Явно не меньше 1920х1080 и она должна быть статичной (не скроллится), либо должна быть не просто первая попавшаяся фотка, а нормально обработанное изображение, у которого края плавно переходят в цвет заливки фона.
Иногда диву даёшься на широком мониторе...
0
Бурдель Дмитрий Бурдель Дмитрий 11 лет назад #
Вот поэтому и спрашиваю, спасибо..
0
toropa toropa 11 лет назад #
интересная фишка.
+
но меня больше интересует смена фона в разных разделах. Такое возможно?
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
0
Lisandr Lisandr 10 лет назад #
На 2.0 не пашет

Еще от автора

Красивая, анимированная страница с 404й ошибкой
И опять продолжение моих экспериментов с jQuery. На этот раз я добрался до ошибки 404.
Красивое слайд-шоу на главной странице(в модуле "Добро пожаловать")
А я продолжаю свои эксперименты с JQuery, на этот раз добрался до модуля "Добро пожаловать". Он скучный.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.