Перейти к содержанию
Форум поддержки пользователей VamShop
VamShop Смотреть Скачать Купить

Как подключить Nivo Slider в main_content.html

alladinb

Автор alladinb,
в Установка и настройка

 Share Подписчики 1

Рекомендуемые сообщения

alladinb

alladinb 2

Опубликовано
Опубликовано

Хочу себе этот чудесный Слайдер на главную страницу (по средине)

Буду очень благодарен тому кто грамотно распишет что куда добавить, где прописать.

http://nivo.dev7studios.com/#usage

P.S. Два дня играюсь, ну не получается и все...

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

В main_content.html подключяйте js файл слайдера, вставляйте html-код.

Ничего сложного, по идее.

Проверьте что б путь до js файла правильно указывался.

Ссылка на сообщение
Поделиться на другие сайты
alladinb

alladinb 2

Опубликовано
  • Автор
Опубликовано

Ну я так и делал, просто вставил код:

{config_load file="$language/lang_$language.conf" section="index"}

{$MODULE_error}

<p>

{$text}

</p>


<!-- Usually in the <head> section -->

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>


<!-- Then somewhere in the <body> section -->

<div id="slider">

    <img src="images/slide1.jpg" alt="" />

    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>

    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />

    <img src="images/slide4.jpg" alt="" />

</div>

<div id="htmlcaption" class="nivo-html-caption">

    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

</div>



{$MODULE_latest_news}



{$MODULE_sitemap_default}

{$MODULE_featured_products}

{$MODULE_new_products}




{$MODULE_upcoming_products}[/code]



На что выводится 4 изображения один под одним...

Я очень прошу, расскажите немножко подробнее.
Ссылка на сообщение
Поделиться на другие сайты
alladinb

alladinb 2

Опубликовано
  • Автор
Опубликовано 

<!-- Usually in the <head> section -->

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>


<!-- Then somewhere in the <body> section -->

<div id="slider">

    <img src="images/slide1.jpg" alt="" />

    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>

    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />

    <img src="images/slide4.jpg" alt="" />

</div>

<div id="htmlcaption" class="nivo-html-caption">

    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

</div>


{literal}

<script type="text/javascript">

$(window).load(function() {

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

});

</script>

{/literal}[/code]



и так тоже самое
Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

jQuery уже подключается в магазине, его убрать.

Проверить путь до js файла, есть ли по указанному адресу указанный файл.

Чудес ведь не бывает.

Ссылка на сообщение
Поделиться на другие сайты
alladinb

alladinb 2

Опубликовано
  • Автор
Опубликовано

А кроме main_content.html, нужно еще какието файлы менять ? В header.php например ?

Ничего не могу понять. Бегает кружочек по центру, все подключено, а работать не хочет.

Ссылка на сообщение
Поделиться на другие сайты
alladinb

alladinb 2

Опубликовано
  • Автор
Опубликовано

  В 22.07.2011 в 14:21, VaM сказал:

Нет.

Дайте ссылку на магазин, где Вы подключаете слайдер, посмотрю.

Слайдер подключил, осталась одна проблема...

Как сделать чтобы пропорцианально менялись размеры слайдера и картинки в нем, для разных разрешений екрана и разных браузеров

Закоментировал ширину и высоту в steeleshet не помогло

#slider {

  /*  position:relative;

   /* width:auto; /* Change this to your images width837 618*/

  /*  height:auto; /* Change this to your images height130 246*/

    background:url(images/loading.gif) no-repeat 50% 50%;

}

#slider img {

    position:absolute;

    top:0px;

    left:0px;

    display:none;

}

#slider a {

    border:0;

    display:block;

}[/code]




сам код:


[code]{config_load file="$language/lang_$language.conf" section="index"}

{$MODULE_error}

<p>

{$text}

</p>


<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />

