Фильтр по:
  

Разный фон background у разных страниц. И вопрос.

Если вы пришли за помощью, то Вам сюда...

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: Admin, Cибиря4ка, Komoff, Diana  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Разный фон background у разных страниц. И вопрос.
Разный фон background у разных страниц. И вопрос.
Дата: Воскресенье, 19.05.2013, 03:05 |
Axse
Лейтенант
Группа: Пользователи
Сообщений: 52
Награды: 0
Репутация: 2
Статус: Offline


 Есть вот скрипт

Код
<script type="text/javascript">
jQuery(function($){
    $("body").css({
      "background-image": "url('[image]')"
    });
});
</script>


Или вот такой код
Код
<img id="bg-target" src="[image]" alt="" style="display:none;" />

<script>
      jQuery(function($) {
          bgTarget = $("#bg-target").attr("src");
          if (bgTarget !== "") {
              $("body").css({
                  "background-image": "url("+bgTarget+")"
              });
          };
      });
</script>



Где [image] переменная картинка.

Вопрос как сделать так что бы background-image был не body а определенного div класса, допустим style.

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

---------------------------------------------

Сообщение отредактировал Axse - Воскресенье, 19.05.2013, 03:06
 
Дата: Воскресенье, 19.05.2013, 03:55 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Axse,
Цитата (Axse, Вс, 19.05.2013, 03:05:25)
Где [image] переменная картинка.
Вопрос как сделать так что бы background-image был не body а определенного div класса, допустим style.

Типа так:
Код
<div class="rand_bg_box"></div>
<img id="rand_bg_img" src="http://s2.ucoz.net/a/16/2887.gif" alt="" style="display:none;" />
<script type="text/javascript">
$(document).ready(function(){
var bgTarget = $('#rand_bg_img').attr('src')||false;
if(bgTarget){
  $('div.rand_bg_box').css({'background-image':'url('+bgTarget+')'});
};
});
</script>

 
Дата: Понедельник, 20.05.2013, 00:41 |
Axse
Лейтенант
Группа: Пользователи
Сообщений: 52
Награды: 0
Репутация: 2
Статус: Offline


 ага да спасибо = )

 
Дата: Понедельник, 20.05.2013, 00:52 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Axse,
Цитата (Axse, Пн, 20.05.2013, 00:41:08)
ага да спасибо

А зачем так сложно, можно узнать?
Сначала выводить случайную картинку, потом брать из неё ссылку... не проще ли сразу задавать случайный фон из массива адресов? картинка ведь все равно скрыта.. м?
..

 
Дата: Понедельник, 20.05.2013, 19:53 |
Axse
Лейтенант
Группа: Пользователи
Сообщений: 52
Награды: 0
Репутация: 2
Статус: Offline


 Вот так?

Код
<script type="text/javascript">  
  jQuery(function($){  
     $("body").css({  
       "background-image": "url('http://s2.ucoz.net/a/16/2887.gif')"  
     });  
  });  
  </script>

Добавлено (20.05.2013, 17:40)
---------------------------------------------
У меня фон должен соответствовать страничке. То есть страничка про Бэтмэна и картинка должна про бэтмэна )

Добавлено (20.05.2013, 19:36)
---------------------------------------------
я так понял если для див фона то нужног так

Код

<script type="text/javascript">  
  jQuery(function($){  
     $('div.rand_bg_box')
.css({  
       "background-image": "url('[image]')"  
     });  
  });  
  </script>

Добавлено (20.05.2013, 19:41)
---------------------------------------------
Да отлично работает hands

Добавлено (20.05.2013, 19:53)
---------------------------------------------
а как прписать no-repeat

 
Дата: Понедельник, 20.05.2013, 21:58 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Axse,
Цитата (Axse, Пн, 20.05.2013, 19:53:14)
а как прписать no-repeat

Вот так:
Код
<div class="rand_bg_box"></div>
<img id="rand_bg_img" src="http://s2.ucoz.net/a/16/2887.gif" alt="" style="display:none;" />
<script type="text/javascript">
$(document).ready(function(){
var bgTarget = $('#rand_bg_img').attr('src')||false;
if(bgTarget){
   $('div.rand_bg_box').css({'background':'url('+bgTarget+') no-repeat'});
};
});
</script>

 
Дата: Вторник, 21.05.2013, 00:38 |
Axse
Лейтенант
Группа: Пользователи
Сообщений: 52
Награды: 0
Репутация: 2
Статус: Offline


 Как тут с синтаксисом, что то не понятно. И мне кажется в примере ошибка не хватает кавычки
Вот он стиль
Код
.css({  "background-image": "url('http://s2.ucoz.net/a/16/2887.gif')"        
          });

в css разделитель
;
а тут его нет?

Следовательно по примеру выше делаю так

Код
.css({  "background-image": "url('http://s2.ucoz.net/a/16/2887.gif')" "no-repeat"       
          });


не работает

Сообщение отредактировал Axse - Вторник, 21.05.2013, 00:48
 
Дата: Вторник, 21.05.2013, 00:57 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Axse,
Цитата (Axse, Вт, 21.05.2013, 00:38:08)
Вот он стиль
Код
.css({ "background-image": "url('http://s2.ucoz.net/a/16/2887.gif')"
});

в css разделитель
;
а тут его нет?

Нет, разделитель там не нужен, так как правило одно а разделитель между правилами в данном случае - «,»
А вот кавычки там не обязательны,
Типа:
Код
<script type="text/javascript">    
$(function($){    
    $("body").css({    
     "background-image": "url(http://s2.ucoz.net/a/16/2887.gif)",
     "background-repeat": "no-repeat",
     "text-align": "center"       
    });    
});    
</script>


Цитата (Axse, Вт, 21.05.2013, 00:38:08)
Следовательно по примеру выше делаю так
Код
.css({  "background-image": "url('http://s2.ucoz.net/a/16/2887.gif')" "no-repeat"         
            });

не работает

Естественно, нет у свойства «background-image» значений «no-repeat».
Есть только у «background-repeat» или «background».

А вообще, правильный код в моем посте выше.

 
Дата: Вторник, 21.05.2013, 01:05 |
Axse
Лейтенант
Группа: Пользователи
Сообщений: 52
Награды: 0
Репутация: 2
Статус: Offline


 Подумал решил, куда легче будет выводить вот так

Код

