Видеоурок №8: создание слайдера, разработка на 1С-Битрикс

Создаем слайдер на основе инфоблока и компонента "список новостей". Выводим слайдер на главную страницу сайта. Для работы понадобится заготовка слайдер с плавным движением. Интегрируем сторонний слайдер и скрипты в битрикс.

a:2:{s:4:"TEXT";s:162:"";s:4:"TYPE";s:4:"HTML";}

Просмотров: 28935 | Комментариев: 74

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

Михаил Базаров 20.01.2014

Цитата

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

Заранее 1000 благодарностей!
Сергей

Просто в эту включаемую область, вместо компанента список новостей вставьте

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

Имя Цитировать

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

Михаил Базаров 17.02.2014

Цитата

Гость сайта пишет:
Здравствуйте.

Столкнулся со следующей проблемой: В слайдер выводятся картинки прямо из анонса(если мы выставили обрезать их ширину с обрезанной шириной они и выводятся) в следствие чего, картинка занимает очень мало места. На вашем сайте 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"].'" />'; 
?>

и уменьшить разиер картинки анонса до оптимального.

Имя Цитировать

Александр 27.02.2014
Добрый день. делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!
Имя Цитировать

Михаил Базаров 27.02.2014

Цитата

Александр пишет:
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!

У вас jquery не подключен http://bretonbasset.ru/bitrix/templates/bassetjs/jquery-1.7.min.js - выдает ошибку. Попробуйте подключить его из ядра битрикс.

Код
<? CJSCore::Init(array("jquery")); ?>

Имя Цитировать

Гость сайта 27.02.2014

Цитата

Михаил Базаров пишет:

Цитата

Код
<? CJSCore::Init(array("jquery")); ?>

попробывал не помогает, где еще можно поискать возможную проблему?

Имя Цитировать

Михаил Базаров 28.02.2014

Цитата

Гость сайта пишет:

Цитата

Код
<? CJSCore::Init(array("jquery")); ?>

попробывал не помогает, где еще можно поискать возможную проблему?

По идее вам очевидно говорит на ошибку в первой строке файла /var/www/u7619407/data/www/bretonbasset.ru/index_inc.php так что ищите там

Имя Цитировать

Константин 20.03.2014
Здравствуйте, по вашему уроку сделал слайдер на том шаблоне что был в битриксе, но все остальные уроки не смотрел некогда( суть вопроса в следующем: слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
Имя Цитировать

Михаил Базаров 20.03.2014

Цитата
Константин пишет: ...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?

Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.

Имя Цитировать

Константин 10.04.2014

Цитата

Михаил Базаров пишет:

Цитата
Константин пишет: ...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?

Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.

Полностью сверстал заново дизайн, по вашим урокам, слайдер теперь работает, большое спасибо

Имя Цитировать

Александр 15.04.2014

Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и 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;
}

Заранее благодарен.

Имя Цитировать

Михаил Базаров 15.04.2014

Цитата

Александр пишет:
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?

Код
#slide { height:300px; width:610px; position:relative; overflow:hidden; margin-left:5px;} .slider { width:610px; } .items { display:none; } .........

Заранее благодарен.

Лично у меня во всех все нормально. Допускаю что в старых IE- ниже девятого, может не работать плавное движение в слайдере. Тут можно, именно для них (старых Ишаков) написать отдельный файл стилей, или вообще слайдер не показыать, подменить на статичную картинку, например.

Имя Цитировать

Андрей 08.05.2014
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!
Имя Цитировать

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

Михаил Базаров 09.05.2014

Цитата

Андрей пишет:
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!

Быть может не указали компаненту из какого инфоблока брать элементв? Гадать можно долго, лучше продемонстрируйте

Имя Цитировать

Михаил Базаров 09.05.2014

Цитата
Андрей пишет: Здравствуйте. Пожалуйста еще один раз о маленьких изображениях в слайде. Куда вставляется width="100%", и / или код ResizeImageGet ? Спасибо!

Просто к параметру вывода изображения анонса

Код
<img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="100%" alt="<?=$arItem["NAME"]?>" />

Имя Цитировать

Андрей 13.05.2014
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в style.css это сказывается и на другом слайдере. В чем может быть проблема? Спасибо!
Имя Цитировать

Михаил Базаров 14.05.2014

Цитата

Андрей пишет:
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в style.css это сказывается и на другом слайдере. В чем может быть проблема? Спасибо!

Дело в style.css а точнее в селекторах, у каждого слайдер они должны быть уникальными- если слайдеры отличаются

Имя Цитировать

Андрей 15.05.2014
Добрый день. После замены селекторов слайдеры управляются отдельно, только второй не выводится. Во втором слайдере заменил селекторы на: #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 . Если их требуется менять то где их найти? Большое спасибо.
Имя Цитировать

Поделиться страницей Спасибо, это помогает развивать сайт.

Мой youtube канал. C 1-го сентября начнется выход видеокурса по разработке доски объявлений с мобильным приложением.

Перейти на канал Подписывайтесь и будьте в курсе:

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

Комментарии

Заметки разработчика