Персональный сайт частного вебмастера

Новости:
24/10/2015 Карусель контента jCarousel 20/10/2015 Travel Kitchen 20/10/2015 ВЛагере 20/10/2015 Рекламный Ряд 20/10/2015 Бизнес Биржа 20/10/2015 Одежда для фитнеса 24/12/2014 Карусель с нефиксированной высотой - OWL Slider 21/12/2014 Вкладки, табсы, табы 05/12/2014 Адвокатская компания "Гранд" 17/11/2014 The White Fashion 10/06/2014 Магазин детской одежды "Носики" 19/12/2013 Решение для вывода блоков разной высоты 06/12/2013 Стилизация select 27/11/2013 Сниппет для адаптивной верстки 26/11/2013 Размер шрифтов в адаптивной верстке 25/11/2013 Как проверить адаптивную верстку 12/11/2013 Поисковое продвижение. SEO 12/11/2013 NivoSlider плагин слайдшоу 12/11/2013 Рейтинг статьи. Notation 11/11/2013 Создание форм. Formidable 11/11/2013 Навигация статей 10/11/2013 Создание полей. Chapms Extras 08/11/2013 Настройка URL страниц 07/11/2013 Просмотр изображений. MediaBox 10/10/2013 Создание php форм. Feedback. 06/10/2013 Форматирование текста 06/09/2013 Фильтры для воды 07/08/2013 Фильтры для воды "АКВО" 01/03/2013 Назар Владимирович Комар, Веб Разработчик 03/01/2013 слайдер на главной

Карусель контента jCarousel

Написать комментарий


  • Карусель контента jCarousel, 12 ноября 2013, 17:26

    Не вижу смысла использовать эту галерею, деревянная она какая-то, никогда не понимал ее


    • Карусель контента jCarousel, 12 ноября 2013, 17:28

      Преимуществом этой карусели является мощные callback функции, советую почитать информацию на оф. сайте http://sorgalla.com/jcarousel/. Уверен что найдете много полезного для себя!


  • Карусель контента jCarousel, 5 декабря 2013, 00:54

    А как использовать несколько таких галерей... только не одининакових по наполенини.. тоєсть с разними фоновими изображениями размерами и кнопками навигации...


    • Карусель контента jCarousel, 5 декабря 2013, 14:50

      Для того, чтобы использовать несколько, вам нужно сделать новую разметку и изменить id карусели, к которой вы обращаетесь. В данном примере это "mycarousel". Для примера, вы делаете новую разметку с ul id="new_mycarousel", и делаете новую инициализацию карусели с помощью jquery, обращаясь к новому id, это будет выглядеть следующим образом:

      HTML


      <ul id="new_mycarousel" class="jcarousel-skin-tango">
           <li><a href="" title=""><img src="images/car.png" width=""182" height="123" /></a></li>
             <li><a href="" title=""><img src="images/car.png" width=""182" height="123" /></a></li>
             <li><a href="" title=""><img src="images/car.png" width=""182" height="123" /></a></li>
             <li><a href="" title=""><img src="images/car.png" width=""182" height="123" /></a></li>
             <li><a href="" title=""><img src="images/car.png" width=""182" height="123" /></a></li>
      </ul>

      jQuery


      jQuery(document).ready(function() {
        jQuery('#new_mycarousel').jcarousel({
      // здесь пишем свойства, которые будут использоваться только  для новой карусели
      });

      });


  • Карусель контента jCarousel, 5 декабря 2013, 15:12

    ок - ну а єсли мне надо сам дизайн карусельки изменить ? то мене надо
    1) помнять іd
    2) поменять class - carousel-skin-tango на carousel-skin-new_tango + добавить в ccs - skin - новий клас + робочиє подкласи - да ?


    • Карусель контента jCarousel, 5 декабря 2013, 16:44

      второй файл не рекоммендую подключать, потому что если на сайте больше 5карусель - начинается загромождение файлами. В практике использую тот же файл стилей, только переопределяю необходимые мне свойства, например, фон элкментов основной карусели (#mycarousel) серого цвета, .slider #mycarousel li{backgroud:gray}, а во второй карусели фон белого цвета, в таком случае использую переопределение стилей и код css будет следующим .slider #new_carousel li{background:white}. Таким образом, мы избавляемся от лишних файлов, лишнего кода, да и собственно, запроса на подкючение нового файла стилей.
      2) поменять class - carousel-skin-tango на carousel-skin-new_tango + добавить в ccs - skin - новий клас + робочиє подкласи - да ?
      класс менять не надо, так как вы неподелючаете новый файл стилей, как я написал выше, удобно хранить стили одинаковых элементов в одном файле.


  • Карусель контента jCarousel, 5 декабря 2013, 23:43

    да может у Вас такоэ било.. у меня неоткуда взялса пустой блок... ??


    • Карусель контента jCarousel, 6 декабря 2013, 10:46

      Если вы сбросите мне ссылочку, мне проще будет вам помочь и отследить ошибку.... Пустой блок - вы имеете в виду пустой <li></li> контейнер?


  • Карусель контента jCarousel, 6 декабря 2013, 11:52

    да - но я уже решил =) спасибо Вас за статю =) проблема била в том что я неправильно подсчитал обшийразмер блоков... как только ширина била виставлена правильно лишний блок сам изчес =)


    • Карусель контента jCarousel, 6 декабря 2013, 12:28

      Обращайтесь! Буду рад помочь. Этот раздел с плагинами будет дополняться со временем.


  • Карусель контента jCarousel, 6 декабря 2013, 23:48

    извините слишком банальный вопрос - возможно ли применить к li блоку эффект hover- для изменения изображения в блоке? я все делаю правильно но чего-то у меня ничего не получается ....


    • Карусель контента jCarousel, 7 декабря 2013, 13:33

      при наведении на блок вы хотите показывать другую картинку? или что-то делать с текущей?
      1. для того, чтобы скрыть картинку при наведении на <li> элемент, css код должен быть следующим: ul#mycarousel li:hover img{display:none;}
      2. чтобы при наведении на блок показывать совсем другую картинку вам нужно использовать jQuery, так как показать другую картинку значит изменить атрибут src в тега img. Схематический код jquery будет таким:

      $(ul#mycarousel li).hover(function(){
            var standard_src = $(this).find('img').atrr('src');
            var new_src= 'images/new_pic.png';
            $(this).find('img').attr('src',new_src);
      }, function(){
           $(this).find('img').attr('src',standard_src);
      });

      Я понимаю, что в карусельке будет больше 1 элемента, и при наведении на каждый блок картинки должны быть разные. Есть вариант с хранением двух картинок в одном контейнере <li></li>, при котором одна из них будет скрыта, а при наведении на блок, меняем параметр видимости с помощью того же jquery или css для картинок. Если возникнут вопросы - пишите пожалуйста, подскажу.у