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

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

-
Внимание! все сообщения проходят премодерацию. Ваше сообщение появится после проверки
Поиск  Правила 
Ответить
RSS
Видеоурок №8: создание слайдера
 
#1
0
20.01.2014 13:46:19
Видеоурок №8: создание слайдера

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

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

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

Код
<img src="путь к картинке на сайте/картинка.jpg" />
 
Цитировать   Имя
 
#4
0
17.02.2014 02:57:33
Здравствуйте.

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

Столкнулся со следующей проблемой: В слайдер выводятся картинки прямо из анонса(если мы выставили обрезать их ширину с обрезанной шириной они и выводятся) в следствие чего, картинка занимает очень мало места. На вашем сайте 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"].'" />'; 
?>
и уменьшить разиер картинки анонса до оптимального.
 
Цитировать   Имя
 
#6
0
27.02.2014 09:23:11
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь,  скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ  к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!
 
Цитировать   Имя
 
#7
0
27.02.2014 09:35:24
Цитата
Александр пишет:
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!
У вас jquery не подключен http://bretonbasset.ru/bitrix/templates/bassetjs/jquery-1.7.min.js - выдает ошибку. Попробуйте подключить его из ядра битрикс.

Код
 <?
   CJSCore::Init(array("jquery"));
 ?>
 
Цитировать   Имя
 
#8
0
27.02.2014 12:43:45
Цитата
Михаил Базаров пишет:
Цитата
Александр пишет:
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!
У вас jquery не подключен http://bretonbasset.ru/bitrix/templates/bassetjs/jquery-1.7.min.js - выдает ошибку. Попробуйте подключить его из ядра битрикс.
Код
  <?
   CJSCore::Init(array("jquery"));
 ?>
попробывал не помогает, где еще можно поискать возможную проблему?
 
Цитировать   Имя
 
#9
0
28.02.2014 12:24:37
Цитата
Гость сайта пишет:
Цитата
У вас 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 так что ищите там
 
Цитировать   Имя
 
#10
0
20.03.2014 04:02:12
Здравствуйте, по вашему уроку сделал слайдер на том шаблоне что был в битриксе, но все остальные уроки не смотрел некогда(  суть вопроса в следующем: слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
 
Цитировать   Имя
 
#11
0
20.03.2014 04:24:46
Цитата
Константин пишет:
...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.
 
Цитировать   Имя
 
#12
0
10.04.2014 05:12:33
Цитата
Михаил Базаров пишет:
Цитата
Константин пишет:
...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.
Полностью сверстал заново дизайн, по вашим урокам,  слайдер теперь работает, большое спасибо
 
Цитировать   Имя
 
#13
0
15.04.2014 09:44:18
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и 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;
}
Заранее благодарен.
 
Цитировать   Имя
 
#14
0
15.04.2014 14:07:55
Цитата
Александр пишет:
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?
Код
 #slide { height:300px; width:610px; position:relative; overflow:hidden; margin-left:5px;}
.slider {
    width:610px;
}
.items { display:none;
}
.........
Заранее благодарен.
Лично у меня во всех все нормально. Допускаю что в старых IE- ниже девятого, может не работать плавное движение в слайдере. Тут можно, именно для них (старых Ишаков) написать отдельный файл стилей, или вообще слайдер не показыать, подменить на статичную картинку, например.
 
Цитировать   Имя
 
#15
0
08.05.2014 19:27:59
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!
 
Цитировать   Имя
 
#16
0
09.05.2014 00:50:40
Здравствуйте. Пожалуйста еще один раз о маленьких изображениях в слайде.

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

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

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

Код
<img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="100%" alt="<?=$arItem["NAME"]?>" />
 
Цитировать   Имя
 
#19
0
13.05.2014 20:37:43
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в     style.css это сказывается и на другом слайдере.   В чем может быть проблема? Спасибо!
 
Цитировать   Имя
 
#20
0
14.05.2014 03:57:15
Цитата
Андрей пишет:
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в style.css это сказывается и на другом слайдере. В чем может быть проблема? Спасибо!
Дело в style.css а точнее в селекторах, у каждого слайдер они должны быть уникальными- если слайдеры отличаются
 
Цитировать   Имя
 
Ответить
BBCode   Правила
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Загрузить картинки
 
Заметки разработчика

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

Адаптивное гамбургер меню для битрикс

Заметка коротенькая, но решил оставить ее - так как самому часто нужно нечто подобное. В архиве...

Просмотров: 12496
Ускорение работы сайта на 1С-Битрикс

Данная статья написана специально под видеоролик (приложен в конце статьи), опубли...

Просмотров: 10324
Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс

Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одной...

Просмотров: 32360
Создание блога с комментариями, оценками и просмотрами на сайте с 1С-Битрикс

Если на вашем сайте требуется создание раздела с блогом или новостями, статьями. Записям в...

Просмотров: 17847
Добавление своих полей в почтовые шаблоны Битрикс

Иногда нужно внести свои поля в почтовые шаблоны битрикс. Например: добавить имя и номер телефона...

Просмотров: 37696
Основные функции вывода в шаблонах Битрикс

Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну кучку....

Просмотров: 145042
© 2011—2021 camouf.ru | Разработка сайтов и приложений.
ИП Базаров Михаил Мурадович, ОГРНИП: 315784700173692, ИНН: 691174187962 Все реквизиты Дизайн создан за 2 дня, полная пересборка/редизайн сайта будут сделаны с 1 по 10 января 2022
  • Время отсчета 00:00 по Москве.
  • Переходов сегодня: 2058 раз.
  • Сейчас на сайте: 13 чел.
Симпл
camouf.ru использует файлы «cookie» с целью персонализации сервисов и повышения удобства пользования веб-сайтом. Если Вы не хотите, чтобы Ваши пользовательские данные обрабатывались, пожалуйста, ограничьте их использование в своём браузере
Политика конфиденциальности
Заказaть разработку attention