Перейти к содержимому


Новая Страница С Галереей


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 mrsimon90

mrsimon90

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 50 сообщений

Отправлено 30 Март 2018 - 17:09

Создал контент страницу "Галерея" и хочу установить туда вот такую галерею https://tympanus.net...anding-preview/
Я добавил код в "Источник" потом в файле main.css добавил код как описано на сайте, и так же код javascript в файл main.js и конечно же ничего не сработало(( Сможете подсказать как это сделать? Заранее огромное спасибо!

#2 mrsimon90

mrsimon90

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 50 сообщений

Отправлено 31 Март 2018 - 02:13

http://gmarussia.ru/page/Galereya на данный момент не срабатывает анимация, пример как она должна работать можно посмотреть по ссылке в прошлом сообщении

#3 mrsimon90

mrsimon90

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 50 сообщений

Отправлено 02 Апрель 2018 - 20:01

Ребята, помогите пожалуйста((( Все вроде сделал правильно, но не срабатывает скрипт, может что то не правильно прописано в документах стилей или скрипта? Галерея выглядит правильно, но не срабатывает анимация

#4 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 673 сообщений

Отправлено 03 Апрель 2018 - 14:09

Просмотр сообщенияmrsimon90 (02 Апрель 2018 - 20:01) писал:

Ребята, помогите пожалуйста((( Все вроде сделал правильно, но не срабатывает скрипт, может что то не правильно прописано в документах стилей или скрипта? Галерея выглядит правильно, но не срабатывает анимация
Здравствуйте, такого рода галерею установить проблематично, так как идет обращение к стороннему сервису.
Как вариант можем Вам установить такого рода галерею.
https://galleria.io/preview/classic/

#5 mrsimon90

mrsimon90

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 50 сообщений

Отправлено 03 Апрель 2018 - 19:14

Возможно установить такую галерею на эту страницу? http://gmarussia.ru/...azina-Soul-Soul мне в дальнейшем понадобиться ставить такую галерею на множество станиц, вы поставите сами или объясните как это сделать?

P.S. ту галерею которую я хочу, посоветовали на одной из страниц вашего форума...

Просмотр сообщенияИрина345 (03 Апрель 2018 - 14:09) писал:

Здравствуйте, такого рода галерею установить проблематично, так как идет обращение к стороннему сервису.
Как вариант можем Вам установить такого рода галерею.
https://galleria.io/preview/classic/


#6 mrsimon90

mrsimon90

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 50 сообщений

Отправлено 08 Апрель 2018 - 10:57

Просмотр сообщенияИрина345 (03 Апрель 2018 - 14:09) писал:

Здравствуйте, такого рода галерею установить проблематично, так как идет обращение к стороннему сервису.
Как вариант можем Вам установить такого рода галерею.
https://galleria.io/preview/classic/
уже поставил галерею сам, но нужна помощь по "подгонке" страницы по стилю (http://gmarussia.ru/page/Sochi-FW) Галерея встала и работает правильно, но если вы перейдете по ссылке выше, то увидите в чем проблема. (большой отступ сверху страницы до шапки, нет горизонтальных отступов у фото и тд) Пожалуйста, помогите хоть в этом

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 10 Апрель 2018 - 03:37

Здравствуйте.

На данный момент между фото у вас есть отступ в несколько пикселей и расстояние от шапки сайта схожее с остальными страницами, например "О нас", уточните пожалуйста, вопрос еще актуален?

Для увеличения отступа между фото зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
.img-list li {
  margin-bottom: 10px;
  margin-right: 7px;
  display: inline-block;
  list-style: none;
  box-shadow: 1px 1px 2px 3px #000
}

замените на:
.img-list li {
  margin: 10px;
  display: inline-block;
  list-style: none;
  box-shadow: 1px 1px 2px 3px #000
}


#8 mrsimon90

mrsimon90

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 50 сообщений

Отправлено 10 Апрель 2018 - 13:17

Просмотр сообщенияVaccina (10 Апрель 2018 - 03:37) писал:

Здравствуйте.

На данный момент между фото у вас есть отступ в несколько пикселей и расстояние от шапки сайта схожее с остальными страницами, например "О нас", уточните пожалуйста, вопрос еще актуален?

Для увеличения отступа между фото зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
.img-list li {
margin-bottom: 10px;
margin-right: 7px;
display: inline-block;
list-style: none;
box-shadow: 1px 1px 2px 3px #000
}

замените на:
.img-list li {
margin: 10px;
display: inline-block;
list-style: none;
box-shadow: 1px 1px 2px 3px #000
}
Предыдущие вопросы я сумел решить сам, поэтому вы их не увидели, остался только один момент: когда открывается фото для просмотра, стрелочка из шапки видна поверх фото(скрин во вложении) так же при пролистывании фото вверх вниз фон затемнен только на половину, скорее всего из за большого размера фото, но ведь как то можно сделать что бы все равно фон был полностью затемнен? Спасибо

Прикрепленные изображения

  • Снимок экрана 2018-04-10 в 13.04.37 копия.jpg


#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 11 Апрель 2018 - 01:50

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
.overlay {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
}

замените на:
.overlay {
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
}

далее зайдите в main.css - найдите:
#breadcrumbs {position: relative;color: #ffffff;border-bottom: 1px solid #E5E5E5;margin-bottom: 15px;background: #111111;padding: 20px 0;text-align: center;}

замените на:
#breadcrumbs {z-index: -1;position: relative;color: #ffffff;border-bottom: 1px solid #E5E5E5;margin-bottom: 15px;background: #111111;padding: 20px 0;text-align: center;}


#10 mrsimon90

mrsimon90

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 50 сообщений

Отправлено 11 Апрель 2018 - 11:16

Просмотр сообщенияVaccina (11 Апрель 2018 - 01:50) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
.overlay {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
}

замените на:
.overlay {
position: fixed;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
}

далее зайдите в main.css - найдите:
#breadcrumbs {position: relative;color: #ffffff;border-bottom: 1px solid #E5E5E5;margin-bottom: 15px;background: #111111;padding: 20px 0;text-align: center;}

замените на:
#breadcrumbs {z-index: -1;position: relative;color: #ffffff;border-bottom: 1px solid #E5E5E5;margin-bottom: 15px;background: #111111;padding: 20px 0;text-align: center;}
Спасибо! Сможете помочь с еще одним последним штрихом? Хочу что бы при наведении мыши на фото она "мутнела" самостоятельно это сделать у меня не получилось

#11 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 673 сообщений

Отправлено 12 Апрель 2018 - 12:49

Просмотр сообщенияmrsimon90 (11 Апрель 2018 - 11:16) писал:

Спасибо! Сможете помочь с еще одним последним штрихом? Хочу что бы при наведении мыши на фото она "мутнела" самостоятельно это сделать у меня не получилось
Здравствуйте, добавьте в конец файла main.css код
.gallery ul.img-list img:hover {
	filter: blur(1px);
}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных