Сообщений в теме: 14

[lokdog]

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

[empty9228]

Здравствуйте! Да, это можно сделать. Скажите свой номер аккаунта, покажите где на сайте вы хотите все это делать, опишите задачу более подробно.

[lokdog]

Номер SL-243089. http://mytehnika.storeland.ru/

Хочу сделать как на этом сайте http://sernata.ru/
только здесь один большой слайдер, а мне нужно сделать несколько с произвольным размещение, один слева и один справа или один под другим, пока еще не решил как лучше и чтоб каждая картинка слайдера была ссылкой.

[empty9228]

Попробуйте для начала поставить один слайдер, инструкция по установке есть здесь http://storeland.ru/about/faq#51

[lokdog]

сделал

[empty9228]

Посмотрите вот эти темы, в них обсуждались ваши вопросы
1) http://forum.storela...ров-на-главной/
2)http://forum.storela...3-два-слайдера/

[lokdog]

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

<!-- Непосредственный код слайдера -->

<div id="slider1">

<img src="http://storeland.ru/...der/slider.jpg" alt="" />

<a href="/"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>

<img title="Пример картинки с заголовком" src="http://storeland.ru/...r/toystory.jpg" alt="" />

<img src="http://storeland.ru/...ider/walle.jpg" alt="" />

<img src="http://storeland.ru/...lider/cars.jpg" alt="" />

</div>
</div>
<div id="slider2">

<img src="http://storeland.ru/...der/slider.jpg" alt="" />

<a href="/"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>

<img title="Пример картинки с заголовком" src="http://storeland.ru/...r/toystory.jpg" alt="" />

<img src="http://storeland.ru/...ider/walle.jpg" alt="" />

<img src="http://storeland.ru/...lider/cars.jpg" alt="" />

</div>
</div>

[empty9228]

Восстановитесь. Обе темы попробовали?

[lokdog]

да, сделал как там было написано, имя вторго слайдера заменил на slider2, а первый оставил как было, теперь первый слайдер отображается нормально а второй превратился в картинки, вот код
<!-- Непосредственный код слайдера -->

<div id="slider">

<img src="http://storeland.ru/...der/slider.jpg" alt="" />

<a href="/"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>

<img title="Пример картинки с заголовком" src="http://storeland.ru/...r/toystory.jpg" alt="" />

<img src="http://storeland.ru/...ider/walle.jpg" alt="" />

<img src="http://storeland.ru/...lider/cars.jpg" alt="" />

</div>
</div>
<div id="slider2">

<img src="http://storeland.ru/...der/slider.jpg" alt="" />

<a href="/"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>

<img title="Пример картинки с заголовком" src="http://storeland.ru/...r/toystory.jpg" alt="" />

<img src="http://storeland.ru/...ider/walle.jpg" alt="" />

<img src="http://storeland.ru/...lider/cars.jpg" alt="" />

</div>
</div>
<!-- Запуск слайдера -->

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider().parent().show(); });

</script>

{% ENDIF %}
        {BODY}
































$(window).load(function() {

$('#slider').nivoSlider().parent().show(); });

[support 2.0]

lokdog (25 Октябрь 2013 - 12:50) писал:

да, сделал как там было написано, имя вторго слайдера заменил на slider2, а первый оставил как было, теперь первый слайдер отображается нормально а второй превратился в картинки, вот код

измените

$('#slider').nivoSlider().parent().show(); });

на

$('#slider, #slider2').nivoSlider().parent().show(); });

Также для того, чтобы добавить ссылки на страницы к изображениям, измените

<img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" />
<a href="/"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>
<img title="Пример картинки с заголовком" src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" />
<img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" />
<img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" />

на

<a href="#"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" /></a>
<a href="#"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>
<a href="#"><img title="Пример картинки с заголовком" src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" /></a>
<a href="#"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" /></a>
<a href="#"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" /> </a>

вместо # вставьте ссылку на нужную страницу

[lokdog]

Получилось! теперь вопрос - как изменить размеры слайдеров и их взаимное расположение на странице?

[lokdog]

чтобы один был слева, а другой справа

[ne_yana]

lokdog (25 Октябрь 2013 - 16:25) писал:

Получилось! теперь вопрос - как изменить размеры слайдеров и их взаимное расположение на странице?

Здравствуйте, замените

<div class="theme-default" style="padding: 1em; display: none;">

на

<div class="theme-default" id="theme-slider" style="padding: 1em; display: none;">

перед строкой

<div id="slider2">

вставьте

<div class="theme-default" id="theme-slider2" style="padding: 1em; display: none;">

Чтобы изменить размер 1-го слайдера, добавьте в файл nyvo.css

#theme-slider {
width: 100%;
float:left;
}

и изменяйте значение параметра width на желаемое.
Аналогично, для второго слайдера:

#theme-slider2 {
width: 100%;
float:right;
}

[lokdog]

спасибо, здесь все получилось...но их расположение осталось хаотичным, как теперь задать именно то расположение каждого слайдера которое мне нужно?

[ne_yana]

lokdog (25 Октябрь 2013 - 17:30) писал:

спасибо, здесь все получилось...но их расположение осталось хаотичным, как теперь задать именно то расположение каждого слайдера которое мне нужно?

Замените

#theme-slider2 {
width: 50%;
float: right;
}

на

#theme-slider2 {
width: 50%;
float: right;
margin-right: -24px;
}

и

#theme-slider {
width: 50%;
float: left;
}

на

#theme-slider {
width: 50%;
float: left;
margin-left: -24px;
}