|
Разный фон background у разных страниц. И вопрос.
|
|
| [1] Axse [19.05.2013, 03:05] |
Есть вот скрипт
Код <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 |
|
| [2] likbezz [19.05.2013, 03:55] |
Axse, Где [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> |
|
| [3] Axse [20.05.2013, 00:41] |
|
ага да спасибо = ) |
|
| [4] likbezz [20.05.2013, 00:52] |
Axse,
А зачем так сложно, можно узнать?
Сначала выводить случайную картинку, потом брать из неё ссылку... не проще ли сразу задавать случайный фон из массива адресов? картинка ведь все равно скрыта.. м?
.. |
|
| [5] Axse [20.05.2013, 19:53] |
Вот так?
Код <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)
---------------------------------------------
Да отлично работает  Добавлено (20.05.2013, 19:53)
---------------------------------------------
а как прписать no-repeat |
|
| [6] likbezz [20.05.2013, 21:58] |
Axse,
Вот так:
Код <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> |
|
| [7] Axse [21.05.2013, 00:38] |
Как тут с синтаксисом, что то не понятно. И мне кажется в примере ошибка не хватает кавычки
Вот он стиль
Код .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 |
|
| [8] likbezz [21.05.2013, 00:57] |
Axse, Вот он стиль
Код
.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>
Следовательно по примеру выше делаю так Код .css({ "background-image": "url('http://s2.ucoz.net/a/16/2887.gif')" "no-repeat"
}); не работает
Естественно, нет у свойства «background-image» значений «no-repeat».
Есть только у «background-repeat» или «background».
А вообще, правильный код в моем посте выше. |
|
| [9] Axse [21.05.2013, 01:05] |
Подумал решил, куда легче будет выводить вот так
Код
<прячем если отсутствует переменная image>
<style>
.slink{
background: #F2760B url([image]); repeat-x;
</style>
</прячем если отсутствует переменная image>
<выводим если отсутствует переменная image>
<style>
.slink{
background: #F2760B;
</style>
</выводим если отсутствует переменная image>
где [image] ссылка на картинкуДобавлено (21.05.2013, 01:05)
---------------------------------------------
А вообще, правильный код...
Ага понятно спасибо |
|
| [10] likbezz [21.05.2013, 01:06] |
Axse, Подумал решил, куда легче будет выводить вот так
Ну, если работать с операторами, то уж проще просто прописать в 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
.. |
|
| [11] Axse [21.05.2013, 03:01] |
не мне css в этом случае не совсем пойдет. я вот что хотел. У меня сайт с фильмами, и при добавлении фильма, какой нибудь новинки хотелось бы выводить к нему красивый огромный скрин (если есть такой в гугле). Получается заполняю форму добавления, копирую режиссера, актеров, год, описание меняю , кнопкой обзор выбираю обложку к фильму и кнопкой обзор выбираю фоновую картинку к див классу который выше. Нажимаю отправить, захожу на страничку и фоновый рисунок радует глаз = ) вот только кнопку обзор для фонового рисунка я пока еще не придумал как сделать, нужно посидеть часика два сравнить коды с теми как я делал это для загрузки обложки к фильму и должно получится. А картинка выводится средствами движка, там удобно придумали с дополнительными полями..
Создаю доп поле image в него при добавление фильма вписываю ссылку
а на страничке с фильмом
Код <script type="text/javascript">
$(function($){
$("body").css({
"background-image": "url([image])",
"background-repeat": "no-repeat",
"text-align": "center"
});
});
</script>
Сейчас пока остановился на этом посте, сделал предупреждение к плееру, сменом фона. это уже мне другая мысль в голову пришла по ходу решения этой задачи = ) |
|
| [12] likbezz [21.05.2013, 08:42] |
Axse, Создаю доп поле image в него при добавление фильма вписываю ссылку
а на страничке с фильмом
А что, дополнительные поля не выводятся в основном шаблоне?
Тогда уж лучше стили вынести, нафига дергать скрипт?
Код <if([image])>
<style type="text/css">
body{background:url([image]) no-repeat;}
</style>
<endif> |
|
| [13] Alex [03.10.2014, 18:37] |
|
Добрый вечер! [b]likbezz[/b], а как будет выглядеть код, если мне нужно поменять фон у блока, в зависимости от страницы? То есть у разных разделов разный фон определенного блока. Можете подсказать? |
|
| [14] likbezz [03.10.2014, 23:58] |
Alex, Добрый вечер! likbezz, а как будет выглядеть код, если мне нужно поменять фон у блока, в зависимости от страницы? То есть у разных разделов разный фон определенного блока. Можете подсказать?
Добрый)
Типа так:
Код <div class="bg_$CID$">
...
</div>
Где либо $SID$ либо $CID$ - смотря что доступно..
И стили, соответственно:
Код .bg_1{ ... }
.bg_2{ ... }
.bg_3{ ... }
Или относительно родительского блока:
Код .bg_1 .класс_блока{ ... }
.bg_2 .класс_блока{ ... }
.bg_3 .класс_блока{ ... } |
|
| [15] Alex [06.10.2014, 15:59] |
|
[b]likbezz[/b], а можете подробнее, а то я не программист. И еще, возможно я не в ту ветку написал, мне нужен скрипт безотносительно юкоза, просто в поисковике Ваш сайт вылез ;) |
|