Форум русской поддержки Joomla!® CMS
09.12.2016, 17:35:16 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Смена фона на разных страницах

 (Прочитано 912 раз)
0 Пользователей и 1 Гость смотрят эту тему.
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« : 29.05.2016, 21:39:16 »

 У меня стоит паралакс фон.  Мне нужно сделать так, чтобы у меня на нужных страницах был фон без паралакса.  В шаблоне это уже все прописано.

Вот кусок CSS отвечающий за фон

Показать текстовый блок

И вот кусок JS отвечающий за Parallax и NoParallax

Показать текстовый блок

Есть главное меню, вопрос как сделать так, чтобы при переходе на определенные пункты (страницы) паралакс эффект исчезал и работало свойство  ""noparallax""  

(т.е чтобы фоном была просто вышеуказанная  в CSS картинка   background: url("../../../images/snow/parallax/body_bg.jpg") 50% 0% no-repeat;)

Что и куда нужно подставить ?
« Последнее редактирование: 31.05.2016, 22:57:58 от timssky » Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #1 : 31.05.2016, 16:34:38 »

Подскажите хотябы в каком направлении работать ?  Нужен ли вообще  PHP для данной задачи или все решается через CSS ?
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #2 : 31.05.2016, 22:56:18 »

Вот сам шаблон http://yootheme.com/demo/joomla/frequency  если это поможет конечно
Записан
umbabaraumba
Практически профи
*******

Репутация: +153/-1
Offline Offline

Пол: Мужской
Сообщений: 2558

если помог можете поставить +


« Ответ #3 : 01.06.2016, 00:53:43 »

Посмотрите эту тему
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #4 : 01.06.2016, 15:19:02 »

не помогло
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #5 : 01.06.2016, 15:29:02 »

А возможно просто это свойство ""noparallax""  прописать в CSS класс меню ?  Уже все перепробовал не работает ничего!  Хотя в самой настройке шаблона есть такая функция, ВКЛ и ВКЛ паралакс эффект. Вропрос как  это сделать для отдельного пункта меню.  Помогите пожалуйста знатоки Joomla
« Последнее редактирование: 01.06.2016, 15:32:19 от timssky » Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #6 : 01.06.2016, 17:58:31 »

Хотя в самой настройке шаблона есть такая функция, ВКЛ и ВКЛ паралакс эффект.

Значит, в шаблоне есть условие вывода/скрытия параллакса.

1) найти это условие и понять принцип работы
2) проверка по суффиксу страницы. Если прописан определенный суффикс - показывать, если не он или нет вообще - скрывать

Шаблон платный, так что дальше - сами. Код посмотреть не получится без покупки.
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #7 : 01.06.2016, 18:26:23 »

 Sad

Вот вышеуказанные файлы PHP и CSS полностью  https://dropmefiles.com/gqPID
« Последнее редактирование: 01.06.2016, 18:31:50 от timssky » Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #8 : 01.06.2016, 19:25:26 »

Получаем суффикс класса страницы из пункта меню

Код
<?php $app = JFactory::getApplication();
$menu = $app->getMenu();
$pageClassSuffix = $menu->getActive()? $menu->getActive()->params->get('pageclass_sfx', 'default') : 'default'; ?>

Прописываем условие
Код
<?php if($pageClassSuffix == "parallax"):?>
<ul class="tm-parallax-scene" data-limit-y="0.09">
<li class="layer" data-depth="-0.02"><div class="tm-parallax-bg-1"></div></li>
<li class="layer" data-depth="0.00"><div class="tm-parallax-bg-2"></div></li>
<li class="layer" data-depth="0.05"><div class="tm-parallax-bg-3"></div></li>
           <li class="layer" data-depth="0.10"><div class="tm-parallax-bg-4"></div></li>
           <li class="layer" data-depth="0.20"><div class="tm-parallax-bg-5"></div></li>
           <li class="layer" data-depth="0.70"><div class="tm-parallax-bg-6"></div></li>
</ul>
<?php else : ?>
      <div class="tm-bg-noparallax"></div>
<?php endif; ?>
 

все это вместо

Код
<?php if (!$this['config']->get('parallax_bg')) : ?>
<div class="tm-bg-noparallax"></div>
<?php endif; ?>
 
