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

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


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

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

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

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

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

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

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

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

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

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

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

{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 изображения один под одним...

Я очень прошу, расскажите немножко подробнее.

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

<!-- 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]

и так тоже самое

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

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

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

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

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

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

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

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

Нет.

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

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

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

Закоментировал ширину и высоту в 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}

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

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

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

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

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

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

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

 

  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.

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

<link rel="stylesheet" href="slide/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="slide/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">
    <img src="slide/slide_1.jpg" alt="Мотоэкипировка"  />
    <img src="slide/slide_2.jpg" alt="Шлем" />
    <img src="slide/slide_3.jpg" alt="Запчасти" />
    <img src="slide/slide_4.jpg" alt="Расходники" />
    <img src="slide/slide_5.jpg" alt="Термобелье" />
    <img src="slide/slide_6.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="slide/nivo-slider/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:300, // Slide transition speed
        pauseTime:3000, // 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
    });
});

</script>
{/literal}
<br> </br>


<h1>Добро пожаловать в Motoacs.RU</h1>
<div class="page">
<div class="pagecontent">
{$text}
</div>
</div>

{$MODULE_latest_news}
{$MODULE_featured_products}
{$MODULE_new_products}
{$MODULE_upcoming_products}

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

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

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

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

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

<div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
			<img src="{$tpl_path}slider-img/1-1.jpg" data-thumb="{$tpl_path}img/1-1.jpg" alt="" title="" /> 
			<img src="{$tpl_path}slider-img/1-2.jpg" data-thumb="{$tpl_path}img/1-2.jpg" alt="" title="" /> 
			<img src="{$tpl_path}slider-img/1-3.jpg" data-thumb="{$tpl_path}img/1-3.jpg" alt="" title="" /> 
			</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>
 </div> 

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

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

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

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

 

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

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

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

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

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

 

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

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

Для Вашей задачи нужно править только один файл: 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 слайдов, в каждом слайде может выводиться неограниченное число баннеров - как в админке назначите.

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

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

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

 

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

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