Видеоурок №8: создание слайдера

RSS
Видеоурок №8: создание слайдера
 
Видеоурок №8: создание слайдера

Создаем слайдер на основе инфоблока и компонента "список новостей". Выодим слайдер на главную страницу сайта. Для работы понадобится заготовка слайдер с плавным движением. Интегрируем сторонний слайдер и скрипты в битрикс.
 
Добрый день, Михаил!
Прежде всего спасибо за Ваши уроки! Очень полезная вещь!
Делаю сайт по Вашему уроку но многое не получается. Вот например http://www.familymania.ru/, слайдер сделать из картинок никак не выходит. Подскажите пожалуйста, как можно выводить картинки в слайдер не из раздела "Акции", а, например, из отдельной папки. Если же такой возможности нет, то как убрать слайдер (какие папки и файлы удалить из структуры сайта) и сделать простой статичный баннер на главной?

Заранее 1000 благодарностей!
Сергей
 
Цитата
Сергей пишет:
Добрый день, Михаил!
Прежде всего спасибо за Ваши уроки! Очень полезная вещь!
Делаю сайт по Вашему уроку но многое не получается. Вот например http://www.familymania.ru/ , слайдер сделать из картинок никак не выходит. Подскажите пожалуйста, как можно выводить картинки в слайдер не из раздела "Акции", а, например, из отдельной папки. Если же такой возможности нет, то как убрать слайдер (какие папки и файлы удалить из структуры сайта) и сделать простой статичный баннер на главной?

Заранее 1000 благодарностей!
Сергей
Просто в эту включаемую область, вместо компанента список новостей вставьте

Код
<img src="путь к картинке на сайте/картинка.jpg" />
 
 
Здравствуйте.

Столкнулся со следующей проблемой: В слайдер выводятся картинки прямо из анонса(если мы выставили обрезать их ширину с обрезанной шириной они и выводятся) в следствие чего, картинка занимает очень мало места. На вашем сайте asistant.camouf.ru картинка явно выводится не из анонса и не из детального просмотра, так как если бы они были взять оттуда, то занимали бы слишком мало места. Как решить эту проблему? Не подключать же для каждого анонса дополнительную картинку правильного разрешения.
 
Цитата
Гость сайта пишет:
Здравствуйте.

Столкнулся со следующей проблемой: В слайдер выводятся картинки прямо из анонса(если мы выставили обрезать их ширину с обрезанной шириной они и выводятся) в следствие чего, картинка занимает очень мало места. На вашем сайте asistant.camouf.ru картинка явно выводится не из анонса и не из детального просмотра, так как если бы они были взять оттуда, то занимали бы слишком мало места. Как решить эту проблему? Не подключать же для каждого анонса дополнительную картинку правильного разрешения.
Нет, у меня там выводится картинка анонса. То есть я изначально загрузил нужного мне, для слайдера, размера. А в разделе акций "зажал" их HTML версткой, указав ширину width="100%". Допускаю, что это не очень оптимальный ход, с точки зрения веса страницы с анонсами, но конкретно у меня получилась разница в 35Кб.

Как вариант можете воспользоваться ResizeImageGet-ом

Код
<? 
      $renderImage = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], Array("width" => НОВАЯ_ШИРИНА, "height" => НОВАЯ_ВЫСОТА), BX_RESIZE_IMAGE_EXACT, false); 
      echo '<img alt="'.$arItem["NAME"].'" src="'.$renderImage["src"].'" />'; 
?>
 
и уменьшить разиер картинки анонса до оптимального.
 
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь,  скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ  к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!
 
Цитата
Александр пишет:
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!
У вас jquery не подключен http://bretonbasset.ru/bitrix/templates/bassetjs/jquery-1.7.min.js - выдает ошибку. Попробуйте подключить его из ядра битрикс.

Код
 <?
   CJSCore::Init(array("jquery"));
 ?> 
 
Цитата
Михаил Базаров пишет:
Цитата
Александр пишет:
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!
У вас jquery не подключен http://bretonbasset.ru/bitrix/templates/bassetjs/jquery-1.7.min.js - выдает ошибку. Попробуйте подключить его из ядра битрикс.
Код
  <?
   CJSCore::Init(array("jquery"));
 ?> 
 
