alladinb 2 Опубликовано 22 июля, 2011 Жалоба Share Опубликовано 22 июля, 2011 Хочу себе этот чудесный Слайдер на главную страницу (по средине) Буду очень благодарен тому кто грамотно распишет что куда добавить, где прописать. http://nivo.dev7studios.com/#usage P.S. Два дня играюсь, ну не получается и все... Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 22 июля, 2011 Жалоба Share Опубликовано 22 июля, 2011 В main_content.html подключяйте js файл слайдера, вставляйте html-код. Ничего сложного, по идее. Проверьте что б путь до js файла правильно указывался. Ссылка на сообщение Поделиться на другие сайты
alladinb 2 Опубликовано 22 июля, 2011 Автор Жалоба Share Опубликовано 22 июля, 2011 Ну я так и делал, просто вставил код: {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 2 Опубликовано 22 июля, 2011 Автор Жалоба Share Опубликовано 22 июля, 2011 <!-- 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 447 Опубликовано 22 июля, 2011 Жалоба Share Опубликовано 22 июля, 2011 jQuery уже подключается в магазине, его убрать. Проверить путь до js файла, есть ли по указанному адресу указанный файл. Чудес ведь не бывает. Ссылка на сообщение Поделиться на другие сайты
alladinb 2 Опубликовано 22 июля, 2011 Автор Жалоба Share Опубликовано 22 июля, 2011 А кроме main_content.html, нужно еще какието файлы менять ? В header.php например ? Ничего не могу понять. Бегает кружочек по центру, все подключено, а работать не хочет. Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 22 июля, 2011 Жалоба Share Опубликовано 22 июля, 2011 Нет. Дайте ссылку на магазин, где Вы подключаете слайдер, посмотрю. Ссылка на сообщение Поделиться на другие сайты
alladinb 2 Опубликовано 23 июля, 2011 Автор Жалоба Share Опубликовано 23 июля, 2011 Нет. Дайте ссылку на магазин, где Вы подключаете слайдер, посмотрю. Слайдер подключил, осталась одна проблема... Как сделать чтобы пропорцианально менялись размеры слайдера и картинки в нем, для разных разрешений екрана и разных браузеров Закоментировал ширину и высоту в 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 447 Опубликовано 23 июля, 2011 Жалоба Share Опубликовано 23 июля, 2011 Картинка ведь определённого размера и она растровая, т.е. если можно будет как-то её растянуть, будет ужасно выглядеть. Ссылка на сообщение Поделиться на другие сайты
alladinb 2 Опубликовано 23 июля, 2011 Автор Жалоба Share Опубликовано 23 июля, 2011 Сделал просто меньше, проблема решилась. Ссылка на сообщение Поделиться на другие сайты
alladinb 2 Опубликовано 23 июля, 2011 Автор Жалоба Share Опубликовано 23 июля, 2011 А как сделать чтобы размеры вообще не менялись. Можно как то зафиксировать весь сайт ? Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 23 июля, 2011 Жалоба Share Опубликовано 23 июля, 2011 Если речь про размер сайта, то вот есть статья - 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. Ссылка на сообщение Поделиться на другие сайты
Boxxx 0 Опубликовано 17 марта, 2012 Жалоба Share Опубликовано 17 марта, 2012 я себе тоже такой хочу,но сам врят ли установлю,может поможет кто нибудь? Ссылка на сообщение Поделиться на другие сайты
Dimru 0 Опубликовано 23 сентября, 2013 Жалоба Share Опубликовано 23 сентября, 2013 Два дня переводил на русский всё выше сказанное: в итоге получил желаемое! Спасибо всем, кто писал выше - без вас бы всё равно ничего бы не получилось Сам я полный ноль в программировании, по этому метод "тыка" рулит! И так, для таких же "зелёных", как я: Архив надо распаковать в каталог "DOCS" у себя на хосте. Так потом меньше пути прописывать. Код вставляем в файл "main_content.html", который лежит в "docs/templates/vamshop/module/". Поправить в коде у уважаемого 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} Ну, как-то так.... Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 23 сентября, 2013 Жалоба Share Опубликовано 23 сентября, 2013 Спасибо, что поделились информацией. Ссылка на сообщение Поделиться на другие сайты
YuriyVA 1 Опубликовано 13 октября, 2013 Жалоба Share Опубликовано 13 октября, 2013 Не хочу плодить темы, поэтому задам вопрос здесь: (да простит меня топикстартер) 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" , указывать метку с путем к картинке из настройки баннеров в админке. Такое возможно? Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 13 октября, 2013 Жалоба Share Опубликовано 13 октября, 2013 Возможно конечно, но только правкой php, html, css, mysql. Ссылка на сообщение Поделиться на другие сайты
YuriyVA 1 Опубликовано 13 октября, 2013 Жалоба Share Опубликовано 13 октября, 2013 Понял, спасибо! Остановимся на первом варианте. Т.е. загрузку изображений баннера через ftp. Конечно, не худо бы иметь в админке модуль загрузки произвольных изображений, с присвоением группы (комментария к группе) и комментария, где используется это изображение (например группа "изображения слайдера", в ней "слайдер 1", "слайдер 2" и т.д.) , с последующим получением метки для вставки в шаблоны для каждого изображения. Таким же образом можно было бы менять например логотип через админку. Группа "Логотип" - изображение "Логотип фирмы размер картинки Высота х Ширина" Клиентам страшно иногда давать ftp доступ.. :) Да и не любят они этого и боятся... Это бы сильно облегчило жизнь всем и решило бы вопросы "а мне как поменять картинку там-то" :) Но... На нет... И суда нет... :) PS. Мысли в слух, ничего более. Ссылка на сообщение Поделиться на другие сайты
shaklov 63 Опубликовано 13 октября, 2013 Жалоба Share Опубликовано 13 октября, 2013 Для Вашей задачи нужно править только один файл: 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 1 Опубликовано 13 октября, 2013 Жалоба Share Опубликовано 13 октября, 2013 Спасибо! Да, действительно работает. Но.. На баннере, на картинке ссылка, которая ведет в циклическую переадресацию, если ничего не заполнять в "URL Баннера:", так же если туда вставить решетку "#". Если вставить ссылку главной страницы или какой либо другой - окно открывается в "_blank" через redirect.php, что уже несколько не устраивает... Действительно много где чего менять наверное нужно, хотя по логике, наверное, где-то в php достаточно контроля наличия ссылки в "URL Баннера:" - если есть - кликабельно, если нет- картинка. Ну и до кучи там же, в админке ,было бы не плохо, если бы настраивалась цель ссылки (_blank,_self (если ссылка есть, конечно))... Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения