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

diana1975

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

Brooksus

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

diana1975

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

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

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

diana1975

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

al-teen

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

Brooksus

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

al-teen

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

Brooksus

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

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Так еще лучше.. Кто же против... Я бы и loop: true, в loop: false сделал

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

diana1975

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

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • 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

  • Давно я тут
  • 641
  • 169 / 0
  • Ща спою...
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, 12:39:42 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.
*

al-teen

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

robert

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

diana1975

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

Brooksus

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

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

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • 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

  • Давно я тут
  • 641
  • 169 / 0
  • Ща спою...
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, 13:05:53 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.
*

dmitry_stas

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

diana1975

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

Brooksus

  • Давно я тут
  • 641
  • 169 / 0
  • Ща спою...
Так ка же быть  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

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

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

diana1975

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

dmitry_stas

  • Легенда
  • 13152
  • 1232 / 8
кто как не Вы?
спасибо говорить, оказывается, рано

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

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

diana1975

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

Brooksus

  • Давно я тут
  • 641
  • 169 / 0
  • Ща спою...
Вам надо loop отслеживать. Если картинок несколько, то true, если одна то false

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

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

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

diana1975

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

dmitry_stas

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

Brooksus

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

Не работает ссылка после удаления круглой фиговины

Автор Concolor

Ответов: 14
Просмотров: 244
Последний ответ 13.04.2021, 07:29:09
от Concolor
Некорректно открываются изображения товаров - не работает lightbox

Автор Galiakberow

Ответов: 17
Просмотров: 854
Последний ответ 12.07.2017, 22:08:28
от dmitry_stas
Изображение атрибута (radio)

Автор ArtFrank

Ответов: 3
Просмотров: 522
Последний ответ 11.10.2016, 23:24:10
от kit2m2
На странице товара не работает Lightbox

Автор SFE

Ответов: 6
Просмотров: 649
Последний ответ 08.07.2016, 14:27:27
от SFE
<label> не работает, как надо

Автор diana1975

Ответов: 4
Просмотров: 1477
Последний ответ 30.03.2016, 22:48:06
от Brooksus