<div class="slider-wrapper theme-default">

    <div class="ribbon"></div>

    <div id="slider" class="nivoSlider">

    <a href="http://www.pylsar.com.ua/Asus_planshet.html"><img src="images/slide1.jpg" alt="" /></a>

    <!--<img src="images/slide1.jpg" alt="" /> -->

	<!-- <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> -->

    <a href="http://www.pylsar.com.ua/Impression.html"><img src="images/slide2.jpg" alt="" /></a>

	<a href="http://www.pylsar.com.ua/4_Saturn_kondec.html"><img src="images/slide3.jpg" alt=""  /></a>

	<a href="http://www.pylsar.com.ua/apple_1.html"><img src="images/slide4.jpg" alt=""  /></a>

  <!--  <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />

    <img src="images/slide4.jpg" alt="" /> -->

</div>

</div>

<div id="htmlcaption" class="nivo-html-caption">

    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

</div>



<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

{literal}

$(window).load(function() {

    $('#slider').nivoSlider({

        effect:'random', // Specify sets like: 'fold,fade,sliceDown'

        slices:15, // For slice animations

        boxCols: 8, // For box animations

        boxRows: 4, // For box animations

        animSpeed:500, // Slide transition speed

        pauseTime:5000, // How long each slide will show

        startSlide:0, // Set starting Slide (0 index)

        directionNav:true, // Next & Prev navigation

        directionNavHide:true, // Only show on hover

        controlNav:true, // 1,2,3... navigation

        controlNavThumbs:false, // Use thumbnails for Control Nav

        controlNavThumbsFromRel:false, // Use image rel for thumbs

        controlNavThumbsSearch: '.jpg', // Replace this with...

        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src

        keyboardNav:true, // Use left & right arrows

        pauseOnHover:true, // Stop animation while hovering

        manualAdvance:false, // Force manual transitions

        captionOpacity:0.8, // Universal caption opacity

        prevText: 'Prev', // Prev directionNav text

        nextText: 'Next', // Next directionNav text

        beforeChange: function(){}, // Triggers before a slide transition

        afterChange: function(){}, // Triggers after a slide transition

        slideshowEnd: function(){}, // Triggers after all slides have been shown

        lastSlide: function(){}, // Triggers when last slide is shown

        afterLoad: function(){} // Triggers when slider has loaded

    });

});

{/literal}

</script>


<br> </br>


{$MODULE_latest_news}



{$MODULE_sitemap_default}

<!-- {$MODULE_featured_products} -->

{$MODULE_new_products}




{$MODULE_upcoming_products}

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

Картинка ведь определённого размера и она растровая, т.е. если можно будет как-то её растянуть, будет ужасно выглядеть.

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано

Если речь про размер сайта, то вот есть статья - http://vamshop.ru/forum/topic/8363-%d0%b8%d0%b7%d0%bc%d0%b5%d0%bd%d1%8f%d0%b5%d0%bc-%d0%b2%d0%bd%d0%b5%d1%88%d0%bd%d0%b8%d0%b9-%d0%b2%d0%b8%d0%b4-%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%b0-vamshop-css-%d1%81%d0%b2%d0%be%d0%b9%d1%81%d1%82%d0%b2%d0%b0%d0%bc%d0%b8-margin-%d0%b8-float/

Смотрите пример номер 3.

Ссылка на сообщение
Поделиться на другие сайты
  • 7 months later...
  • 1 year later...
Dimru

Dimru 0

Опубликовано
Опубликовано

Два дня переводил на русский всё выше сказанное: в итоге получил желаемое!

Спасибо всем, кто писал выше - без вас бы всё равно ничего бы не получилось

Сам я полный ноль в программировании, по этому метод "тыка" рулит!

И так, для таких же "зелёных", как я:

 

  1. Архив надо распаковать в каталог "DOCS" у себя на хосте. Так потом меньше пути прописывать.
  2. Код вставляем в файл "main_content.html", который лежит в "docs/templates/vamshop/module/".
  3. Поправить в коде у уважаемого alladinb: 
  • строку {/literal} перенести под </script>; 
  • закоментировать (или удалить) строку <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>; 
  • прописать правильно все пути к картинкам и скриптам.

Можно использовать мой код (ниже). Я для удобства создал папку "slide": в ней картинки (slide_1.jpg, slide_2.jpg, и т.д.) и распакованная папка "nivo-slider", где лежат скрипты. Если нужны ссыли для картинок, посмотрите как это сделано у alladinb (<a href="http://www.pylsar.com.ua/Asus_planshet.html"><img src="images/slide1.jpg" alt="" /></a>)

Как работает можно посмотреть здесь.

Что бы убрать точки навигации надо controlNav:true заменить на false.

Что бы убрать стрелочки навигации надо directionNav:true заменить на false.

  1. {config_load file="$language/lang_$language.conf" section="index"}
  2. {$MODULE_error}
  3.  
  4. <link rel="stylesheet" href="slide/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
  5. <link rel="stylesheet" href="slide/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
  6. <div class="slider-wrapper theme-default">
  7.     <div class="ribbon"></div>
  8.     <div id="slider" class="nivoSlider">
  9.     <img src="slide/slide_1.jpg" alt="Мотоэкипировка"  />
  10.     <img src="slide/slide_2.jpg" alt="Шлем" />
  11.     <img src="slide/slide_3.jpg" alt="Запчасти" />
  12.     <img src="slide/slide_4.jpg" alt="Расходники" />
  13.     <img src="slide/slide_5.jpg" alt="Термобелье" />
  14.     <img src="slide/slide_6.jpg" alt="Мотоаксессуары" />
  15. </div>
  16. </div>
  17. <!-- <div id="htmlcaption" class="nivo-html-caption">
  18.     <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
  19. </div>
  20. -->
  21.  
  22. <script src="slide/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
  23. <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> -->
  24. <script type="text/javascript">
  25. {literal}
  26. $(window).load(function() {
  27.     $('#slider').nivoSlider({
  28.         effect:'random', // Specify sets like: 'fold,fade,sliceDown'
  29.         slices:15, // For slice animations
  30.         boxCols: 8, // For box animations
  31.         boxRows: 4, // For box animations
  32.         animSpeed:300, // Slide transition speed
  33.         pauseTime:3000, // How long each slide will show
  34.         startSlide:0, // Set starting Slide (0 index)
  35.         directionNav:true, // Next & Prev navigation
  36.         directionNavHide:true, // Only show on hover
  37.         controlNav:true, // 1,2,3... navigation
  38.         controlNavThumbs:false, // Use thumbnails for Control Nav
  39.         controlNavThumbsFromRel:false, // Use image rel for thumbs
  40.         controlNavThumbsSearch: '.jpg', // Replace this with...
  41.         controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
  42.         keyboardNav:true, // Use left & right arrows
  43.         pauseOnHover:true, // Stop animation while hovering
  44.         manualAdvance:false, // Force manual transitions
  45.         captionOpacity:0.8, // Universal caption opacity
  46.         prevText: 'Prev', // Prev directionNav text
  47.         nextText: 'Next', // Next directionNav text
  48.         beforeChange: function(){}, // Triggers before a slide transition
  49.         afterChange: function(){}, // Triggers after a slide transition
  50.         slideshowEnd: function(){}, // Triggers after all slides have been shown
  51.         lastSlide: function(){}, // Triggers when last slide is shown
  52.         afterLoad: function(){} // Triggers when slider has loaded
  53.     });
  54. });
  55.  
  56. </script>
  57. {/literal}
  58. <br> </br>
  59.  
  60.  
  61. <h1>Добро пожаловать в Motoacs.RU</h1>
  62. <div class="page">
  63. <div class="pagecontent">
  64. {$text}
  65. </div>
  66. </div>
  67.  
  68. {$MODULE_latest_news}
  69. {$MODULE_featured_products}
  70. {$MODULE_new_products}
  71. {$MODULE_upcoming_products}

Ну, как-то так....

Ссылка на сообщение
Поделиться на другие сайты
  • 3 weeks later...
YuriyVA

YuriyVA 1

Опубликовано
Опубликовано

Не хочу плодить темы, поэтому задам вопрос здесь: (да простит меня топикстартер)

Nivo slider я прикрутил, вопросов не возникло.

в templates/шаблон/Index.html такой код:

  1. <div class="slider-wrapper theme-default">
  2.             <div id="slider" class="nivoSlider">
  3. 			<img src="{$tpl_path}slider-img/1-1.jpg" data-thumb="{$tpl_path}img/1-1.jpg" alt="" title="" /> 
  4. 			<img src="{$tpl_path}slider-img/1-2.jpg" data-thumb="{$tpl_path}img/1-2.jpg" alt="" title="" /> 
  5. 			<img src="{$tpl_path}slider-img/1-3.jpg" data-thumb="{$tpl_path}img/1-3.jpg" alt="" title="" /> 
  6. 			</div>
  7.             <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a> </div>
  8.  </div> 

 Хотелось бы как то окультурить все это дело, точнее, что бы вместо пути к картинке можно было вставить метку картинки из "баннеров". Т.е. создать в админке какую-то группу баннеров, загрузить туда все три картинки (или больше) и вместо пути к каждой картинке "{$tpl_path}slider-img/1-1.jpg" , указывать метку с путем к картинке из настройки баннеров в админке.

Такое возможно?

Ссылка на сообщение
Поделиться на другие сайты
YuriyVA

YuriyVA 1

Опубликовано
Опубликовано

Понял, спасибо! Остановимся на первом варианте. Т.е. загрузку изображений баннера через ftp.

 

Конечно, не худо бы иметь в админке модуль загрузки произвольных изображений, с присвоением группы (комментария к группе)  и комментария, где используется это изображение (например группа "изображения слайдера", в ней "слайдер 1", "слайдер 2" и т.д.) , с последующим получением метки для вставки в шаблоны для каждого изображения. 

Таким же образом можно было бы менять например логотип через админку. Группа "Логотип" - изображение "Логотип фирмы размер картинки Высота х Ширина"

Клиентам страшно иногда давать ftp доступ..  :) Да и не любят они этого и боятся...

Это бы сильно облегчило жизнь всем и решило бы вопросы "а мне как поменять картинку там-то"  :)

Но... На нет... И суда нет...  :)

 

PS. Мысли в слух, ничего более.

Ссылка на сообщение
Поделиться на другие сайты
shaklov

shaklov 63

Опубликовано
Опубликовано

Для Вашей задачи нужно править только один файл: banners.php - там нужно добавить:

if ($banner = vam_banner_exists('dynamic', 'slide1')) { $vamTemplate->assign('SLIDE1',vam_display_banner('static', $banner)); }
if ($banner = vam_banner_exists('dynamic', 'slide2')) { $vamTemplate->assign('SLIDE2',vam_display_banner('static', $banner)); }
if ($banner = vam_banner_exists('dynamic', 'slide3')) { $vamTemplate->assign('SLIDE3',vam_display_banner('static', $banner)); }
if ($banner = vam_banner_exists('dynamic', 'slide4')) { $vamTemplate->assign('SLIDE4',vam_display_banner('static', $banner)); }
if ($banner = vam_banner_exists('dynamic', 'slide5')) { $vamTemplate->assign('SLIDE5',vam_display_banner('static', $banner)); }

Этим мы описываем новые баннеро-места. Потом в админке создаёте стандартным образом баннеры и указываете эти группы: slide1, slide2, slide3, slide4, slide5

Будет слайдер из 5 слайдов, в каждом слайде может выводиться неограниченное число баннеров - как в админке назначите.

Ссылка на сообщение
Поделиться на другие сайты
YuriyVA

YuriyVA 1

Опубликовано
Опубликовано

Спасибо! Да, действительно работает. 

Но.. На баннере, на картинке ссылка, которая ведет в циклическую переадресацию, если ничего не заполнять в "URL Баннера:", так же если туда вставить решетку "#". Если вставить ссылку главной страницы или какой либо другой - окно открывается в "_blank" через redirect.php, что уже несколько не устраивает... 

 

Действительно много где чего менять наверное нужно, хотя по логике, наверное, где-то в php достаточно контроля наличия ссылки в "URL Баннера:" - если есть - кликабельно, если нет- картинка. Ну и до кучи там же, в админке ,было бы не плохо, если бы настраивалась цель ссылки (_blank,_self (если ссылка есть, конечно))...

Ссылка на сообщение
Поделиться на другие сайты
 Share
Подписчики 1
Перейти к списку тем
×
×
  • Создать...