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


Как Сделать Галерею ?


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

#1 denet

denet

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

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

Отправлено 07 Март 2016 - 12:56

Здравствуйте, как сделать галерею на ка какой нить странички, что бы при нажатий на картинку она увеличивалась?

#2 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 07 Март 2016 - 17:33

Просмотр сообщенияdenet (07 Март 2016 - 12:56) писал:

Здравствуйте, как сделать галерею на ка какой нить странички, что бы при нажатий на картинку она увеличивалась?

Здравствуйте. Правильно ли я Вас понимаю, что необходимо в каталоге и для товаров на главной сделать эффект, как в карточке товара? Увеличение картинки при клике на нее?

#3 denet

denet

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

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

Отправлено 08 Март 2016 - 02:15

Просмотр сообщенияRedHead (07 Март 2016 - 17:33) писал:

Здравствуйте. Правильно ли я Вас понимаю, что необходимо в каталоге и для товаров на главной сделать эффект, как в карточке товара? Увеличение картинки при клике на нее?
нет, мне надо что бы я допустим создал какую нибудь статью и добавил туда картинку и что бы она увеличилась

#4 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 08 Март 2016 - 12:48

Просмотр сообщенияdenet (08 Март 2016 - 02:15) писал:

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

Приведите, пожалуйста, пример страницы и на базе ее мы покажем как сделать.

#5 denet

denet

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

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

Отправлено 11 Март 2016 - 00:48

Мне надо что бы я создал страничку на сайте к примеру (Наши фото) и загрузил туда картинки и когда кто клиент захочет посмотреть картинку в большом формате он на неё кликает и она увеличивается вот так к примеру

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

  • lightbox1.jpg


#6 Vaccina

Vaccina

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

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

Отправлено 11 Март 2016 - 02:00

В конец main.js вставьте:
$(document).ready(function() {
$(".other_item").fancybox({
  openEffect : 'none',
  closeEffect : 'none'
});
});

В редактировании страницы Наши фото нажмите Источник и вставляйте фото по примеру:
<a class="other_item" href="ссылка на картинку или фото"><img alt="" src="ссылка на картинку или фото" /></a>


#7 denet

denet

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

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

Отправлено 13 Март 2016 - 01:35

Просмотр сообщенияVaccina (11 Март 2016 - 02:00) писал:

В конец main.js вставьте:
$(document).ready(function() {
$(".other_item").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});

В редактировании страницы Наши фото нажмите Источник и вставляйте фото по примеру:
<a class="other_item" href="ссылка на картинку или фото"><img alt="" src="ссылка на картинку или фото" /></a>

спасибо большое

#8 unnamed

unnamed

    Новичок

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

Отправлено 30 Март 2016 - 20:56

Доброе время суток! Спасибо за эту инфу, но кое-чего мне не хватает.
Не знаю как поставить себе элемент тайтл как su-custom-gallery-slide отсюда http://vladimirskaya....ru/cveta-ldsp/ ,
т.е. чтобы при наведении мыши на маленьком изображении появился тайтл.

#9 Vaccina

Vaccina

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

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

Отправлено 31 Март 2016 - 05:03

Если использовать стандартные средства, то достаточно добавить атрибут title="ваш текст" пример:
<img alt="" title="ваш текст" src="ссылка на картинку или фото" />


#10 unnamed

unnamed

    Новичок

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

Отправлено 31 Март 2016 - 05:22

Просмотр сообщенияVaccina (31 Март 2016 - 05:03) писал:

Если использовать стандартные средства, то достаточно добавить атрибут title="ваш текст" пример:
<img alt="" title="ваш текст" src="ссылка на картинку или фото" />
Вы меня не поняли, нужно чтобы как например у меня в каталоге(http://vladimir.storeland.ru), при наведении картинка менялась,
при простом же указании надпись появляется под курсором, что не очень красиво.

#11 Vaccina

Vaccina

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

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

Отправлено 31 Март 2016 - 05:53

Переделайте пожалуйста, хотя бы одну картинку по следующему примеру:
<a class="other_item" href="http://st.storeland.net/6/1852/226/-lokarno.jpg" style="line-height: 18.2px;" title="Яблоня Локарно">
  <img alt="Яблоня Локарно" src="http://st.storeland.net/8/1852/133/-lokarno-100x100.jpg" style="opacity: 0.9;" title="Яблоня Локарно">
  <div>Яблоня Локарно</div>
</a>

то есть убрать перенос строки <br/> и само название обрамить в теги <div></div>

В main.css добавьте:
.other_item {
	position: relative;
}
.other_item div {
	position: absolute !important;
	width: 100%;
	padding: 5px !important;
	background: rgba(0,0,0,0.5);
	color: #fff;
	top: 13px;
	height: 50px;
	display: block;
	left: 0;
	opacity: 0;
	right: 0;
}
.other_item:hover div {
	opacity: 1;
}


#12 unnamed

unnamed

    Новичок

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

Отправлено 31 Март 2016 - 05:57

Просмотр сообщенияVaccina (31 Март 2016 - 05:53) писал:

Переделайте пожалуйста, хотя бы одну картинку по следующему примеру:
<a class="other_item" href="http://st.storeland.net/6/1852/226/-lokarno.jpg" style="line-height: 18.2px;" title="Яблоня Локарно">
<img alt="Яблоня Локарно" src="http://st.storeland.net/8/1852/133/-lokarno-100x100.jpg" style="opacity: 0.9;" title="Яблоня Локарно">
<div>Яблоня Локарно</div>
</a>

то есть убрать перенос строки <br/> и само название обрамить в теги <div></div>

В main.css добавьте:
.other_item {
position: relative;
}
.other_item div {
position: absolute !important;
width: 100%;
padding: 5px !important;
background: rgba(0,0,0,0.5);
color: #fff;
top: 13px;
height: 50px;
display: block;
left: 0;
opacity: 0;
right: 0;
}
.other_item:hover div {
opacity: 1;
}
Спасибо, заработало!
Только если после подключаешься к визуальному типу редактирования страницы, он всё ломает. Но это не беда.
Актуально для темы Город.

#13 tsar

tsar

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

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

Отправлено 08 Февраль 2017 - 00:44

...сорри, пока писал пост, проблема решилась...

Сообщение отредактировал tsar: 08 Февраль 2017 - 00:57





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

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