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


Размещение Слайдера На Главной Странице Со Специальными Размерами И Положением.

Слайдер размещение размер

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

#1 origina1

origina1

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

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

Отправлено 27 Август 2014 - 11:36

Доброго дня! Аккаунт SL-199076, ВФУТБОЛКЕ.РФ

Необходимо вставить слайдер со стрелками (для возможности перемотки). Баннер должен в точности соответствовать размеру картинки установленной сейчас. И сразу хотелось бы подробно узнать как добавлять изображения в слайдер и есть ли ограничения по их количеству. Заранее спасибо.

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

  • 11222.jpg


#2 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 27 Август 2014 - 11:39

Просмотр сообщенияorigina1 (27 Август 2014 - 11:36) писал:

Доброго дня! Аккаунт SL-199076, ВФУТБОЛКЕ.РФ

Необходимо вставить слайдер со стрелками (для возможности перемотки). Баннер должен в точности соответствовать размеру картинки установленной сейчас. И сразу хотелось бы подробно узнать как добавлять изображения в слайдер и есть ли ограничения по их количеству. Заранее спасибо.
Здравствуйте.
Что бы установить слайдер воспользуйтесь темой http://storeland.ru/about/faq#51 , ограничений по количеству изображений нету.

#3 origina1

origina1

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

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

Отправлено 27 Август 2014 - 12:07

Просмотр сообщенияbatta (27 Август 2014 - 11:39) писал:

Здравствуйте.
Что бы установить слайдер воспользуйтесь темой http://storeland.ru/about/faq#51 , ограничений по количеству изображений нету.

А как его сделать нужными размерами, и сдлеать его после "Оформить заявку" ?

#4 MikDark

MikDark

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

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

Отправлено 27 Август 2014 - 12:31

Просмотр сообщенияorigina1 (27 Август 2014 - 12:07) писал:

А как его сделать нужными размерами, и сдлеать его после "Оформить заявку" ?

Лучше и проще поставить его перед этим заголовком. Сам заголовок у Вас идет в коде страницы, туда устанавливать и редактировать слайдер не очень удобно. Произведите изменения согласно инструкции и далее поможем Вам его отредактировать и перенести.

#5 origina1

origina1

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

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

Отправлено 27 Август 2014 - 17:28

Просмотр сообщенияMikDark (27 Август 2014 - 12:31) писал:

Лучше и проще поставить его перед этим заголовком. Сам заголовок у Вас идет в коде страницы, туда устанавливать и редактировать слайдер не очень удобно. Произведите изменения согласно инструкции и далее поможем Вам его отредактировать и перенести.

В файле HTML не обнаруживает следующее

<!-- Скрипты магазина -->

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

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

  • Безымянный.png


#6 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 27 Август 2014 - 17:32

Просмотр сообщенияorigina1 (27 Август 2014 - 17:28) писал:

В файле HTML не обнаруживает следующее

<!-- Скрипты магазина -->

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

Здравствуйте.
В шаблоне html найдите
  <!-- Скрипты магазина -->
  <script src="{ASSETS_JS_PATH}main.js"></script>
И замените на
  <!-- Скрипты магазина -->
  <script rel="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>


#7 origina1

origina1

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

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

Отправлено 27 Август 2014 - 18:15

Просмотр сообщенияDanil (27 Август 2014 - 17:32) писал:

Здравствуйте.
В шаблоне html найдите
<!-- Скрипты магазина -->
<script src="{ASSETS_JS_PATH}main.js"></script>
И замените на
<!-- Скрипты магазина -->
<script rel="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>


И такого кода тоже не находит ))))

#8 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 27 Август 2014 - 18:45

Просмотр сообщенияorigina1 (27 Август 2014 - 18:15) писал:

И такого кода тоже не находит ))))
Здравствуйте.
в шаблоне Html 48 строчка

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

  • 11111111.jpeg


#9 origina1

origina1

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

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

Отправлено 28 Август 2014 - 05:06

Просмотр сообщенияMikDark (27 Август 2014 - 12:31) писал:

Лучше и проще поставить его перед этим заголовком. Сам заголовок у Вас идет в коде страницы, туда устанавливать и редактировать слайдер не очень удобно. Произведите изменения согласно инструкции и далее поможем Вам его отредактировать и перенести.

Слайдер Установил. Далее его нужно поставить вместо картинки (Смотрите моё самое первое сообщение). Где хранятся картинки слайдера для замены? Как поменять размер слайдера ? И почему появляются миниатюрки слева сверху на слайдере как от них избавится ? Заранее благодарен. )

#10 Vaccina

Vaccina

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

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

Отправлено 28 Август 2014 - 05:39

код слайдера:
{% IF index_page %}
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding: 1em; display: none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
<a href="/"><img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" /></a>
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>
{% ENDIF %}
перенесите в шаблон страница поставив после:
<section role="main">
  <header>
	<h1>{PAGE_NAME}</h1>
  </header>
  {% IF FORM_NOTICE %}<ul class="message {% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-notice{% ENDIF %}"><li>{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}
  <section>
	{PAGE_CONTENT}
  </section>
в код слайдера, а именно перед:
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding: 1em; display: none;">
вставьте:
<div style="text-align: center;"><a href="http://xn--90abkter0ahi.xn--p1ai/feedback"><img style="width: 1280px; height: 116px;" src="http://st.xn--90abkter0ahi.xn--p1ai/9/1151/729/form.png" alt=""></a><br>
&nbsp;</div>

далее зайдите в раздел Сайт - Страницы и отредактируйте главную страницу убрав два баннера.


1. Картинки хранятся в разделе Редактор шаблонов.
2.Размер слайдера исходит от размера картинок
3. В  nyvo.css найдите:
.nivo-slice {
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 5;
}
замените на:
.nivo-slice {
	display: none;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 5;
}


#11 origina1

origina1

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

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

Отправлено 28 Август 2014 - 06:17

Просмотр сообщенияVaccina (28 Август 2014 - 05:39) писал:

код слайдера:
{% IF index_page %}
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding: 1em; display: none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
<a href="/"><img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" /></a>
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
<img src="http://st.xn--90abkter0ahi.xn--p1ai/7/1305/152/Slide1.png" alt="" />
</div>
</div>
<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>
{% ENDIF %}
перенесите в шаблон страница поставив после:
<section role="main">
<header>
<h1>{PAGE_NAME}</h1>
</header>
{% IF FORM_NOTICE %}<ul class="message {% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-notice{% ENDIF %}"><li>{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}
<section>
{PAGE_CONTENT}
</section>
в код слайдера, а именно перед:
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding: 1em; display: none;">
вставьте:
<div style="text-align: center;"><a href="http://xn--90abkter0ahi.xn--p1ai/feedback"><img style="width: 1280px; height: 116px;" src="http://st.xn--90abkter0ahi.xn--p1ai/9/1151/729/form.png" alt=""></a><br>
&nbsp;</div>

далее зайдите в раздел Сайт - Страницы и отредактируйте главную страницу убрав два баннера.


1. Картинки хранятся в разделе Редактор шаблонов.
2.Размер слайдера исходит от размера картинок
3. В  nyvo.css найдите:
.nivo-slice {
display: block;
height: 100%;
position: absolute;
top: 0;
z-index: 5;
}
замените на:
.nivo-slice {
display: none;
height: 100%;
position: absolute;
top: 0;
z-index: 5;
}

Спасибо всё выполнил. Но "Оформить заявку" и слайдер почему то опустились в самый низ. Как их поднять.? И можно ли точки которые находятся под слайдером сблизить со слайдером ? уж больно большое расстояние.

#12 Vaccina

Vaccina

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

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

Отправлено 28 Август 2014 - 06:22

простите, перенесите код слайдера чуть выше поставив после:
<section role="main">
<header>
<h1>{PAGE_NAME}</h1>
</header>
{% IF FORM_NOTICE %}<ul class="message {% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-notice{% ENDIF %}"><li>{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}

необходимо, чтобы он располагался выше:
<section>
{PAGE_CONTENT}
</section>

на счет точек в nyvo.css найдите примерно сл.код(ищите по первой строке):
.theme-default .nivoSlider {
	background: url("http://design.xn--90abkter0ahi.xn--p1ai/nyvo_loading.gif") no-repeat scroll 50% 50% #fff;
	box-shadow: 0 1px 5px 0 #4a4a4a;
	margin-bottom: 50px;
	position: relative;
}
уменьшите значение margin-bottom

