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


Фотогалерея И Отзывы


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

#1 Илья717

Илья717

    Пользователь

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

Отправлено 27 Декабрь 2016 - 22:09

Здравствуйте! Прошу помощи - необходимо создать 2 страницы (сами страницы создал), на одно из них должна быть полноценная фотогалерея работ, порядка 50-90 фотографий, с превьюшками и кнопками навигации, на второй, по аналогии с первой отзывы в виде картинок. Кол-во тоже не менее 50 штук. Как это воплотить? Нашел на форуме руководство, но там кол-во картинок то 8, то чуть более, а мне нужно более! Помогите пож-ста! СПАСИБО!

#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 28 Декабрь 2016 - 03:40

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

Уточните пожалуйста, что вы подразумеваете под кнопками навигации, на первой странице должна быть карусель с перелистыванием картинок?
Как вариант, можно создать категорию Фотогалерея, каждый альбом создавать как отдельный товар, и в каждом товаре уже добавлять множество фото.
Если данный вариант не устроит, то укажите пожалуйста пример реализации.

#3 Илья717

Илья717

    Пользователь

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

Отправлено 28 Декабрь 2016 - 05:20

Просмотр сообщенияVaccina (28 Декабрь 2016 - 03:40) писал:

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

Уточните пожалуйста, что вы подразумеваете под кнопками навигации, на первой странице должна быть карусель с перелистыванием картинок?
Как вариант, можно создать категорию Фотогалерея, каждый альбом создавать как отдельный товар, и в каждом товаре уже добавлять множество фото.
Если данный вариант не устроит, то укажите пожалуйста пример реализации.
Здравствуйте. Спасибо за отклик! Мне бы хотелось воплатить что-то подобное - http://ок-потолок.рф...nt/view/96/183/
аккаунт - p214287

#4 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 28 Декабрь 2016 - 07:05

Благодарю за наглядный пример, все даже полегче можно реализовать =)
Старую галерею удалите.

Картинки вставляйте в описание страницы\товара через "Источник" следующим образом:
<a href="ссылка на картинку 1"><img alt="" src="ссылка на картинку 1"></a>
<a href="ссылка на картинку 2"><img alt="" src="ссылка на картинку 2"></a>
<a href="ссылка на картинку 3"><img alt="" src="ссылка на картинку 3"></a>
<a href="ссылка на картинку 4"><img alt="" src="ссылка на картинку 4"></a>
<a href="ссылка на картинку 5"><img alt="" src="ссылка на картинку 5"></a>

текст только замените на ссылки, количество можете любое вставлять, после них сразу вставляете:

<style>
  .htmlDataBlock img{max-width:100px;height:auto;margin:10px;}
</style>
<script>
$('.htmlDataBlock').magnificPopup({
		delegate: 'a',
		type: 'image',
		closeOnContentClick: false,
		closeBtnInside: false,
		image: {
			verticalFit: true
		},
		gallery: {
			enabled: false
		},
		zoom: {
			enabled: true,
			duration: 300, // не изменить длительность и в CSS
			opener: function(element) {
				return element.find('img');
			}
		}
	});
</script>


#5 Илья717

Илья717

    Пользователь

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

Отправлено 28 Декабрь 2016 - 07:20

Просмотр сообщенияVaccina (28 Декабрь 2016 - 07:05) писал:

Благодарю за наглядный пример, все даже полегче можно реализовать =)
Старую галерею удалите.

Картинки вставляйте в описание страницы\товара через "Источник" следующим образом:
<a href="ссылка на картинку 1"><img alt="" src="ссылка на картинку 1"></a>
<a href="ссылка на картинку 2"><img alt="" src="ссылка на картинку 2"></a>
<a href="ссылка на картинку 3"><img alt="" src="ссылка на картинку 3"></a>
<a href="ссылка на картинку 4"><img alt="" src="ссылка на картинку 4"></a>
<a href="ссылка на картинку 5"><img alt="" src="ссылка на картинку 5"></a>

текст только замените на ссылки, количество можете любое вставлять, после них сразу вставляете:

<style>
.htmlDataBlock img{max-width:100px;height:auto;margin:10px;}
</style>
<script>
$('.htmlDataBlock').magnificPopup({
	 delegate: 'a',
	 type: 'image',
	 closeOnContentClick: false,
	 closeBtnInside: false,
	 image: {
		 verticalFit: true
	 },
	 gallery: {
		 enabled: false
	 },
	 zoom: {
		 enabled: true,
		 duration: 300, // не изменить длительность и в CSS
		 opener: function(element) {
			 return element.find('img');
		 }
	 }
});
</script>
Большое спасибо за ответ!!! А как сделать, чтобы при клике на картинку она открывалась как всплывающая страница, так как это реализованно по моей ссылке выше? И можно ли как-то сделать навигацию, стрелки для перелистывания картинок?
И вот еще что пишет, после добавления -

Как исправить ошибку?



1. Возможно, Вы недавно вносили изменения на сайт, и кэш браузера ещё не обновился. Для решения проблемы можно немного подождать или просто обновить страницу с помощью сочетания клавиш: CTRL+SHIFT+R или CTRL+F5
2. Возможно, Вы добавили сторонний скрипт на сайт, который не верно работает. В этом случае, в разделе «Сайт» > «Редактор шаблонов» восстановите последний работающий бэкап.
3. Возможно, Вы забыли загрузить/подключить один из файлов скриптов. В этом случае добавьте его и пропишите в шаблоне «HTML» код <script src="{ASSETS_JS_PATH}ФАЙЛ.JS"></script>, через «Редактор шаблонов».
4. Возможно, Вы ошиблись в синтаксисе javascript файла. В этом случае откатите последние добавленные изменение в js файлах в разделе «Редактор шаблонов».
5. Если необходимо помочь в решении данной ошибки, напишите вопрос или посмотрите готовые решения похожих проблем в разделе "Ошибки" на нашем форуме.

Спасибо!

#6 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 28 Декабрь 2016 - 07:35

На самом деле код, не работает, причина в том, что портится код блока:
<style>
.htmlDataBlock img{max-width:100px;height:auto;margin:10px;}
</style>
<script>
$('.htmlDataBlock').magnificPopup({
		 delegate: 'a',
		 type: 'image',
		 closeOnContentClick: false,
		 closeBtnInside: false,
		 image: {
				 verticalFit: true
		 },
		 gallery: {
				 enabled: false
		 },
		 zoom: {
				 enabled: true,
				 duration: 300, // не изменить длительность и в CSS
				 opener: function(element) {
						 return element.find('img');
				 }
		 }
});
</script>

Давайте его вынесем, удалите его в источнике, оставьте только сами картинки:
<a href="ссылка на картинку 1"><img alt="" src="ссылка на картинку 1"></a>
<a href="ссылка на картинку 2"><img alt="" src="ссылка на картинку 2"></a>
<a href="ссылка на картинку 3"><img alt="" src="ссылка на картинку 3"></a>
<a href="ссылка на картинку 4"><img alt="" src="ссылка на картинку 4"></a>
<a href="ссылка на картинку 5"><img alt="" src="ссылка на картинку 5"></a>

Далее зайдите в раздел Сайт - Редактор шаблонов - Страница - в самом конце вставьте:
{% IF PAGE_NAME = Фотографии наших букв-подушек, комфортеров и других работ %}
<style type="text/css">.htmlDataBlock img{max-width:100px;height:auto;margin:10px;}</style>
<script>
$('.htmlDataBlock').magnificPopup({
		 delegate: 'a',
		 type: 'image',
		 closeOnContentClick: false,
		 closeBtnInside: false,
		 image: {
				 verticalFit: true
		 },
		 gallery: {
				 enabled: true
		 },
		 zoom: {
				 enabled: true,
				 duration: 300,
				 opener: function(element) {
						 return element.find('img');
				 }
		 }
});
</script>
{% ENDIF %}


#7 Илья717

Илья717

    Пользователь

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

Отправлено 28 Декабрь 2016 - 11:18

Большое Вам спасибо!!! И с Наступающим Вас!!!




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

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