Owl Carusel не работает при изменении значения атрибута

  • 33 Ответов
  • 1563 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

diana1975

  • ***
  • 149
  • 1
Всем здравствуйте, тут такое дело: установила слайдер Owl Carusel2 в карточке товара, все получилось, как планировала, но при нажатии на кнопку выбора атрибута товара (покупатель выбирает товар с футляром или без)
мой слайдер слетает... Как быть? как привязать скрипт слайдера к   атрибутам?
« Последнее редактирование: 18.02.2016, 10:11:24 от diana1975 »

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Запихнуть инициализацию owl carusel в js функцию и после изменения атрибута вызывать вашу функцию еще раз.
А конкретика будет зависеть от того как вы добавляете Owl...
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

diana1975

  • ***
  • 149
  • 1
Вот фрагмент кода в карточке товара, где я на картинку товара навесила слайдер:
Код
<div class="owl-carousel">
            <?php foreach($this->images as $k=>$image){?>
            <a class="lightbox   " id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" <?php /*?><?php if ($k!=0){?>style="display:none"  <?php }
                       
     ?>                <?php */?>
                       
 
                         title="<?php print htmlspecialchars($image->_title)?>">
            <div class="item">
              <h4> <img id = "main_image_<?php print $image->image_id?>" src = "<?php print $this->image_product_path?>/<?php print $image->image_name;?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" /> </h4>
            </div>
Внизу карточки товара добавила скрипт:
Код
<script type = "text/javascript" src = "<?php print JURI::root(); ?>components/com_jshopping/js/owl.carousel.min.js"></script> 
<script>


jQuery(document).ready(function() {
    var owl = jQuery(".owl-carousel").owlCarousel({
        loop: true,
        dots: true,
        margin: 0,
        nav: true,
        navText: ["<", ">"],
        items: 1
    });
    owl.on("changed.owl.carousel", function(event) {
        jQuery(".jshop_img_thumb").removeClass("select").eq(event.page.index).addClass("select")
    });
    jQuery(".jshop_img_thumb").removeAttr("onclick").off().each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,1000])
        })
    }).first().addClass("select")
});
 </script>

а с атрибутами я точно не смогу, с ява скриптом даже дружить не начала, подскажите, пожалуйста

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Я напишу для шаблонов по умолчанию. Т.е. что бы не было необходимости дописывать что-то в шаблон карточки. (В вашем случае уберите div с классом owl-carousel ... и закрывающий не забудьте убрать)
Спойлер
[свернуть]

Еще бы я скорость увеличил вот здесь owl.trigger("to.owl.carousel", [i,1000]) вместо  1000 поставил бы 500 или еще меньше. Т.к., если изображений будет много, то прокрутка от последнего к первому займет много времени.
« Последнее редактирование: 10.02.2016, 13:43:09 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

diana1975

  • ***
  • 149
  • 1
В плагин обязательно надо оформить, я начала возиться с owl carousel 2 только потому, что ничего толком не нашла для слайдера с миниатюрами и чтобы с эффектом Touch.
спасибо за помощь, только маленькое замечание: пропало выделение активной картинки - миниатюры и при смене картинок появились моргания, блики, не знаю, как точнее выразиться, хотя до обращения к атрибутам все норм.

*

al-teen

  • *****
  • 2458
  • 213
  • im
"Эфектом Touch"? Это называется Swipe Event. Просто не там ищете, неверно формулируете запросы Google. Swipe gallery или Swipe slider, Swipe carousel.
Перейдите по ссылкам, Вы удивитесь, как их много. Но owl на текущее время считают лучшим. owl2 в стадии бета-тестирования, попробуйте стабильную версию, возможно с этим исчезнут ошибки.

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
В плагин обязательно надо оформить, я начала возиться с owl carousel 2 только потому, что ничего толком не нашла для слайдера с миниатюрами и чтобы с эффектом Touch.
спасибо за помощь, только маленькое замечание: пропало выделение активной картинки - миниатюры и при смене картинок появились моргания, блики, не знаю, как точнее выразиться, хотя до обращения к атрибутам все норм.
Я, если честно, ваш код пристально не рассматривал. Постараюсь более внимательно по-изучать этот вопрос.
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

