Телеграм: @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   Правила
Форма ответов
 
Текст сообщения*
Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Загрузить картинки
 
Заметки разработчика

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

Произвольное колличество товаров в процессе покупки

Очень удобно, когда в интернет магазине можно еще находясь в списке товаров отправить нужное...

Просмотров: 6307
Добавление и удаление из сравнения на AJAX: Битрикс

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

Просмотров: 12965
Как вывести картинки к разделам на базе _ext меню

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

Просмотров: 5675
Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа

В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей...

Просмотров: 1864
Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружение)

WebP это современный формат сжатия изображений, который позволяет, при правильных настройках...

Просмотров: 18213
Вывести картинку связанного элемента в каталоге битрикс

Иногда, например в интернет-магазине созданном на битрикс, нужно вывести рекомендуемые или...

Просмотров: 27721
© 2011—2021 camouf.ru | Разработка сайтов и приложений.
ИП Базаров Михаил Мурадович, ОГРНИП: 315784700173692, ИНН: 691174187962 Все реквизиты Информация на сайте, не является публичной офертой. Копирование материалов сайта запрещено.
  • Время отсчета 00:00 по Москве.
  • Переходов сегодня: 1622 раз.
  • Сейчас на сайте: 8 чел.
Симпл
camouf.ru использует файлы «cookie» с целью персонализации сервисов и повышения удобства пользования веб-сайтом. Если Вы не хотите, чтобы Ваши пользовательские данные обрабатывались, пожалуйста, ограничьте их использование в своём браузере Политика конфиденциальности
attention