#13 origina1

origina1

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

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

Отправлено 28 Август 2014 - 06:51

Просмотр сообщенияVaccina (28 Август 2014 - 06:22) писал:

простите, перенесите код слайдера чуть выше поставив после:
<section role="main">
<header>
<h1>{PAGE_NAME}</h1>
</header>
{% IF FORM_NOTICE %}<ul class="message {% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-notice{% ENDIF %}"><li>{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}

необходимо, чтобы он располагался выше:
<section>
{PAGE_CONTENT}
</section>

на счет точек в nyvo.css найдите примерно сл.код(ищите по первой строке):
.theme-default .nivoSlider {
background: url("http://design.xn--90abkter0ahi.xn--p1ai/nyvo_loading.gif") no-repeat scroll 50% 50% #fff;
box-shadow: 0 1px 5px 0 #4a4a4a;
margin-bottom: 50px;
position: relative;
}
уменьшите значение margin-bottom

Всё получилось спасибо большое! Теперь при нажатии на 4-ю точку в навигации слайдера всё равно появляется миниатюрка сверху слева. Как её убрать ? И ещё сразу вопрос. Если я буду добавлять ещё картинок в слайд эти точки снизу сами будут добавляться ?

#14 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 28 Август 2014 - 07:02

Просмотр сообщенияorigina1 (28 Август 2014 - 06:51) писал:

Всё получилось спасибо большое! Теперь при нажатии на 4-ю точку в навигации слайдера всё равно появляется миниатюрка сверху слева. Как её убрать ? И ещё сразу вопрос. Если я буду добавлять ещё картинок в слайд эти точки снизу сами будут добавляться ?

Здравствуйте, в файле nyvo.css
Находим
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

Заменяем на
.nivo-box {
display:none;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:none; }


#15 origina1

origina1

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

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

Отправлено 28 Август 2014 - 10:16

Просмотр сообщенияCastiel (28 Август 2014 - 07:02) писал:

Здравствуйте, в файле nyvo.css
Находим
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

Заменяем на
.nivo-box {
display:none;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:none; }

Спасибо! Теперь подскажите как менять эффекты перехода слайдов ? ))

#16 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 28 Август 2014 - 10:48

Просмотр сообщенияorigina1 (28 Август 2014 - 10:16) писал:

Спасибо! Теперь подскажите как менять эффекты перехода слайдов ? ))

Здравствуйте.
Зайдите в шаблон Страница и найдите код
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>
И замените на
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'sliceDownLeft, sliceDownRight'
}).parent().show(); });
</script>
В строке effect меняется эффект перехода.
Попробуйте эти:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

#17 origina1

origina1

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

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

Отправлено 28 Август 2014 - 11:21

Просмотр сообщенияDanil (28 Август 2014 - 10:48) писал:

Здравствуйте.
Зайдите в шаблон Страница и найдите код
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider().parent().show(); });
</script>
И замените на
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'sliceDownLeft, sliceDownRight'
}).parent().show(); });
</script>
В строке effect меняется эффект перехода.
Попробуйте эти:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

Сделал всё, но никакой из эффектов не применяется/включается. То есть как резко просто менялась картинка так и осталось.

#18 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 28 Август 2014 - 11:41

Просмотр сообщенияorigina1 (28 Август 2014 - 11:21) писал:

Сделал всё, но никакой из эффектов не применяется/включается. То есть как резко просто менялась картинка так и осталось.
Попробуйте другие варианты, потому что не все эффекты работают.

#19 origina1

origina1

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

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

Отправлено 28 Август 2014 - 12:00

Просмотр сообщенияDanil (28 Август 2014 - 11:41) писал:

Попробуйте другие варианты, потому что не все эффекты работают.

Код выглядит так:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'boxRainGrow'
}).parent().show(); });
</script>

Не один из эфектов не работает.

#20 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 29 Август 2014 - 01:40

Попробуйте использовать новую версию слайдера http://dev7studios.c...ins/nivo-slider Вам необходимо будет скачать "jQuery Plugin".





Темы с аналогичным тегами Слайдер размещение, размер

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

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