Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Видеоурок №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 а точнее в селекторах, у каждого слайдер они должны быть уникальными- если слайдеры отличаются
Ответить
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Загрузить картинки
 
Заметки разработчика

Примерно с 2013-го года пишу, короткие и не очень, заметки по разработке сайтов на Битрикс. Возможно, будут полезны кому-то еще. Во всех заметках есть возможность комментирования и обсуждения. Вы можете задавать уточняющие вопросы прямо там- отвечаю или дополняю заметки по возможности.

Заказaть разработку attention