Форум русской поддержки Joomla!® CMS
10.12.2016, 07:08:01 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 1016 раз)
0 Пользователей и 1 Гость смотрят эту тему.
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« : 10.02.2016, 10:11:30 »

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

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #1 : 10.02.2016, 10:47:36 »

Запихнуть инициализацию owl carusel в js функцию и после изменения атрибута вызывать вашу функцию еще раз.
А конкретика будет зависеть от того как вы добавляете Owl...
Записан
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #2 : 10.02.2016, 11:06:23 »

Вот фрагмент кода в карточке товара, где я на картинку товара навесила слайдер:
Код:
<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
Завсегдатай
*****

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #3 : 10.02.2016, 12:25:28 »

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

Еще бы я скорость увеличил вот здесь owl.trigger("to.owl.carousel", [i,1000]) вместо  1000 поставил бы 500 или еще меньше. Т.к., если изображений будет много, то прокрутка от последнего к первому займет много времени.
« Последнее редактирование: 10.02.2016, 12:43:09 от Brooksus » Записан
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #4 : 10.02.2016, 12:47:51 »

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

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #5 : 10.02.2016, 12:53:41 »

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

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #6 : 10.02.2016, 12:54:33 »

В плагин обязательно надо оформить, я начала возиться с owl carousel 2 только потому, что ничего толком не нашла для слайдера с миниатюрами и чтобы с эффектом Touch.
спасибо за помощь, только маленькое замечание: пропало выделение активной картинки - миниатюры и при смене картинок появились моргания, блики, не знаю, как точнее выразиться, хотя до обращения к атрибутам все норм.
Я, если честно, ваш код пристально не рассматривал. Постараюсь более внимательно по-изучать этот вопрос.
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #7 : 10.02.2016, 13:00:44 »

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

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #8 : 10.02.2016, 13:05:07 »

А вообще, что мешает сделать вот так
Код:
var length = jQuery(".jshop_img_thumb").length;
...
owl.trigger("to.owl.carousel", [i, length]);
1000 итерраций с навешиванием событий, хз однако. Давайте сразу миллион, на всякий случай. А вдруг! Azn
Так еще лучше.. Кто же против... Я бы и loop: true, в loop: false сделал ... тогда не будет кучи клонов и будет спокойно работать  с изображениями атрибутов.
Показать текстовый блок
« Последнее редактирование: 10.02.2016, 13:12:19 от Brooksus » Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #9 : 10.02.2016, 13:12:11 »

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

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

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #10 : 10.02.2016, 13:20:06 »

Так дайте, пожалуйста, облегченный код, думаю, не мне одной пригодится такой слайдер Smiley
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #11 : 10.02.2016, 13:23:35 »

Так дайте, пожалуйста, облегченный код, думаю, не мне одной пригодится такой слайдер Smiley
Я не знаю, что Вы пытаетесь сделать. Зачем выпиливать 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
Завсегдатай
*****

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #12 : 10.02.2016, 13:34:53 »

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, 13:39:42 от Brooksus » Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #13 : 10.02.2016, 13:39:46 »

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

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3595


« Ответ #14 : 10.02.2016, 13:43:19 »

При onChange селекта "футляр" срабатывает перезагрузка изображения + AJAX запрос, который меняет цену и, возможно, изображение тоже. Вот и все дела. Не там копаетесь.
Записан
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #15 : 10.02.2016, 13:45:51 »

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

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #16 : 10.02.2016, 13:54:58 »

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

Мы говорим про onclik на thumbЕ. На нем срабатывает всего лишь showImage(id)
Показать текстовый блок
В общем в данном случае она даже нужна.
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #17 : 10.02.2016, 13:55:07 »

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
Завсегдатай
*****

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #18 : 10.02.2016, 13:58:49 »

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, 14:05:53 от Brooksus » Записан
dmitry_stas
Профи
********

Репутация: +798/-4
Offline Offline

Сообщений: 7781



« Ответ #19 : 10.02.2016, 14:08:46 »

А вообще сложно спорить с support team.
почему? спорить легко. доказать что то сложно  Grin
Записан
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #20 : 11.02.2016, 10:49:19 »

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

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #21 : 11.02.2016, 11:50:43 »

Так ка же быть  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);
}
Записан
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #22 : 11.02.2016, 12:49:18 »

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

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

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #23 : 17.02.2016, 10:42:37 »

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

Репутация: +798/-4
Offline Offline

Сообщений: 7781



« Ответ #24 : 17.02.2016, 11:33:19 »

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

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

неужели это так трудно?
Azn
Записан
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #25 : 17.02.2016, 12:00:05 »

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

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #26 : 17.02.2016, 17:35:08 »

Вам надо loop отслеживать. Если картинок несколько, то true, если одна то false

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

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

Если с onInitialize не заработает можете просто в loop прописать
Код:
loop: length > 1 ? true:false
« Последнее редактирование: 17.02.2016, 18:22:51 от Brooksus » Записан
diana1975
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 134


« Ответ #27 : 17.02.2016, 19:38:12 »

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

Репутация: +798/-4
Offline Offline

Сообщений: 7781



« Ответ #28 : 17.02.2016, 19:41:55 »

это плюс-минус виноват. обсуждали в теме +- что надо сделать, надо только найти. исправить надо, потому что неверно будет цену считать при смене атрибутов
« Последнее редактирование: 17.02.2016, 19:46:04 от dmitry_stas » Записан
Brooksus
Завсегдатай
*****

Репутация: +153/-0
Offline Offline

Пол: Мужской
Сообщений: 602


Ща спою...


« Ответ #29 : 17.02.2016, 22:16:15 »

Здравствуйте, Brooksus, после изменения кода при клике по кнопкам - / + слайдер уже не слетает, но консоль как-то бурно реагирует:
http://prntscr.com/a4gw1q
критично ли это, или и так сойдет?
Реакция консоли никак не связана с вышеприведенным кодом. У вас была проблема до этого кода. Поищите, то о чём говорит dmitry_stas
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet