Как Добавить В Опции К Товарам - Наведение = Картинка

Тема в разделе "Модули и дополнения", создана пользователем Serg-24, 12 окт 2016.

Статус темы:
Закрыта.
  1. TopicStarter Overlay
    Offline

    Serg-24 Пользователь

    Сообщения:
    27
    Симпатии:
    12
    Репутация:
    0
    Есть в опциях вывод маленькой картинки к товару. Картинки размером 36 х 36 пикселей - это слишком мало, что бы разглядеть что вообще на картинке изображено.
    Есть модули - позволяющие при наведении на (такие) картинки (что ставятся в опции товара), при наведении мыши = происходило (бы) увеличение (вывод картинки оригинала), что бы разглядеть лучше?
    Кто может использовал такие функции - добавлял их на сайт?
     
  2. Offline

    admin Команда форума Администратор

    Сообщения:
    2.359
    Симпатии:
    80.546
    Репутация:
    175
    Добрый день. Да конечно. Использовали и не раз. Есть много различных модулей. И можно сделать самому, например:
    в CSS:
    Код:
    .hovergallery img{
    -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
    -moz-transform:scale(0.8); /*Mozilla scale version*/
    -o-transform:scale(0.8); /*Opera scale version*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla duration version*/
    -o-transition-duration: 0.5s; /*Opera duration version*/
    opacity: 0.7; /*initial opacity of images*/
    margin: 0 10px 5px 0; /*margin between images*/
    }
    
    .hovergallery img:hover{
    -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
    -moz-transform:scale(1.1); /*Mozilla scale version*/
    -o-transform:scale(1.1); /*Opera scale version*/
    box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
    opacity: 1;
    }
    применение к фото:
    Код:
    <div class="hovergallery">
    <img src="Ссылка на картинку" />
    </div> 
    Вариант 2:
    Размер изображения Вы устанавливаете в контроллере, а в шаблоне Вы ограничиваете изображение в размере и прописываете для тега класс "zoomi".
    Пример:
    Код:
    <img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />
    Так же не забудьте добавить библиотеку:
    Код:
    <script type="text/javascript" src="catalog/view/javascript/zoomi.js"></script>
    вот ссылка на js http://www.sunsean.com/zoomi/
     
    Последние данные очков репутации:
    Serg-24: 1 Очко (Благо дарю Вас - здорово расписали!!!) 13 окт 2016
  3. TopicStarter Overlay
    Offline

    Serg-24 Пользователь

    Сообщения:
    27
    Симпатии:
    12
    Репутация:
    0
    Да, именно как - на js http://www.sunsean.com/zoomi/
    Подскажите, картинку, что показывает увеличенное изображение - можно будет в стилях поднять (при появлении большего размера картинки) над маленькими (с которых берем увеличение) в css файле и сделать, что бы позиция показа была фиксированной? Имею в виду - наводим на малую картинку - появляется увеличенное изображение в определенном (за ранее месте) - наводим на другую (маленькую карт) - она появляется на месте предидущей (не правее не левее)?

    Спасибо! Буду пробовать Ваши варианты.
     
  4. TopicStarter Overlay
    Offline

    Serg-24 Пользователь

    Сообщения:
    27
    Симпатии:
    12
    Репутация:
    0
    По первому варианту:
    - код прописывается в css файле работающего шаблона (для меня это: /catalog/view/theme/newstore/stylesheet) css файл: stylesheet.css

    - А вот куда прописать (это), по какому пути лежит (найти) этот файл:
    <div class="hovergallery">
    <img src="Ссылка на картинку" />
    </div>

    Не знаю. Помогите...
     
  5. TopicStarter Overlay
    Offline

    Serg-24 Пользователь

    Сообщения:
    27
    Симпатии:
    12
    Репутация:
    0
    Уважаемый Админ, Вы дали ссылку: вот ссылка на js http://www.sunsean.com/zoomi/ - только сейчас по ней нашел что нужно - это функция клик по картинке (открывается) и второй клик (по картинке) картинка закрывается (сворачивается).

    На странице ссылки есть Download Zoomi - при нажатии на которую появляется только такой код:

    // zoomi - A zoom for images ~ Sean Catchpole - Version 0.9
    (function($){

    $.fn.zoomi = function() {
    $(this).filter("img").each(function(){
    if(!this.z) {
    $(this).zoom1().mouseover(function(){$(this).zoom2().show();});
    $(this.z).mouseout(function(){$(this).hide();}); }
    });
    return this;
    }

    $.fn.zoom1 = function() {
    $(this).each(function(){
    var e = this;
    $(e).css({'position':'relative','z-index':'8'}).after('<img class="'+e.className+'">');
    e.z = e.nextSibling;
    $(e.z).removeClass("zoomi").addClass("zoom2").attr("src",e.alt || e.src)
    .css({'position':'absolute','z-index':'10'});
    $(e.z).hide();
    });
    return this;
    }

    $.fn.zoom2 = function() {
    var s = [];
    this.each(function(){
    var e = this;
    if(!e.z) e = $(e).zoom1()[0]; s.push(e.z);
    if(!e.z.complete) return;
    if(!e.z.width) { $(e.z).show(); e.z.width=e.z.width; $(e.z).hide(); }
    $(e.z).css({left:$(e).offsetLeft()-(e.z.width-e.scrollWidth)/2+'px',
    top:$(e).offsetTop()-(e.z.height-e.scrollHeight)/2+'px'});
    });
    return this.pushStack(s);
    }

    $.fn.offsetLeft = function() {
    var e = this[0];
    if(!e.offsetParent) return e.offsetLeft;
    return e.offsetLeft + $(e.offsetParent).offsetLeft(); }

    $.fn.offsetTop = function() {
    var e = this[0];
    if(!e.offsetParent) return e.offsetTop;
    return e.offsetTop + $(e.offsetParent).offsetTop(); }

    $(function(){ $('img.zoomi').zoomi(); });

    })(jQuery);

    Как сей код применить? Куда прописать (в какой файл) и что еще нужно будет сделать что бы заработало?
    Вы мудрый (Гуру) - подскажите.
     
  6. Offline

    admin Команда форума Администратор

    Сообщения:
    2.359
    Симпатии:
    80.546
    Репутация:
    175
    Прикрепил файл, его распакуйте и закиньте по пути catalog/view/javascript/. далее в catalog\view\theme\ваша тема\template\product\product.tpl пропишите как указано выше вариант 2.
     

    Вложения:

    • zoomi.zip
      Размер файла:
      721 байт
      Просмотров:
      3
  7. TopicStarter Overlay
    Offline

    Serg-24 Пользователь

    Сообщения:
    27
    Симпатии:
    12
    Репутация:
    0
    За файл zoomi.js - спасибо!
    Все прописал как нужно - но не работает почему то.
    Прилагаю картинки - по ним будет видно что не так.
    Прошу помощи - помогите. возможно пути не правильные или строки:
    1) <script type="text/javascript" src="catalog/view/javascript/zoomi.js"></script>
    и
    2) <img class="zoomi" src="<?php echo $value['image']; ?>" width="40" height="40" />

    Нужно ставить в "особое место" - или что-то строкой № 2 - нужно заместить?

    [​IMG]

    Кто знает (что же не так) - просьба подсказать.
     
  8. Offline

    admin Команда форума Администратор

    Сообщения:
    2.359
    Симпатии:
    80.546
    Репутация:
    175
    вот пример. что было добавлено:
    <script type="text/javascript" src="catalog/view/javascript/zoomi.js"></script>
    <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="zoomi" data-toggle="tooltip" title="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" />
     

    Вложения:

    • product.zip
      Размер файла:
      9,9 КБ
      Просмотров:
      2
  9. Offline

    admin Команда форума Администратор

    Сообщения:
    2.359
    Симпатии:
    80.546
    Репутация:
    175
  10. TopicStarter Overlay
    Offline

    Serg-24 Пользователь

    Сообщения:
    27
    Симпатии:
    12
    Репутация:
    0
    Cпасибо Админ! Я поставил шаблон NewStore - с автором шаблона переписываюсь.. В последнее время он только принимает мои послания по Skype и что-то не спешит отвечать, я настойчив (мне не куда деваться, коль взял шаблон - то делай его) и все у меня получится. Есть тупики, как сей час - не ставится подсказка в виде увеличения картинки при наведении курсора. Перепробовал все Ваши (и свои варианты) - не выходит не чего. Написал автору шаблона - задал сей вопрос ему - жду ответа (как соловей лета).
    По видимому - мешает установленная опция (где она стоит что бы её отключить - я не знаю) - это всплывающая подсказка при наведении - которая на черном фоне (в настройках шаблона её вообще нет) появляется текст который забит в файл как Title
    Вот картинка что есть:
    [​IMG]
    - Нужно удалить всплывающую подсказку - тогда встанут настройки при наведении на опцию = всплывающая картинка? Я правильно полагаю?
     
  11. Offline

    admin Команда форума Администратор

    Сообщения:
    2.359
    Симпатии:
    80.546
    Репутация:
    175
    напишите в ЛС и я помогу вам настроить
     
    Последние данные очков репутации:
    Serg-24: 1 Очко (Мгновенная помощь + решение вопросов + (даже) файлы для установки и решения проблем.) 14 окт 2016
Статус темы:
Закрыта.