<?php if ($this['config']->get('parallax_bg')) : ?>
<ul class="tm-parallax-scene" data-limit-y="0.09">
<li class="layer" data-depth="-0.02"><div class="tm-parallax-bg-1"></div></li>
<li class="layer" data-depth="0.00"><div class="tm-parallax-bg-2"></div></li>
<li class="layer" data-depth="0.05"><div class="tm-parallax-bg-3"></div></li>
           <li class="layer" data-depth="0.10"><div class="tm-parallax-bg-4"></div></li>
           <li class="layer" data-depth="0.20"><div class="tm-parallax-bg-5"></div></li>
           <li class="layer" data-depth="0.70"><div class="tm-parallax-bg-6"></div></li>
</ul>
<?php endif; ?>

Учтите, что настройки из шаблона работать уже не будут. Это вывод параллакса по суффиксу страницы в пункте меню.
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #9 : 02.06.2016, 11:35:05 »

Код:
<?php $app = JFactory::getApplication();
$menu = $app->getMenu();
$pageClassSuffix = $menu->getActive()? $menu->getActive()->params->get('pageclass_sfx', 'default') : 'default'; ?>

А вот это куда нужно прописать ?  И как в пункте меню правильно прописать CSS-класс страницы ?
 ?
« Последнее редактирование: 02.06.2016, 11:46:56 от timssky » Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #10 : 02.06.2016, 11:50:28 »

В любое место где-нибудь вверху. Так можете подряд все и написать. Суффикс в настройках страницы в пункте меню. CSS класс страницы.
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #11 : 02.06.2016, 11:57:11 »

Все работает,  спасибо!  +++   Только наоборот получилось почему то, паралакс по умолчанию везде выключен.  А если прописать в CSS-класс меню   "parallax"   то он работает.   Мне так и нужно.  Так как паралакс мне нужен только на одной на главной странице.  

Тему пока не закрываю, так как еще будет работа с фоном
« Последнее редактирование: 02.06.2016, 12:14:10 от timssky » Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #12 : 02.06.2016, 13:19:43 »

Только наоборот получилось почему то, паралакс по умолчанию везде выключен.
Почему наоборот? Я именно так код и писала)
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #13 : 02.06.2016, 17:14:51 »

Еще такой вопрос,  в CSS прописаны слой изображений для паралакс эффекта, мне нужно заменить одно из этих изображений текстом.  

Код:
@media (min-width: 768px) {
  .tm-parallax-bg-1 {
    background: url("../../../images/snow/parallax/parallax_bg.jpg") 50% 0 no-repeat;
    background-size: cover;
  }
  .tm-parallax-bg-2 {
    background: url("../../../images/snow/parallax/parallax_layer1.png") 50% 0 no-repeat;
    background-size: cover;
  }
  .tm-parallax-bg-3 {
    background: url("../../../images/snow/parallax/parallax_layer2.png") 50% 0 no-repeat;
    background-size: cover;
  }
  .tm-parallax-bg-4 {
    background: url("../../../images/snow/parallax/parallax_layer3.png") 50% 0 no-repeat;
    background-size: cover;
  }
  .tm-parallax-bg-5 {
    background: url("../../../images/snow/parallax/parallax_layer4.png") 50% 0 no-repeat;
    background-size: cover;
  }
    .tm-parallax-bg-6 {
    background: url("../../../images/snow/parallax/parallax_layer5.png") 50% 0 no-repeat;
    background-size: cover;
  }
}

Например чтобы в слое  ".tm-parallax-bg-1"    заместо картинки  "parallax_bg.jpg"   был просто текст  ""Добро пожаловать на сайт"" написанный в нижней части страницы.  50px от низа.   

Возможно такое сделать ?


Записан
umbabaraumba
Практически профи
*******

Репутация: +153/-1
Offline Offline

Пол: Мужской
Сообщений: 2558

если помог можете поставить +


« Ответ #14 : 02.06.2016, 18:08:03 »

Можно попробовать сделать через ::after или ::before .
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #15 : 02.06.2016, 23:55:17 »

И как это вписать например сюда

