wcp 11 Опубликовано 24 ноября, 2015 Жалоба Share Опубликовано 24 ноября, 2015 Вы будете смеяться, но у меня в первый раз за многое-многое время не работает слайдер :( На первой версии вамшопа так же стоял ниво слайдер, без проблем вообще. Сейчас ставлю на вторую версию - не выводятся слайды и все тут! 1. в главный шаблон в head вставил <link rel="stylesheet" href="/slider/light/light.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/slider/nivo-slider.css" type="text/css" media="screen" /> <script type="text/javascript" src="/slider/jquery.nivo.slider.js"></script> 2. Там же в body прописал функцию слайдера {literal} <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> {/literal} 3. В "Главной странице" вставил вывод слайдов <div class="slider-wrapper theme-light"> <div id="slider" class="nivoSlider"> <img src="/images/slide1.jpg" alt="" width="100%" height="300" border="0" /> <img src="/images/slide2.jpg" alt="" width="100%" height="300" border="0" /> </div> </div> 4. Стили, картинки и js-сы лежат по указанным путям. Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 24 ноября, 2015 Жалоба Share Опубликовано 24 ноября, 2015 Куда именно вставляли js файлы?! Внизу или вверху?! и вместо $(window).load(function() { используйте $(function () { + смотрите в chrome developer console, что за ошибки пишет. Ссылка на сообщение Поделиться на другие сайты
wcp 11 Опубликовано 24 ноября, 2015 Автор Жалоба Share Опубликовано 24 ноября, 2015 js-сы в <head></head> как обычно Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 24 ноября, 2015 Жалоба Share Опубликовано 24 ноября, 2015 Добавьте внизу, как сделано по умолчанию. т.е. сделайте так же как подключаются стандартные скрипты, внизу, там где bender + код для вызова самого слайдера добавьте в /app/webroot/js/vamshop.js Потом удалите /app/webroot/js/vamshop-packed.js Что б он по-новой сгенерировался с Вашими файлами. Ссылка на сообщение Поделиться на другие сайты
wcp 11 Опубликовано 24 ноября, 2015 Автор Жалоба Share Опубликовано 24 ноября, 2015 Сделал все так, в первый раз написало "стиль обновлен", последующие обновления страниц стали очень долгими + в конце страницы прет код. Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 24 ноября, 2015 Жалоба Share Опубликовано 24 ноября, 2015 При перевом запросе после удаления packed файла идёт автоматическое создания это файла, может чуть медленно быть при первом запросе, когда скрипт собирает все файлы в единый файл и сжимает, то при следующих запросах всё будет быстро. Где написано Стиль обновлён?! Вы ж вроде подключаете css и js файлы в Адмикне - Оформление - Шаблоны - Основной шаблон. Всё делается в Основном шаблоне. Ссылка на сообщение Поделиться на другие сайты
wcp 11 Опубликовано 24 ноября, 2015 Автор Жалоба Share Опубликовано 24 ноября, 2015 Сообщение появилось под шапкой сайта один раз. Файл не пересоздался. Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 24 ноября, 2015 Жалоба Share Опубликовано 24 ноября, 2015 Я наугад не могу сказать, дайте доступ в админку, попробую посмотреть. Ссылка на сообщение Поделиться на другие сайты
wcp 11 Опубликовано 24 ноября, 2015 Автор Жалоба Share Опубликовано 24 ноября, 2015 В личке. Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 24 ноября, 2015 Жалоба Share Опубликовано 24 ноября, 2015 Проверьте, вроде бы работает. Сделал просто подключение js, css файлов как обычно, не через bender. Ссылка на сообщение Поделиться на другие сайты
oxparts 0 Опубликовано 12 апреля, 2018 Жалоба Share Опубликовано 12 апреля, 2018 А можно подробнее - как это сделать? Похожая проблема. Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 12 апреля, 2018 Жалоба Share Опубликовано 12 апреля, 2018 Только что, oxparts сказал: А можно подробнее - как это сделать? Похожая проблема. Как убрать объединение, сжатие, минификацию css, js файлов?! Вот в разделе Вопросы и ответы написано - Ссылка на сообщение Поделиться на другие сайты
oxparts 0 Опубликовано 12 апреля, 2018 Жалоба Share Опубликовано 12 апреля, 2018 Что-то не выходит... Правда у меня другой скрипт. В шаблоне отключил объединение/сжатие CSS JS. Добавил JS: <script type="text/javascript" src="{base_path}/js/jquery-1.3.1.min.js"></script> Добавил CSS: <link rel="stylesheet" type="text/css" href="{base_path}/css/slideshow.css" /> Файлы с JS и CSS закинул соответственно в папки c JS и CSS. В шаблоне между head и /head ниже через Literal прописал : <!-- //Slideshow start --> {literal} <script type="text/javascript"> $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',6000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); //Display the content $('#gallery .content').html(caption); } </script> {/literal} <!-- //Slideshow end --> </head> На главной странице в режиме исх .кода: <div id="gallery"><a class="show" href="#"> <img title="" src="img/slideshow/flowing-rock.jpg" alt="" width="580" height="360" />Flowing RockLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/> </a> <a href="#"> <img title="" src="img/slideshow/grass-blades.jpg" alt="" width="580" height="360" />Grass BladesUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "/> </a> <div class="caption"> </div> </div> <div class="clear"> </div> <br /> Дальше удалил /app/webroot/js/vamshop-packed.js НЕ фурычит. Может что-то забыл сделать? Вот ссылка на исходный слайдер- что хотел получить: https://www.queness.com/resources/html/slideshow/jquery-slideshow.html Ссылка на сообщение Поделиться на другие сайты
support 447 Опубликовано 12 апреля, 2018 Жалоба Share Опубликовано 12 апреля, 2018 14 минуты назад, oxparts сказал: Что-то не выходит... Правда у меня другой скрипт. В шаблоне отключил объединение/сжатие CSS JS. Добавил JS: <script type="text/javascript" src="{base_path}/js/jquery-1.3.1.min.js"></script> Добавил CSS: <link rel="stylesheet" type="text/css" href="{base_path}/css/slideshow.css" /> Файлы с JS и CSS закинул соответственно в папки c JS и CSS. В шаблоне между head и /head ниже через Literal прописал : <!-- //Slideshow start --> {literal} <script type="text/javascript"> $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',6000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); //Display the content $('#gallery .content').html(caption); } </script> {/literal} <!-- //Slideshow end --> </head> На главной странице в режиме исх .кода: <div id="gallery"><a class="show" href="#"> <img title="" src="img/slideshow/flowing-rock.jpg" alt="" width="580" height="360" />Flowing RockLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/> </a> <a href="#"> <img title="" src="img/slideshow/grass-blades.jpg" alt="" width="580" height="360" />Grass BladesUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "/> </a> <div class="caption"> </div> </div> <div class="clear"> </div> <br /> Дальше удалил /app/webroot/js/vamshop-packed.js НЕ фурычит. Может что-то забыл сделать? Вот ссылка на исходный слайдер- что хотел получить: https://www.queness.com/resources/html/slideshow/jquery-slideshow.html jquery два раза подключать нельзя. Он уже подключён в VamShop. Возможно, если Вы код правильно вставили, то этот слайдер просто не работает с текущей версией jQuery, у Вас в примере очень старая версия 1.3 Текущая используемая версия 3.3 Если честно, я в этом примере ничего особого не увидел. Это тоже самое, что уже встроенный в VamShop bootstrap слайдер - https://getbootstrap.com/docs/3.3/javascript/#carousel Не проще ли будет просто взять уже встроенный bootstrap слайдер?! Ничего добавлять даже не нужно особо, просто разметку сделать. Либо в VamShop встроен ещё слайдер https://bxslider.com/ Можно и его использовать, опять же, ничего подключать не надо, нужно только разметку сделать под слайдер. Так ведь прще будет, использовать то, что уже есть в движке. Да и скрипты, что уже встроены, они популярные и выглядят не хуже, на мой взгляд. Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения