Внимание: галерею (слайдер с прокруткой и увеличением изображений по клику) и слайдер отзывов можно создать использовав готовые инструменты нашего редактора:
Скриптовая реализация нестандартного слайдера:
Данная опция не входит в функционал платформы и является лишь наглядной демонстрацией по корректной интеграции кода галереи. В связи с этим подразумевается, что все улучшения, необходимые в частных случаях, должны производиться пользователями самостоятельно!
Наглядный пример предложенной галереи вы можете просмотреть и протестировать здесь.
1. Скопируйте код (Part 1), размещенный здесь, и вставьте его через инструмент “Скрипты” перед тегом </BODY>.
2. Скопируйте код (Part 2), размещенный здесь, и вставьте его через инструмент “Скрипты” внутри тега <HEAD>.
3. Через инструмент “Произвольный HTML” интегрируйте код, размещенный тут.
Внимание! Вместо http://URLизображения/1.png (и прочих) нужно указать ссылки на изображения, которые должны отображаться в галерее!
Количество изображений может быть разным. Все изображения должны размещаться либо на собственном хостинге, либо в каком-то файловом хранилище, к которому есть доступ через Глобальную Сеть.
Сделал все как написано выше, Почему то не работает?
Обратитесь в службу поддержки, заполнив форму обратной связи: http://lpgenerator.ru/help/ (http://lpgenerator.ru/help/)
В HTML вставить:
prev
next
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
Внутри тега
.image_carousel {
padding: 7px 7px;
position: relative;
background-color: #333333;
width: 600px;
height: 214px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 0px;
margin: 0 1px;
display: block;
float: left;
}
a.prev, a.next {
background: url(http://media.lpgenerator.ru/images/10285/miscellaneoussprite1_1.png) no-repeat transparent;
width: 45px;
height: 50px;
display: block;
position: absolute;
top: 85px;
}
a.prev { left: -38px;
background-position: 0 0; }
a.prev:hover { background-position: 0 -50px; }
a.prev.disabled { background-position: 0 -100px !important; }
a.next { right: -38px;
background-position: -50px 0; }
a.next:hover { background-position: -50px -50px; }
a.next.disabled { background-position: -50px -100px !important; }
a.prev.disabled, a.next.disabled {
cursor: default;
}
a.prev span, a.next span {
display: none;
}
.pagination {
text-align: center;
position: relative;
top:10px;
}
.pagination a {
background: url(http://media.lpgenerator.ru/images/10285/miscellaneoussprite1_1.png) 0 -300px no-repeat transparent;
width: 15px;
height: 16px;
margin: 0 5px 0 0;
display: inline-block;
}
.pagination a.selected {
background-position: -25px -300px;
cursor: default;
}
.pagination a span {
display: none;
}
.clearfix {
float: none;
clear: both;
}
.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;
}
Перед тегом
Вот так работает.
А можно сделат, чтобы он автоматически менял изображение
можно...на странице выбираем вкладку "HTMl" и вставляем туда)
соответственно заменяя ссылки типа "http://media.lpgenerator.ru/images/15162/2_4.100x100.jpg" на свои)
Простая замена картинок с помощью JQuery
div#rotator {position:relative; height:150px; margin-left: 15px;}
div#rotator ul li {float:left; position:absolute; list-style: none;}
div#rotator ul li.show {z-index:500;}
function theRotator() {
// Устанавливаем прозрачность всех картинок в 0
$('div#rotator ul li').css({opacity: 0.0});
// Берем первую картинку и показываем ее (по пути включаем полную видимость)
$('div#rotator ul li:first').css({opacity: 1.0});
// Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
setInterval('rotate()',5000);
}
function rotate() {
// Берем первую картинку
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
// Берем следующую картинку, когда дойдем до последней начинаем с начала
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
// Расскомментируйте, чтобы показвать картинки в случайном порядке
// var sibs = current.siblings();
// var rndNum = Math.floor(Math.random() * sibs.length );
// var next = $( sibs[ rndNum ] );
// Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
// Прячем текущую картинку
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
// Запускаем слайдшоу
theRotator();
});
Добрый день, Dim0n-RMZ.
Подскажите, а как можно сделать так, чтобы слайдер менялся вбок, а не вниз?
Добрый день! Спасибо за статью, очень помогла! Подскажите, а можно прикрутить к изображение ссылку?
как слайдер был из одной картинки? а не из 3 как в данном случае? http://prntscr.com/1dqy17
Здравствуйте!
Павел Замятин (https://lpgenerator.zendesk.com/users/409460678), можно. Добавьте его с помощью инструмента "Изображение" и в меню справа вставьте нужную ссылку.
Сергей (https://lpgenerator.zendesk.com/users/417268671), Вы можете модифицировать код сами или найти решение в интернете. Любой слайдер можно интегрировать аналогично тому, что описан в этом примере.
Подскажите пожалуйста, как вставить вот такой слайдер http://pcvector.net/scripts/slideshow_and_scroller/374-mobilyslider-prostoy-jquery-slayder.html в lpgenerator? Методом научного тыка не смог разобраться((
Сделал всё по инструкции, переделал уже 5 раз. получается что в галлерее стоят 3 картинки и все остальные под галлереей расположились по 2 штуки в столбик! Может код неправильно написан, или в скрипте что то не так? помогите пожалуйста, очень нужно! Благодарю!
Здравствуйте! А можно ли сделать так, чтобы в слайдере показывались не 3 сразу картинки, а 1?
Добрый день! Создала 2 галереи с автоматической сменой. Первая вообще не работает. Вторая работает, съедая 2 изображения( т.е. из 4 возможных показывает только 2). В чем может быть проблема?
Не работает оно. Напишите пожалуйста нормальный код.
А два таких слайдера можно поставить на одну страницу?
непонятно как сделать чтобы в окне была одна картинка с последующими перелиставающими другими картинками
у меня есть картинки, как мне теперь добавить ссылки на эти картинки?
Здравствуйте.При дублировании слайдера все криво, картинки в столбик.Как исправить?
а куда надо добавлять картинку я не понял
сделала все по инструкции, но ничего не работает. Картинки показываются все сразу столбиками вниз. ИСПРАВЬТЕ ОШИБКУ
Такая же проблема как у предыдущего... картинки все разом и в столбец.
Здравствуйте!
Подобная проблема возникает обычно при конфликте библиотек (если у Вас, например, также на странице находятся всплывающие окна или галерея) или при некорректной интеграции кода. Напишите по адресу support@lpgenerator.ru с указанием проблемы и страницы, на которой она возникла. Наши специалисты помогут все настроить.
Здравствуйте. Почему картинки на слайдере не четкие? От разрешения зависит? Какой размер можно вставлять?
Здравствуйте, Олег!
Можно вставлять изображения любого размера.
Но если Ваше изображение небольшое (например 260х194 px), а в коде Вы растягиваете его ширину и высоту соответствующими параметрами (например, width="500" height="500") , то картинка будет нечеткой.
Данные параметры должны соответствовать размеру исходного изображения.
Размер картинки рекомендуем редактировать до его загрузки в медиа-галерею.
Здравствуйте как изменить цвет и размер шрифта в слайдере? Как вообще реализован слайдер тут: http://lpgenerator.ru/store/preview/314/
Здравствуйте!
Возможно, Вы имели ввиду слайдер-отзывов. Цвет и размер шрифта можно изменить с помощью javascript-кода. Обратитесь по адресу support@lpgenerator.ru, мы вышлем Вам соответствующий скрипт.
Здравствуйте, я мне очень нужно сделать слайдер как вот на этом сайте http://dev.landingpage.bz/grand-wending/
Руки не доходят, хотя он на вид не сложный. Может кто сможет помочь скриптом?
Здравствуйте, Сергей!
Служба технической поддержки оказывает всяческую помощь в рамках перечня наших скриптов и инструментов. Если же требуется нестандартное решение, необычная реализация или дополнительный функционал, — всё это возможно через отдел вёрстки и дизайна. Запросить более подробную консультацию вы можете со страницы http://verstka.lpgenerator.ru/
Вот еще хороший вариантик - http://siteacademy.ru/index.php/css/39-css/fast-hover-slideshow