Код:
.tm-parallax-bg-1 {
    background: url("../../../images/snow/parallax/parallax_bg.jpg") 50% 0 no-repeat;
    background-size: cover;
  }

Вместо картинки  ?
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6460



« Ответ #16 : 03.06.2016, 09:30:31 »

Тут проще подготовить в ФШ картинку под место, либо править разметку и вставлять модульную позицию, блок которой паралаксом крутить, но ваш шаблон не умеет крутить блоки
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #17 : 03.06.2016, 13:44:29 »

Понятно.  А как например закрепить маленькую картинку чтобы она всегда была по центру ?
я сделал так:

Код:
 
    .tm-parallax-bg-1 {
    background: url("../../../images/snow/parallax/parallax_layer3.png") 50%  0 no-repeat ;
    background-size: 400px 400px;
    background-position-y: center;

Когда окно браузера открыто во всю ширину монитора она стоит вертикально идеально и там где нужно. Но если окно сжать вертикально картинка съезжает с нужного места вверх.  Как то можно сделать чтобы она всегда была зафикисрована относительно других изображений ?
 
(Если что, размер остальных изображений  1600 на 900 px. )
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #18 : 05.06.2016, 15:19:51 »

Возможно так сделать ?
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6460



« Ответ #19 : 05.06.2016, 17:34:24 »

Если картинка тоже крутится паралаксом, то никак: скрипт паралакса все равно переопределит все размеры и позиционирование, даж импортант не помогает - проверял

Если картина без паралакса - то да,  background-position должен помоч
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #20 : 06.06.2016, 12:16:43 »

Да она двигается, так как это один из слоев паралакса.  

А нельзя вставить что то типа блока размером как и все остальные картинки 1600 на 900 px  и по центру этого блока выровнять маленькую картинку  ?    Т.е чтобы как будто картинка большая, а по факту только сам блок большой, тогда по идее должно все пропорционально сжиматься
« Последнее редактирование: 06.06.2016, 12:22:49 от timssky » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6460



« Ответ #21 : 06.06.2016, 13:32:27 »

Можно и блок, с абсолютным позиционированием, но тут смотреть разметку надо, тестить
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #22 : 07.06.2016, 08:22:11 »

PHP и CSS полностью  https://dropmefiles.com/gqPID
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6460



« Ответ #23 : 07.06.2016, 08:47:08 »

хмм, достаточно было просто дать название шаблона и ссылку на демо, ближе к вечеру по мск дам ответ
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #24 : 07.06.2016, 12:12:42 »

http://yootheme.com/demo/joomla/frequency
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #25 : 09.06.2016, 10:30:58 »

 Sad
Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4718

Мама, я снова верстал во сне...


« Ответ #26 : 09.06.2016, 12:44:14 »

Просто добавьте новую позицию в шаблон и там  выведите обычный HTML блок. Нарисуйте как должно выглядеть.
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6460



« Ответ #27 : 09.06.2016, 12:50:01 »

Да не, там это не как позиция идет, паралакс-фоны идут на заднем плане за позициями и блоки скрипт крутить не желает, у ночь просидел, так и не въехал, как оно работает

Как вариант: картинку 400*400 расширить прозрачным или однотонным под место фоном до размеров 1900*600, имхо более никак пока не придумал
Записан
timssky
Давно я тут
****

Репутация: +0/-0
Offline Offline

Сообщений: 277



« Ответ #28 : 10.06.2016, 17:54:05 »

Допустим я поставлю картинку 1900*600  с прозрачным фоном.  Но сложность в том что далее мне нужно прикрепить ссылку к центру этой картинки. Т.е как раз 400 на 400.   И вот тут вопрос как это сделать ?    Если спереди создать модуль со ссылкой 400 на 400 PX  то при сжатии модуль будет   съезжать с нужного места.  Как сделать ссылку на нужное место картинки, чтобы  она сжималась также как и паралакс фон ?
Записан
umbabaraumba
Практически профи
*******

Репутация: +153/-1
Offline Offline

Пол: Мужской
Сообщений: 2558

если помог можете поставить +


« Ответ #29 : 10.06.2016, 18:08:26 »

Попробуйте сделать тегом map
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet