Nivo Slider

web/upload/assets/images/62/61671/имя_файла.png

Frost (17 Апрель 2012 - 18:08) писал:

web/upload/assets/images/62/61671/имя_файла.png

Цитата

Vaccina (18 Апрель 2012 - 21:03) писал:

Vaccina (20 Апрель 2012 - 23:41) писал:

• Скачиваем себе на компьютер следующий архив, я его специально подготовил, все до одного лишние файлы удалил:
      slider.zip   8,6К   1809 Количество загрузок:
  
• Распаковываем на своём компьютере.
  
• Заходим в панель управления магазином, через форму авторизации.
  
• Переходим в раздел "Сайт" > "Редактор тем".
  
• Скролим вниз до блока файлов, нажимаем кнопку добавить файлы, появится 5 полей для файлов.
  
  
• В каждое поле вставляем те файлы, что распаковались из архива, их как раз 5.
  
  
• Проверяем закачались ли эти файлы, выглядят они в редакторе тем как-то так:
  
  
• Открываем файл HTML, находим следующий код (у меня это 53 строка, используйте встроенный поиск браузера, Ctrl+f, чтобы не искать глазами.):
  

    <!-- Скрипты магазина -->
    <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
  

  
  После него вставляем вот такой код:
  

    <!-- Загрузка Jquery галереии Nyro -->
    <link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyro_default.css" type="text/css" media="screen" />
    <script src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js" type="text/javascript"></script>
  

  
  Получается как-то так:
  

    <!-- Скрипты магазина -->
    <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
  
    <!-- Загрузка Jquery галереии Nyro -->
    <link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyro_default.css" type="text/css" media="screen" />
    <script src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js" type="text/javascript"></script>
  

  
  В браузере выглядит так:
  
  
• Нажимаем кнопку "сохранить" сверху.
  
• Далее скролим вниз этого файла (html) находим (естественно встроенным поиском, Ctrl+f, глазами искать не всегда есть гуд.) вот такой не сложный код:
  

  {BODY}
  

  
  Перед ним! Вставляем вот такой код:
  

  			<!-- Вешаем слайдер на главной -->
  			{% IF index_page %}
  			  <!-- Обёртка, указывающая стиль темы -->
  			  <div class="theme-default" style="padding-top:1em;">
  				<!-- Непосредственный код слайдера -->
  				<div id="slider">
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider.png" alt="" />
  				  <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png" alt="" /></a>
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png" alt="" title="Пример картинки с заголовком" />
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png" alt="" />
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/cars.png" alt="" />
  				</div>
  			  </div>
  			  
  			  <!-- Запуск слайдера -->
  			  <script type="text/javascript">
  				$(window).load(function() {
  					$('#slider').nivoSlider();
  				});
  			  </script>
  			{% ENDIF %}
  

  
  Получается вот так:
  

  			<!-- Вешаем слайдер на главной -->
  			{% IF index_page %}
  			  <!-- Обёртка, указывающая стиль темы -->
  			  <div class="theme-default" style="padding-top:1em;">
  				<!-- Непосредственный код слайдера -->
  				<div id="slider">
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider.png" alt="" />
  				  <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png" alt="" /></a>
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png" alt="" title="Пример картинки с заголовком" />
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png" alt="" />
  				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/cars.png" alt="" />
  				</div>
  			  </div>
  			  
  			  <!-- Запуск слайдера -->
  			  <script type="text/javascript">
  				$(window).load(function() {
  					$('#slider').nivoSlider();
  				});
  			  </script>
  			{% ENDIF %}
  
  			{BODY}
  

  
  
• Нажимаем кнопку "сохранить", выглядит это так:
  
  
• Заходим на главную страницу сайта, нажимаем F5 либо Ctrl+R
  
• Должен получиться вот такой результат:
  

Цитата

Цитата

Сообщение отредактировал Ello4ka: 16 Ноябрь 2012 - 21:00

Ello4ka (18 Июнь 2012 - 16:33) писал:

style="display:none;"

<div id="slider" style="display:none;">

$('#slider').nivoSlider();

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

support (18 Июнь 2012 - 16:41) писал:

style="display:none;"

<div id="slider" style="display:none;">

$('#slider').nivoSlider();

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

Сообщение отредактировал Ello4ka: 19 Июнь 2012 - 17:05

Солнечный ежик (02 Июнь 2012 - 21:08) писал:

Добрый вечер. Благодаря Вашему посту выше со слайдером проблем не возникло вообще ни каких. Завёлся и поехал как нужно
Спасибо за труд. Но одна проблема всётаки есть: возможно ли его  как- нибудь пониже опустить? А точки ближе придвинуть к верху.
http://blestelki.sto...02_19h51_33.png
И ещё вопрос, извиняюсь что не в тему: как закруглить края у каталога с товаром.
Магазин вот