<прячем если отсутствует переменная image>
<style>
.slink{
   background: #F2760B url([image]); repeat-x;
</style>
</прячем если отсутствует переменная image>

<выводим если отсутствует переменная image>
<style>
.slink{
   background: #F2760B;
</style>
</выводим если отсутствует переменная image>


где [image] ссылка на картинку

Добавлено (21.05.2013, 01:05)
---------------------------------------------

Цитата (likbezz, Вт, 21.05.2013, 00:57:00)
А вообще, правильный код...


Ага понятно спасибо

 
Дата: Вторник, 21.05.2013, 01:06 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Axse,
Цитата (Axse, Вт, 21.05.2013, 00:59:49)
Подумал решил, куда легче будет выводить вот так

Ну, если работать с операторами, то уж проще просто прописать в css

Код
.bg_box{background-color:#E5E5E5;}
.st1{background:url(http://s2.ucoz.net/1.gif) no-repeat;}
.st2{background:url(http://s2.ucoz.net/2.gif) no-repeat;}
.st3{background:url(http://s2.ucoz.net/3.gif) no-repeat;}


Код
<div class="bg_box st$OPERATOR$"></div>


Где:
$OPERATOR$ - переменная выводящие число от 1 или любое другое значение, соответственно подредактировать стили.

Например:
Код
<div class="bg_box $MODULE_ID$<?rnd(10)?>"></div>

Где:
$MODULE_ID$ - название модуля (news, load, publ и тп)
<?rnd(10)?> - выводит случайное число в заданном диапазоне.
/img_bg/ - папка для фоновых картинок

Или вообще вот так:
Код
<div class="bg_box" style="background:url(http://s2.ucoz.net/img_bg/$MODULE_ID$_<?rnd(10)?>.gif) no-repeat;"></div>

Где для новостей, например, картинка будет:
Код
От      
http://s2.ucoz.net/img_bg/news_0.gif
до      
http://s2.ucoz.net/img_bg/news_10.gif


А для каталога файлов:
Код
От      
http://s2.ucoz.net/img_bg/load_0.gif
до
http://s2.ucoz.net/img_bg/load_10.gif

..

 
Дата: Вторник, 21.05.2013, 03:01 |
Axse
Лейтенант
Группа: Пользователи
Сообщений: 52
Награды: 0
Репутация: 2
Статус: Offline


 не мне css в этом случае не совсем пойдет. я вот что хотел. У меня сайт с фильмами, и при добавлении фильма, какой нибудь новинки хотелось бы выводить к нему красивый огромный скрин (если есть такой в гугле). Получается заполняю форму добавления, копирую режиссера, актеров, год, описание меняю , кнопкой обзор выбираю обложку к фильму и кнопкой обзор выбираю фоновую картинку к див классу который выше. Нажимаю отправить, захожу на страничку и фоновый рисунок радует глаз = ) вот только кнопку обзор для фонового рисунка я пока еще не придумал как сделать, нужно посидеть часика два сравнить коды с теми как я делал это для загрузки обложки к фильму и должно получится. А картинка выводится средствами движка, там удобно придумали с дополнительными полями..

Создаю доп поле image в него при добавление фильма вписываю ссылку
а на страничке с фильмом
Код
<script type="text/javascript">     
  $(function($){     
     $("body").css({     
      "background-image": "url([image])",  
      "background-repeat": "no-repeat",  
      "text-align": "center"        
     });     
  });     
  </script>


Сейчас пока остановился на этом посте, сделал предупреждение к плееру, сменом фона. это уже мне другая мысль в голову пришла по ходу решения этой задачи = )

 
Дата: Вторник, 21.05.2013, 08:42 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Axse,
Цитата (Axse, Вт, 21.05.2013, 03:01:02)
Создаю доп поле image в него при добавление фильма вписываю ссылку
а на страничке с фильмом

А что, дополнительные поля не выводятся в основном шаблоне?

Тогда уж лучше стили вынести, нафига дергать скрипт?
Код
<if([image])>
<style type="text/css">
body{background:url([image]) no-repeat;}  
</style>
<endif>

 
Дата: Пятница, 03.10.2014, 18:37 |
Группа: Гости





 Добрый вечер! [b]likbezz[/b], а как будет выглядеть код, если мне нужно поменять фон у блока, в зависимости от страницы? То есть у разных разделов разный фон определенного блока. Можете подсказать?

 
Дата: Пятница, 03.10.2014, 23:58 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Alex,
Цитата Alex, Пт, 03.10.2014, 18:37:20
Добрый вечер! likbezz, а как будет выглядеть код, если мне нужно поменять фон у блока, в зависимости от страницы? То есть у разных разделов разный фон определенного блока. Можете подсказать?

Добрый)
Типа так:
Код
<div class="bg_$CID$">
...
</div>

Где либо $SID$ либо $CID$ - смотря что доступно..

И стили, соответственно:
Код
.bg_1{ ... }
.bg_2{ ... }
.bg_3{ ... }


Или относительно родительского блока:
Код
.bg_1 .класс_блока{ ... }
.bg_2 .класс_блока{ ... }
.bg_3 .класс_блока{ ... }

 
Дата: Понедельник, 06.10.2014, 15:59 |
Группа: Гости





 [b]likbezz[/b], а можете подробнее, а то я не программист. И еще, возможно я не в ту ветку написал, мне нужен скрипт безотносительно юкоза, просто в поисковике Ваш сайт вылез ;)

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Разный фон background у разных страниц. И вопрос.
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия