Обратите внимание: сейчас в нашем редакторе есть готовый виджет, позволяющий создавать увеличение изображений на лендингах без скриптов. Рекомендуем использовать именно его:
По многочисленным просьбам пользователей, предлагаем вашему вниманию реализацию галереи изображений с увеличением по клику из миниатюры.
Данная опция не входит в функционал платформы и является лишь наглядной демонстрацией по корректной интеграции кода галереи. В связи с этим подразумевается, что все улучшения, необходимые в частных случаях, должны производиться пользователями самостоятельно!
Наглядный пример предложенной галереи вы можете просмотреть и протестировать здесь.
Как сделать галерею с увеличением по клику?
1. Скопируйте код отсюда (Part_1) и вставьте его через инструмент “Скрипты” внутри тега <HEAD>.
2. Скопируйте код отсюда (Part_2) и вставьте его через инструмент “Скрипты” перед тегом </BODY>.
3. Через инструмент “Произвольный HTML” вставляем блок миниатюр, скопировав код отсюда (Part_3).
Внимание! Вместо http://URLизображения/1.png (и прочих) нужно указать ссылки на изображения, которые должны отображаться в галерее!
4. Через инструмент “Произвольный HTML” вставляем блок полноформатных изображений, скопировав код отсюда (Part_4).
Внимание! Вместо http://URLизображения/1.png (и прочих) нужно указать ссылки на изображения, которые должны отображаться в галерее!
Количество изображений может быть разным. Все изображения должны размещаться либо на собственном хостинге, либо в каком-то файловом хранилище, к которому есть доступ через Глобальную Сеть.
С уважением,
техническая поддержка LPgenerator
Здравствуйте. Это нормально, что когда добавляешь на страницу миниатюру с увеличением по данной инструкции, "всплывающая" PopUp-форма, ранее созданная на странице, перестает работать (кнопка начинает срабатывать как ссылка)?
Та же самая проблема - при добавлении обоих скриптов (попап Заказать звонок и увеличение из миниатюры) работает только один. (тот скрипт, чей код оказался на странице ниже).
Можно ли сделать так, чтобы работали оба скрипта?
Скорее всего конфликт двух версий jquery.
Удалите одно из подключений.
Например, это:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
не работает то что тут написано!Что делать?
Не работает! Вместо миниатюр показывает полноразмерные изображения
Здравствуйте, пользователь i!
Обратите внимание, что Вы забыли вставить первую часть кода скрипта (п.1 руководства) внутри тега .
А также вставьте блоки миниатюр и увеличенных изображений с помощью инструмента "HTML".
Да нет, не забыл. Непонятно почему вы так решили.
Насколько мы можем видеть, Вы пытались сделать галерею увеличивающихся по клику изображений на Вашей странице http://lpgenerator.ru/var/60229/ (http://lpgenerator.ru/var/60229/) Сейчас на этой странице в скриптах у Вас вставлена только вторая часть кода.
На будущее, пожалуйста, указывайте страницу, где у Вас возникает проблема, чтобы мы могли проверить, что не так.
подскажите пожалуйста, где можно изменить координаты миниатюрных изображений?на сколько я разобралась, в частях кода, который вставляется нет строк отвечающих за это. спасибо.
в смысле координаты расположения на странице
Как сделать галерею по горизонтали, а не вертикали?
и как можно сделать слайдер из портфолио работ, как на сайте femedia.ru например?
Чтобы отобразить галерею по горизонтали, нужно доработать код.
Вы можете встроить любой слайдер способом, аналогичным тому, что есть в описании.
Код можно заказать у JS-разработчика и/или поискать в Сети.
Еще один вопрос:
добавил скрипт увеличиния фото при клике на миниатюру.
Позже добавил кнопку с поп-ап формой заказать звонок.
Скрипт с фото перестал работать.
Почему? http://pr.radugakzn.ru/ (http://pr.radugakzn.ru/)
Всплывающие фото могут быть не прозрачными?а то через них просвечивает текст
Поменяйте порядок слоев в редакторе с помощью кнопок "Перед"/"Назад". Текстовые блоки, видимо, находятся поверх html-кода.
Работает, кроме того, что изображение по клику открывается такого же размера, что и миниатюра
http://lpgenerator.ru/var/69345/ (http://lpgenerator.ru/var/69345/)
делал для пробы
Подскажите как изменить размер изображения перед кликом и после него?
Здравствуйте!
Самый простой способ изменить размер изображений в графическом редакторе, как для миниатюр, так и для полноформатных изображений. А в код уже вставлять ссылки на отредактированные изображения.
Либо можно прописать в коде параметры width и height с нужными значениями.
Добавьте, пожалуйста, хоть самый простой лайтбокс!
это актуально для всех пользователей системы - при клике на миниатюру открывается ни одна единственная картинка, а открывается она и есть возможность прокликать на следующую и т.д.
спасибо заранее!
Здравствуйте.
http://lpgenerator.ru/var/86976/ это страница, на которой пыталась сделать. Не работает.Помогите, что не так я сделала.
Заранее спасибо.
Добрый день! удалаю как сказано выше или <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">.
короче если удалить один из них то большое изображение появляеться справа экрана, если оба оставить, то картинка по центру, но попуп не робит.
Здравствуйте, Ильгиз!
Возникает конфликт скриптов всплывающей формы и галереи.
Вставьте строку
в второй строкой в код всплывающей формы, а из второй части скрипта галереи удалите.
Блин если правильно понял,
то скрипт формы попап выглядит так:
а скрипт галереи так:
тогда оба скрипта не работают. Может руки кривые ?????
Здравствуйте, Ильгиз!
Да, так. Вторую часть скрипта галереи Вы не удаляли? нужно только перенести указанную строку в скрипт всплывающей формы, остальное все должно остаться. Рекомендуем воспользоваться тикет-системой, если Вам не удастся самостоятельно решить проблему. Напишите нам и укажите на какой странице Вы пытаетесь добавить галерею.
Все остальное на месте, я написал только "верхушки" скриптов. Все остально в скриптах на месте как и было. И в таком виде оба скритпа не работают.
Подскажите сточку кода, куда и после чего его вставить чтобы поднять выше увеличенное после клика изображение... Спасибо...
я решил проблему. Я знаю как связать pop-up и увеличение по клику. Два скрипта и дело сделано.
Перед тегом BODY
$(function() {
$('body').append('<div id="block-popup"></div>'); //создаем пустой popup
$('#block-popup').append($('#block-new178').css('position', 'static')); //переносим в него форму. id будет отличаться для каждой страницы
$('#block-popup').append($('#block-new179').css('position', 'static')); //переносим кнопку в попап
$('#block-popup').hide(); //скрываем попап
$('#block-new116,#block-new141,#block-new124,#block-new142,#block-new143,#block-new144,#block-new145,#block-new123,#block-new147,#block-new125,#block-new148,#block-new149,#block-new150,#block-new151,#block-new152,#block-new153,#block-new154,#block-new155,#block-new156,#block-new157,#block-new158,#block-new159 a').click(function() { //обработчик клика на кнопку. id тоже будет меняться
$("#block-popup" ).dialog({ //инициализация диалога
height: 345, width: 460, modal: true
});
return false; // не даем кнопке сработать как ссылке
});
})
$(function() {
$("img[rel]").overlay();
});
Внутри тега HEAD
.simple_overlay {
display:none;
position:fixed;
z-index:10000000;
background-color:#333;
/width:675px;/
/* min-height:200px;*/
margin: auto auto;
border:1px solid #666;
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(http://jquerytools.org/media/img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
.ui-widget-overlay, .ui-dialog{
}
p.s. нужны скрипты именно версии jquery 1.8.1
p.s.s. Часть "part_2" - не нужна
Рад помочь,
Богдан
Вопрос.
А как вставить 2,3 или 4 галереи?
Здравствуйте!
Скрипт галереи добавьте один раз, а html-блоков с кодом миниатюр и полноформатных изображений можно добавить сколько Вам нужно.