al-teen

  • *****
  • 2458
  • 213
  • im
А вообще, что мешает сделать вот так
Код
var length = jQuery(".jshop_img_thumb").length;
...
owl.trigger("to.owl.carousel", [i, length]);
1000 итерраций с навешиванием событий, хз однако. Давайте сразу миллион, на всякий случай. А вдруг! :)

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
А вообще, что мешает сделать вот так
Код
var length = jQuery(".jshop_img_thumb").length;
...
owl.trigger("to.owl.carousel", [i, length]);
1000 итерраций с навешиванием событий, хз однако. Давайте сразу миллион, на всякий случай. А вдруг! :)
Так еще лучше.. Кто же против... Я бы и loop: true, в loop: false сделал ... тогда не будет кучи клонов и будет спокойно работать  с изображениями атрибутов.
Спойлер
[свернуть]
« Последнее редактирование: 10.02.2016, 14:12:19 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

al-teen

  • *****
  • 2458
  • 213
  • im
Так еще лучше.. Кто же против... Я бы и loop: true, в loop: false сделал

Я вообще не совсем понимаю, что там происходит. Точнее, зачем через jquery пытаться выпилить onclick например, почему не выпилить его в файлах похапэ? Зачем там each? - jQuery(el).click сам по себе производит перебор массива элементов. А затем выдергивать первый элемент и что-то ему присваивать. Это jQuery(".jshop_img_thumb")[0]. И там каждый раз происходит выборка DOM, тогда как можно вначале функции сделать это один раз, в переменную, затем использовать ее, вместо jQuery(".jshop_img_thumb") на каждый чих. И это реально ускорит весь этот код.

*

diana1975

  • ***
  • 149
  • 1
Так дайте, пожалуйста, облегченный код, думаю, не мне одной пригодится такой слайдер ^-^

*

al-teen

  • *****
  • 2458
  • 213
  • im
Так дайте, пожалуйста, облегченный код, думаю, не мне одной пригодится такой слайдер ^-^
Я не знаю, что Вы пытаетесь сделать. Зачем выпиливать onclick через js? Почему это не сделать там, где он назначается? Для чего там вот это все?

Код
    owl.on("changed.owl.carousel", function(event) {
        jQuery(".jshop_img_thumb").removeClass("select").eq(event.page.index).addClass("select")
    });
    jQuery(".jshop_img_thumb").removeAttr("onclick").off().each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,1000])
        })
    }).first().addClass("select")
});
Как я могу дать "облегченный код", если на мой взгляд, текущий вариант делает какие-то бесполезные вещи, которые ему делать совсем не полагается (это я про удаление onclick через жиквери).

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
To al-teen
А зачем его (onclick) вообще выпиливать? И с ним должно спокойно работать
Код
function owlForDiana(){
jQuery(".text_zoom").remove();
jQuery("#list_product_image_middle a.lightbox").wrapAll("<div class='owl-carousel owl-image-middle'></div>");
var thumb=jQuery(".jshop_img_thumb"),
length = thumb.length,
owl = jQuery(".jshop.productfull .owl-carousel.owl-image-middle");
   owl.owlCarousel({
        loop: false,
        dots: true,
        margin: 0,
        nav: true,
        navText: ["<", ">"],
        items: 1
    });

    owl.on("changed.owl.carousel", function(event) {
        thumb.removeClass("select").eq(event.page.index).addClass("select");
    });
    thumb.each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,length]);
        });
    }).first().addClass("select");
}
« Последнее редактирование: 10.02.2016, 14:39:42 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

al-teen

  • *****
  • 2458
  • 213
  • im
To al-teen
А зачем его (onclick) вообще выпиливать?
IDK, раз делают, значит для чего-то нужно. В любом случае, если там 1000 картинок, для onclick они будут удалять обработчики (даже не удаляя сами атрибуты). А это ресурс и время. На самом деле все это является костылями. Для чего сперва назначать событие, затем через js его отменять? Нелогично, если оно не нужно, то его не следует назначать с самого начала. А для этого нужно выпилить его из HTML.

*

robert

  • ********
  • 4002
  • 371
При onChange селекта "футляр" срабатывает перезагрузка изображения + AJAX запрос, который меняет цену и, возможно, изображение тоже. Вот и все дела. Не там копаетесь.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

diana1975

  • ***
  • 149
  • 1
То, что вы сейчас говорите, al-teen, для меня - китайские иероглифы(но это до поры до времени!), с кодом мне помог один хороший человек, а про качества кода мне не судить, т.к.  не понимать. Код пришлось менять,
потому что в моем варианте слайдер - без картинок: http://owlcarousel.owlgraphic.com/demos/basic.html. В owl carousel есть с картинками, но там нет loop (бесконечный цикл картинок), а мне он нравится...
Если бы губы Никанора Ивановича да приставить к носу Ивана Кузьмича...(Гоголь)
 

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
При onChange селекта "футляр" срабатывает перезагрузка изображения + AJAX запрос, который меняет цену и, возможно, изображение тоже. Вот и все дела. Не там копаетесь.
Мы в данном случае не ведем речь про событие при смене атрибута... С ним все и так понятно.

Мы говорим про onclik на thumbЕ. На нем срабатывает всего лишь showImage(id)
Спойлер
[свернуть]
В общем в данном случае она даже нужна.
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

al-teen

  • *****
  • 2458
  • 213
  • im
jQuery(".text_zoom").remove(); - это зачем?

diana1975, суть в том, что предоставленный код не работает, верно? Потому нет разницы, кем именно он предоставлен. Вам нужно найти в HTML эти onclick и удалить эти атрибуты с их обработчиками. Нужно найти class="text_zoom" и удалить имя класса из атрибута или целиком class="", если он там один. Затем, вместо вот этого трэш-кода
Код
jQuery("#list_product_image_middle a.lightbox").wrapAll("<div class='owl-carousel owl-image-middle'></div>");
для id="list_product_image_middle" добавить class="owl-carousel owl-image-middle".
Когда сделаете это, станет возможным указать Вам, как и что делать далее. Но не сейчас, не в этом виде.

P.S. подгрузка там не так делается, посмотрите внимательнее демо owl, там есть пример, как брать картинки сразу по ajax-запросу и отображать их в очереди.

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
jQuery(".text_zoom").remove(); - это зачем?

diana1975, суть в том, что предоставленный код не работает, верно? Потому нет разницы, кем именно он предоставлен. Вам нужно найти в HTML эти onclick и удалить эти атрибуты с их обработчиками. Нужно найти class="text_zoom" и удалить имя класса из атрибута или целиком class="", если он там один. Затем, вместо вот этого трэш-кода
Код
jQuery("#list_product_image_middle a.lightbox").wrapAll("<div class='owl-carousel owl-image-middle'></div>");
для id="list_product_image_middle" добавить class="owl-carousel owl-image-middle".
Когда сделаете это, станет возможным указать Вам, как и что делать далее. Но не сейчас, не в этом виде.

P.S. подгрузка там не так делается, посмотрите внимательнее демо owl, там есть пример, как брать картинки сразу по ajax-запросу и отображать их в очереди.

Всё работает.
Про onclick читайте выше

А вообще сложно спорить с support team.
Поэтому мой рабочий "трэш-код" вот
Спойлер
[свернуть]

Ну, а чистый код от al-teen
« Последнее редактирование: 10.02.2016, 15:05:53 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

dmitry_stas

  • ********
  • 9615
  • 929
А вообще сложно спорить с support team.
почему? спорить легко. доказать что то сложно  ;D
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

diana1975

  • ***
  • 149
  • 1
Так ка же быть  c  выделением активной картинки - миниатюры, которое перестает работать при клике на атрибут с футляром да/нет?

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Так ка же быть  c  выделением активной картинки - миниатюры, которое перестает работать при клике на атрибут с футляром да/нет?
Правильно прописать стили

Вместо
Код
img.jshop_img_thumb.malo.select{
border:2px solid rgba(251,163,204,0.99);
}

Прописать
Код
img.jshop_img_thumb.select{
border:2px solid rgba(251,163,204,0.99);
}
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

diana1975

  • ***
  • 149
  • 1
спасибо говорить, оказывается, рано: подскажите, пожалуйста, что надо дописать в скрипте, чтобы при изменении количества товара и выборе цвета камня слайдер исправно работал?
ссылка

Вот как бы помирить этот слайдер c атрибутами, которым назначены картинки? и с блоком  количества товара... неужели это так трудно?
« Последнее редактирование: 15.02.2016, 14:48:32 от diana1975 »

*

diana1975

  • ***
  • 149
  • 1
уважаемый Brooksus, понимаю Вашу занятость, но помогите довести начатое до конца, кто как не Вы?
Понимаю, что этот фрагмент кода отвечает  за то, чтобы подружить атрибут с футляром да/нет:
Код
jQuery(function(){
jQuery(document).ajaxComplete(function(event, xhr, settings){
if (settings.url.indexOf('ajax_attrib_select_and_price')!==-1){
owlForDiana();
а на большее моих знаний не хватает

*

dmitry_stas

  • ********
  • 9615
  • 929
кто как не Вы?
спасибо говорить, оказывается, рано

так рано, или "кто как не вы"? :) видимо Brooksus и подумал, что раз рано... тем более

неужели это так трудно?
:)
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

diana1975

  • ***
  • 149
  • 1
Не, он точно не обиделся, это я к тому, что на все кнопки-то не понажимала, не все проверила, думала, что вопрос закрыт, а заметила эти кнопки только через несколько дней.
Ну хотя бы кнопку количества товара... Бы хоть...

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Вам надо loop отслеживать. Если картинок несколько, то true, если одна то false

А что бы при клике по кнопкам - / + не срабатывала ваша функция можно еще проверку добавить типа settings.url.indexOf('change_attr=0')===-1)
Возможно, как-нибудь так
Спойлер
[свернуть]

Сама функция с проверкой loop
Спойлер
[свернуть]
Точнее про onInitialize посмотрите в документации к owl.

Если с onInitialize не заработает можете просто в loop прописать
Код
loop: length > 1 ? true:false
« Последнее редактирование: 17.02.2016, 19:22:51 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

diana1975

  • ***
  • 149
  • 1
Здравствуйте, Brooksus, после изменения кода при клике по кнопкам - / + слайдер уже не слетает, но консоль как-то бурно реагирует:
http://prntscr.com/a4gw1q
критично ли это, или и так сойдет?

*

dmitry_stas

  • ********
  • 9615
  • 929
это плюс-минус виноват. обсуждали в теме +- что надо сделать, надо только найти. исправить надо, потому что неверно будет цену считать при смене атрибутов
« Последнее редактирование: 17.02.2016, 20:46:04 от dmitry_stas »
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Brooksus

  • *****
  • 616
  • 156
  • Ща спою...
Здравствуйте, Brooksus, после изменения кода при клике по кнопкам - / + слайдер уже не слетает, но консоль как-то бурно реагирует:
http://prntscr.com/a4gw1q
критично ли это, или и так сойдет?
Реакция консоли никак не связана с вышеприведенным кодом. У вас была проблема до этого кода. Поищите, то о чём говорит dmitry_stas
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.