попробывал не помогает, где еще можно поискать возможную проблему?
 
Цитата
Гость сайта пишет:
Цитата
У вас jquery не подключен http://bretonbasset.ru/bitrix/templates/bassetjs/jquery-1.7.min.js - выдает ошибку. Попробуйте подключить его из ядра битрикс.
Код
   <?
   CJSCore::Init(array("jquery"));
 ?> 
  
попробывал не помогает, где еще можно поискать возможную проблему?
По идее вам очевидно говорит на ошибку в первой строке файла /var/www/u7619407/data/www/bretonbasset.ru/index_inc.php так что ищите там
 
Здравствуйте, по вашему уроку сделал слайдер на том шаблоне что был в битриксе, но все остальные уроки не смотрел некогда(  суть вопроса в следующем: слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
 
Цитата
Константин пишет:
...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.
 
Цитата
Михаил Базаров пишет:
Цитата
Константин пишет:
...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.
Полностью сверстал заново дизайн, по вашим урокам,  слайдер теперь работает, большое спасибо
 
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?
Код
#slide { height:300px; width:610px; position:relative; overflow:hidden; margin-left:5px;}
.slider {
    width:610px;
}
.items { display:none;
}
.pagination, .prev, .next, .play, .paused, .progbar, .numStatus {display:none;}
.banner{width:260px;
            overflow:hidden;
            position:absolute;
           margin-top:25px;
           background: rgba(0, 0, 0, 0.8);
           border-radius:10px 0 0 10px;
           -moz-border-radius:10px 0 0 10px;
           -webkit-border-radius:10px 0 0 10px;
           padding:10px;
}
.banner span { display:block;
 }
slide a {color: #ffffff;
          text-decoration: underline;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 0.8em;
}

slide a:hover {color: #ffffff;
                    text-decoration:none;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 0.8em;
} 
Заранее благодарен.
 
Цитата
Александр пишет:
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?
Код
 #slide { height:300px; width:610px; position:relative; overflow:hidden; margin-left:5px;}
.slider {
    width:610px;
}
.items { display:none;
}
.........
Заранее благодарен.
Лично у меня во всех все нормально. Допускаю что в старых IE- ниже девятого, может не работать плавное движение в слайдере. Тут можно, именно для них (старых Ишаков) написать отдельный файл стилей, или вообще слайдер не показыать, подменить на статичную картинку, например.
 
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!
 
Здравствуйте. Пожалуйста еще один раз о маленьких изображениях в слайде.

Вы писали:
Нет, у меня там выводится картинка анонса. То есть я изначально загрузил нужного мне, для слайдера, размера. А в разделе акций "зажал" их HTML версткой, указав ширину width="100%". Допускаю, что это не очень оптимальный ход, с точки зрения веса страницы с анонсами, но конкретно у меня получилась разница в 35Кб.

Куда  вставляется width="100%", и / или  код  ResizeImageGet ?
Спасибо!
 
Цитата
Андрей пишет:
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!
Быть может не указали компаненту из какого инфоблока брать элементв? Гадать можно долго, лучше продемонстрируйте
 
Цитата
Андрей пишет:
Здравствуйте. Пожалуйста еще один раз о маленьких изображениях в слайде.

Куда вставляется width="100%", и / или код ResizeImageGet ?
Спасибо!
Просто к параметру вывода изображения анонса

Код
<img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="100%" alt="<?=$arItem["NAME"]?>" />
 
 
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в     style.css это сказывается и на другом слайдере.   В чем может быть проблема? Спасибо!
 
Цитата
Андрей пишет:
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в style.css это сказывается и на другом слайдере. В чем может быть проблема? Спасибо!
Дело в style.css а точнее в селекторах, у каждого слайдер они должны быть уникальными- если слайдеры отличаются
 
Добрый день.  После замены селекторов слайдеры управляются отдельно, только второй  не выводится.
Во втором слайдере заменил селекторы на:  #slide_1     .slider_1     .items_1     .baner_1      .baner_1 span
и в   template.php ,  и в  style.css. А вот селекторы :  .pagination, .prev, .next, .play, .paused, .progbar, .numStatus   есть только в  style.css ;     class="preview_picture"  -  только в template.php . Если их  требуется менять то где их найти? Большое спасибо.
 
Это все должно быть в js скриптах от слайдера
 
У меня не получается слайдере сделать картинки подходящего размера.
В настройках инфоблока "Поле" стоит уменьшать размер картинки до 500. Он ее уменьшает и в разделе акции отображается все нормально. Но как только картинка попадаете в слайдер она остается такой же маленькой и не соответствует размерам слайдера. Если увеличиваю картинку в акциях до размеров в слайдере, то в акциях она вылезает на левую правую колонку сайта.
Где и какой параметр я упускаю?
 
Цитата
Игорь пишет:
У меня не получается слайдере сделать картинки подходящего размера.
В настройках инфоблока "Поле" стоит уменьшать размер картинки до 500. Он ее уменьшает и в разделе акции отображается все нормально. Но как только картинка попадаете в слайдер она остается такой же маленькой и не соответствует размерам слайдера. Если увеличиваю картинку в акциях до размеров в слайдере, то в акциях она вылезает на левую правую колонку сайта.
Где и какой параметр я упускаю?
В настройках инфоблока установите размер картинки под слайдер, а в акциях искусственно зажмите ее в 100% от ширины контента

Код
<img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="100%"  />
 
 
Цитата
Михаил Базаров пишет:
<img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="100%" />
Думаю нужно добавить еще одну строчку:
Цитата
<img src="<?=$arItem["DETAIL_PICTURE"]["SRC"]?>" width="100%"  />
Так как без нее после входа в какую-то акцию в ней картинка по прежнему будет растянута.

Но дело даже не в этом.
Попробовал отредактировать файл indеx.php в папку Акции - результата нет.

Попробовал отредактировать общий css, классами .preview_picture и .detail_picture. Результат появился, но зацепил соответственно все страницы.

Какой конкретно файл нужно править чтоб именно к акциям относился?  
 
Цитата
Игорь пишет:
Какой конкретно файл нужно править чтоб именно к акциям относился?
template.php компанента новостей который выводит акции. Чтобы не цеплял другие разделы- создать под них свой отдельный шаблон.
 
Михаил, доброе утро!
Никак не могу сладить со слайдером!))) на nhao.ru. Все делал по твоим урокам. Chrome говорит что никак не может найти файлы со скриптами . Из вышесказанных комментариев, так и не понял, что и где надо посмотреть. js знаю слабо. Зато, благодаря твоим видеоурокам, быстро освоил bitrix!  
 
Здравствуйте Михаил!
Делаю все по вашим урокам. Вставил в включаемую область компонент "Список новостей", настроил параметры компонента все точь в точь как в данном уроке. Сохраняю шаблон компонента, в результате он у меня выглядит совсем по другому.

Код
<?
if(!defined("B_PROLOG_INCLUDED" || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);

if($arResult["FILE"] <> '')
    include($arResult["FILE"]
?>


Ну и соответственно дальше сложно ориентироваться по видеоуроку. Почему к меня получился такой код компонента, может я что не так сделал? Подскажите пожалуйста
 
Цитата
Алексей пишет:
Здравствуйте Михаил!
Делаю все по вашим урокам. Вставил в включаемую область компонент "Список новостей", настроил параметры компонента все точь в точь как в данном уроке. Сохраняю шаблон компонента, в результате он у меня выглядит совсем по другому.
Код
 <?
if(!defined("B_PROLOG_INCLUDED" || B_PROLOG_INCLUDED!==true)die();
...
?> 


Ну и соответственно дальше сложно ориентироваться по видеоуроку. Почему к меня получился такой код компонента, может я что не так сделал? Подскажите пожалуйста
Вся папка /bitrix/templates из урока, со всеми шаблонами: default  и assistant
Скачать
 
Спасибо Михаил!

Скачал готовый шаблон слайдера, заменил в папке со своим шаблонам. Видно что файл стилей применяется. Но слайды не выводятся, просто пустая область.

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

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

Стили применяются

.news-right_all { background:#ddd; padding: 15px; border:1px solid #ccc; font-size:12px;   }
.news-right {margin:0px 0px 10px 0px;  }
.news-right a {font-style:italic; color:#555;}        
a.aal_news {float: right; color: blue; }


А анонсы не выводятся. Только серая область и ссылка на "Все новости" внизу. Хотя использовал ваш готовый шаблон.
 
Подскажите, если js отключен (а NoScript, я думаю, используют многие), то выводиться просто пустая белая область. Можно как-то отловить этот момент? Т.е. нужно такое поведение: если js включена, то выводиться штатный слайдер. Если отключена - то выводиться какая-то статичная картинка (а в идеале, конечно, желательно выводить в этом случае одну, самую свежую акцию).
 
Цитата
Гость сайта пишет:
Подскажите, если js отключен (а NoScript, я думаю, используют многие), то выводиться просто пустая белая область. Можно как-то отловить этот момент? Т.е. нужно такое поведение: если js включена, то выводиться штатный слайдер. Если отключена - то выводиться какая-то статичная картинка (а в идеале, конечно, желательно выводить в этом случае одну, самую свежую акцию).
Можно использовать другой слайдер. Например работающий на чистом css
Например http://ruseller.com/lessons/les1475/demo/index.html

Само собой для браузров без поддержки CSS3 (IE в основном) использовать условные комментарии.
 
Здравствуйте! Не получается в слайдере отобразить картинки нужного размера. Вы по этому поводу уже писали. Я так и сделала: загрузила картинки нужного размера, в настройках инфоблока их не уменьшала, а в коде поставила width="100%". Результата не было пока я не загрузила картинки заново. После этого слайдер получился как нужно, а в акциях картинки не сжались до ширины контента (т.е. width="100%" не сработал). А если потом вернуть все настройки назад, т.е. в настройках инфоблока уменьшать картинки и убрать в коде width="100%", то опять ничего не произойдет пока не перезагрузить картинки заново.
Подскажите как все таки сделать слайдер
Спасибо
 
Цитата
Наталья пишет:
Здравствуйте! Не получается в слайдере отобразить картинки нужного размера. Вы по этому поводу уже писали. Я так и сделала: загрузила картинки нужного размера, в настройках инфоблока их не уменьшала, а в коде поставила width="100%". Результата не было пока я не загрузила картинки заново. После этого слайдер получился как нужно, а в акциях картинки не сжались до ширины контента (т.е. width="100%" не сработал). А если потом вернуть все настройки назад, т.е. в настройках инфоблока уменьшать картинки и убрать в коде width="100%", то опять ничего не произойдет пока не перезагрузить картинки заново.
Подскажите как все таки сделать слайдер
Спасибо
Скачать шаблон сайта - посмотрите как это реализовано и поищите ошибку/отличия у себя.
Картинки после изменения в настройках инфоблока, надо перезагружать. Иначе Битриксу не из чего их создать.
 
Михаил здравствуйте, подскажите можно ли загружать изображения из конкретной папки, а не из раздела сайта? в случайном порядке например. Не связывая изображение и анонс? С версткой не в ладах, сам пробую, не получается....
Спасибо.
 
Цитата
Славик пишет:
Михаил здравствуйте, подскажите можно ли загружать изображения из конкретной папки, а не из раздела сайта? в случайном порядке например. Не связывая изображение и анонс? С версткой не в ладах, сам пробую, не получается....
Спасибо.
Изображения анонса и детальной можно грузить откуда угодно.
 
Я имею в виду в слайдер, я не делал в акциях большие картинки (а в некоторых вообще нет), соответственно и в слайдере они либо маленькие либо нету....
 
Добрый день. Решил сделать слайдер, но не брать информацию из акций как у Вас. Вставил его, все работает. Только одна  проблема- при замене текста на русский отображаются коказябры, проблемы с кодировкой. Менял кодировку  для всего сайта, и для CSS. Не помогло. Жду совета, заранее благодарен.  
 
Цитата
Алексей пишет:
Добрый день. Решил сделать слайдер, но не брать информацию из акций как у Вас. Вставил его, все работает. Только одна проблема- при замене текста на русский отображаются коказябры, проблемы с кодировкой. Менял кодировку для всего сайта, и для CSS. Не помогло. Жду совета, заранее благодарен.
На чем работаете? Если WinSCP и Notepad такое бывает, поставте нормальный редактор типа SublimeText3
 
Цитата
Михаил Базаров пишет:
Цитата
Алексей пишет:
Добрый день. Решил сделать слайдер, но не брать информацию из акций как у Вас. Вставил его, все работает. Только одна проблема- при замене текста на русский отображаются коказябры, проблемы с кодировкой. Менял кодировку для всего сайта, и для CSS. Не помогло. Жду совета, заранее благодарен.
На чем работаете? Если WinSCP и Notepad такое бывает, поставте нормальный редактор типа SublimeText3
Проблема решилась таким образом: вставил мета-тег  в код шаблона компонента и появилась кириллица. Сайт пока на локалке, при переносе на хостинг может опять возникнуть такая проблема?Потому как, чувствую я , что способ не совсем правильный. Работаю на dreamweaver.
 
Здравствуйте! Подскажите, а можно как то проверку на наличие картинки сделать? и если её нет не выводить новость, а то получается пустота... или это очень проблематично?
 
Здравствуйте, Михаил
Делаю сайт по вашим урокам вроде все получается. Но застрял на одной ерунде, может вопрос не в тему нор все же прошу Вашей подсказки.  На сайте создал веб форму через сервис веб-форм в битрикс, выбрал использовать свой шаблон и т.п. Так вот проблема возникла в следующем не могу найти куда добавить свой стиль в выпадающий список. Подскажите пожалуйста?  
 
То ли я такой тупой, то ли опыта и знаний не хватает... Создал слайдер по уроку.Начал он у меня ездить, но только одну картинку, и 1н эффект. Эффект заканчивает действие - и останавливается.В чем дело может быть?
 
Здравствуйте! Я застрял на 6:25 минуте "Список новостей, копировать шаблон компонента". У меня нету кнопки "Копировать шаблон компонента". Что делать?
 
Добрый день Михаил!
Слайд у меня работает, но картинки не активны как ссылки. Подскажите пожалуйста в чем может быть причина?
 
Михаил доброго времени суток,
Спасибо за урок, так понятно не многие умеют объяснять… помогло…
Не могли бы дать ссылку на изначальный дистрибутив слайдера, который взяли за основу. Хочу кнопки-стрелочки налево направо (вперед, назад) (prev, next) сделать.
Заранее спасибо.
 
Цитата
Сергей пишет:
Михаил доброго времени суток,
Спасибо за урок, так понятно не многие умеют объяснять… помогло…
Не могли бы дать ссылку на изначальный дистрибутив слайдера, который взяли за основу. Хочу кнопки-стрелочки налево направо (вперед, назад) (prev, next) сделать.
Заранее спасибо.
К сожалению исходного у меня не осталось. Но он как то запросто находится в поисковых системах.
 
Спасибо большое за уроки, все очень просто и понятно!
Вопрос. Если мне нужно вывести слайдер не на главной странице, а на внутренних, ссылки на скрипты все равно писать в шаблоне сайта? Или для этих страниц делать отдельный шаблон?
 
Цитата
Ольга пишет:
Спасибо большое за уроки, все очень просто и понятно!
Вопрос. Если мне нужно вывести слайдер не на главной странице, а на внутренних, ссылки на скрипты все равно писать в шаблоне сайта? Или для этих страниц делать отдельный шаблон?
Да6 просто вставляете его во включаемую область раздела в нужном разделе, а не на главной
 
Михаил, здравствуйте!
Огромное спасибо за уроки!
Есть проблема по уроку: создал на главной включаемую область, далее все по уроку, в ней появились поля под акции, но ни текст, ни картинки не отображаются, при этом активны кнопки добавить акцию, изменить акцию, изменения вносятся и сохраняются.
Что я делаю не так? Помогите пожалуйста!
Заранее спасибо!
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
Загрузить картинки
 
Поблагодарить и поддержать:
Или подписаться на boosty канал: Видео на Ютубе