Вход • Регистрация

Эффект лупы для изображений товаров

  •
  • 15 апреля 2018 г.
  • Здравствуйте, на сайте family-goods.su хочу установить эффект лупы для изображений. На этом сайте http://zoomsl.sergeland.ru/example/ есть примеры, как можно установить.

    Например, надо прописать:

    <!-- HTML -->

    <img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg" title="Фото">

    И вот это:

    <!-- JAVASCRIPT -->

    <script>
    jQuery(function(){

    $(".my-foto").imagezoomsl({

    zoomrange: [3, 3]
    });
    });
    </script>

    То, что сами скрипты надо закинуть в папку "js" это понятно.

    В блоке head нужно будет указать скрипты:

    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/zoomsl-3.0.min.js"></script> - тоже понятно.

    А вот как прописать первые два кода? Я так понимаю надо прописать в shop.view.id.php, там есть блок с выводом изображений.
    •
    • 15 апреля 2018 г.
    • jquery уде по-умолчанию есть в шаблон

      в файл show_js.php надо добавить

      Код
      <script type="text/javascript" src="'.BASE_PATH.Custom::path('js/zoomsl-3.0.min.js').'" charset="UTF-8"></script>


      в shop.view.id.php

      Код
      echo '<img src="'.BASE_PATH.$img["link"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="shop_id_img">';


      заменить на

      Код
      echo '<img src="'.BASE_PATH.$img["vs"]["medium"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="my-foto shop_id_img" data-large="'.BASE_PATH.$img["link"].'">';

  •
  • 15 апреля 2018 г.
  • Вроде бы все сделал как написано, но не работает:

    вот часть кода show_js.php:

    Код
    echo '<script type="text/javascript">
    jQuery(function(e){
    e.datepicker.setDefaults(e.datepicker.regional["'.$lang.'"]);
    e.timepicker.setDefaults(e.timepicker.regional["'.$lang.'"]);
    });
    </script>
    <script type="text/javascript" src="'.BASE_PATH.Custom::path('js/jquery.scrollTo.min.js').'" charset="UTF-8"></script>
    <script type="text/javascript" src="'.BASE_PATH.Custom::path('js/jquery.maskedinput.js').'" charset="UTF-8"></script>
    <script type="text/javascript" src="'.BASE_PATH.Custom::path('js/jquery.touchSwipe.min.js').'" charset="UTF-8"></script>
    <script type="text/javascript" src="'.BASE_PATH.Custom::path('js/zoomsl-3.0.min.js').'" charset="UTF-8"></script>
    <script src="'.BASE_PATH.File::compress('js/extsrc.js', 'js').'"></script>';


    вот часть кода shop.view.id.php:
    Код
    //вывод изображений товара
    if (!empty($result["img"]))
    {
    echo '<div class="js_shop_all_img shop_all_img shop-item-big-images">';
    $k = 0;
    foreach ($result["img"] as $img)
    {
    switch ($img["type"])
    {
    case 'animation':
    echo '<a class="js_shop_img shop-item-image'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" rel="prettyPhoto[gallery'.$result["id"].'shop]" style="background-image:url('.BASE_PATH.$img["link"].')" image_id="'.$img["id"].'">';
    break;
    case 'large_image':
    echo '<a class="js_shop_img shop-item-image'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" rel="large_image" width="'.$img["link_width"].'" height="'.$img["link_height"].'" style="background-image:url('.BASE_PATH.$img["link"].')" image_id="'.$img["id"].'">';
    break;
    default:
    echo '<a class="js_shop_img shop-item-image'.(empty($k) ? ' active' : '').'" href="'.BASE_PATH.$img["link"].'" style="background-image:url('.BASE_PATH_HREF.$img["link"].')" image_id="'.$img["id"].'">';
    break;
    }
    /* echo '<div class="item"><img src="'.BASE_PATH.$img["link"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="img-responsive shop_id_img"></div>'; */
    echo '<div class="item"><img src="'.BASE_PATH.$img["vs"]["medium"].'" alt="'.$img["alt"].'" title="'.$img["title"].'" image_id="'.$img["id"].'" class="my-foto shop_id_img" data-large="'.BASE_PATH.$img["link"].'"></div>';
    echo '</a>';
    $k++;
    }
  • 15 апреля 2018 г.
  • Спасибо большое , все заработало. Остались только 2 мелочи.

    1. Можно ли сделать так, чтобы при клике на изображение оно открывалось как раньше, и вот тут появлялся бы эффект лупы?
    2. Можно ли применить этот эффект только к отдельной категории или к нескольким категориям?
    • 16 апреля 2018 г.
    • 1. можно, в данном случае блокируется функционал ссылки, надо вводить или <span>Увеличить изображение</span> подо изображением или позиционированием выставлять куда надо, но тогда будет с перевывами работать, лучше под изображением.
      2. Можно отдельные шаблоны создать для категорий и выбирать какой нужен.

      И у тебя там ошибка в скрипте какая-то, у меня вкладка с сайтом сожрала 3,5 Гб оперативки.

Новости

  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • Новость. Сборка. Тарифы
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.
  • Сборка DIAFAN.CMS 7.0.1
  • 25 июля 2023 г.
  • Выпустили очередную сборку DIAFAN.CMS 7.0.1. Она уже доступна к установке.
Все новости

Блоги

  • Вышло обновление DIAFAN.CMS - cборка 7.1.1
  • 15.12.2023

  • В новой сборке DIAFAN.CMS 7.1.1 мы расширили функциональность баннеров, уделили внимание YML-фиду для Яндекс.Маркет, улучшили “Настройки шаблона”, оформили модуль лога действий и разработали “Заметки” для пользователей административной части сайта. Также проработали замечания и предложения наших пользователей, исправили несколько ошибок.

Читать блоги

Форум

Перейти на форум