Как сделать увеличение картинки при наведении мышкой?

[pitch Maxim 0]

Как сделать увеличение картинки при наведении мышкой на картинку товара когда просматриваешь каталог а не карточку, и что бы картинка увеличивалась как на http://www.templatemonster.com/ или http://www.istockphoto.com

[support 447]

Найти javascript пододящий и прикрутить.

На jquery есть подобные решения и прикручиваются довольно просто.

Да и на форуме была похожая тем про highslide в списке товара, только там при нажатии открывается большая картинка.

[pitch Maxim 0]

http://www.codylindley.com/blogstuff/js/jtip/ нашел вот такой тултип, должен подойти :) возьмешься за разработку? :)

и еще один на всякий случай http://plugins.learningjquery.com/cluetip/demo/

[leshka 0]

Саш,привет.

Может и правда подскажишь как прикрутить данный скрипт?

Так на много станет прикольнее:)

[pitch Maxim 0]

http://jqueryfordesigners.com/coda-popup-bubbles/

вот еще красивая реализация, еще есть вопрос - можно ли картинку подгружать через Ajax если позволяет скрипт?

[support 447]

Нужно просто взять js файлы, подключить их в /templates/шаблон/module/product_listing

и ещё нужно новую метку сделать для большой картинки, это например в /includes/classes/product.php добавить после:

				'PRODUCTS_IMAGE' => $this->productImage($array['products_image'], $image), 
[/code]

вот такую строку:
[code]
				'PRODUCTS_IMAGE_INFO' => $this->productImage($array['products_image'], 'info'), 

и затем метку {$module_data.PRODUCTS_IMAGE_INFO} использовать для большой картинки.

А всё остальное написано в документации к модулям, просто нужно сделать, что написано.

[support 447]

ajax используется не для этого.

Как это подгрузить картинки через ajax?!

Через ajax динамические данные грузятся какие-либо.

А картинки - это картинки, т.е. это уже известное название файла.

Сейчас попробую сделать увеличение это.

[support 447]

Вобщем, делается как я и писал выше, очень просто.

Добавляете метку PRODUCTS_IMAGE_INFO в /includes/classes/product.php как писал выше.

Нам же нужны данные средней картинки, которую выводить во всплывающем окне, вот эта метка и выведет картинку товара среднего размера.

Затем открываем шаблон списка товаров /templates/шаблон/module/product_listing/product_listing_list.html

и добавляем js код как в инструкции http://jqueryfordesigners.com/coda-popup-bubbles/:

{literal}
    <script src="jscript/jquery/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript">
    <!--
$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 500;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $('.trigger', this);
    var popup = $('.popup', this).css('opacity', 0);

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);

      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          top: -100,
          left: -33,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(function () {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    });
  });
});
    //-->
    </script>
{/literal}
[/code]


Теперь смотрим инструкцию на http://jqueryfordesigners.com/coda-popup-bubbles, какой код нужно использовать что б всплывающее окно было и теперь просто правим вывод картинки товара, добавляя class="trigger" т.е. меняем код:
[code]
{if $module_data.PRODUCTS_IMAGE}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /></a><br />{/if}
{$module_data.PRODUCTS_BUTTON_BUY_NOW}

на:

<div class="bubbleInfo">
  {if $module_data.PRODUCTS_IMAGE}<a href="{$module_data.PRODUCTS_LINK}"><img class="trigger" id="download"  src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /></a><br />{/if}
  {$module_data.PRODUCTS_BUTTON_BUY_NOW}
  <div class="popup">
    <img class="trigger" id="download"  src="{$module_data.PRODUCTS_IMAGE_INFO}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" />
  </div>
</div>
[/code]
при наведении на картинку всплывёт картинка среднего размера.
Это в самом просто варианте, можно сделать красивое окно, с рамками и прочим, но это уже мелочи.

[leshka 0]

А где именно эти файлы там скачивать?

http://jqueryfordesigners.com/coda-popup-bubbles/

[support 447]

Это я погорячился, там скачивать и не нужно, там весь js код сразу приведён.

[Mexxman 0]

Подскажите пожалуйста как тоже самое реализовать в Osc STS.Просто там таких файлов нет,а какие изменять без понятия.В какую папку нужно поместить файлы js?Какие файлы html править?Нигде нет ответа,а очень хочется применить эффект.Спасибо!

[support 447]

В osC VaM STS нужно править файл /product_info.php

А если в списке товара нужно сделать, тогда править /includes/modules/product_listing_col.php

JS файлы в любую папку можно кидать, главное потом путь правильно до этих файлов указать.

[mariolast 4]

А как большую а не среднюю картинку поставить?

И еще, как то оно некрасиво раздвигает границы с товаром, http://eroticdreams.com.ua/index.php?cat=17

[support 447]

Большую где поставить?!

Если на странице карточки товара, то в /includes/modules/product_info.php правьте:

			$image = DIR_WS_INFO_IMAGES.$product->data['products_image'];
[/code]

на:
[code]
			$image = DIR_WS_POPUP_IMAGES.$product->data['products_image'];

[Minipyh 0]

Александр, скажите пожалуйста, в версии 1.55 что-то изменилось? т.к. проделав вышеописанные действия картинка не появляется

[support 447]

А Вы моё сообщение читаете от августа месяца?!

Скорее всего, да, небольшие изменения были больше чем за год, но вроде ничего принципиального ведь, в основном всё так же.

Может просто не так что поправили.

[Minipyh 0]

значит буду смотреть ещё раз где ошибся  :-\ потом отпишусь

[support 447]

Удачи

[Minipyh 0]

в общем все мои мучения никакого результат не принесли, есть подозрение на то что, страница товаров использует форму/страницу сравнения и из-за этого ничего не получается.

Александр, если у вас будет время и желание, не могли бы вы попробовать сделать это на последней версии... Буду примного благодарен...

[support 447]

Нет, пардон.

Ведь все советы есть в теме.

Нужно ведь всего лишь добавить метку в /includes/classes/product.php что б получить большу картинку.

Затем в /templates/шаблон/module/product_listing/ просто подключать нужные JS файлы и всё.

На 100% готовый вариант приводить не буду.

[Minipyh 0]

  Цитата

... Нужно ведь всего лишь добавить метку в /includes/classes/product.php что б получить большу картинку.

Затем в /templates/шаблон/module/product_listing/ просто подключать нужные JS файлы и всё.

На 100% готовый вариант приводить не буду.

Александр, я не прошу чтоб вы мне давали готовый вариант, я всего лишь прошу чтоб вы попробовали выполнить это на последней версии и сказали: ДА - всё точно также или НЕТ - надо подправить/добавить/изменить...

Вот и всё...

[support 447]

Судя по коду в ответе номер 7, да, работает.

[Minipyh 0]

спасибо большое, оказывается трабла была из-за того что, я включал css в literal, а надо было включать до literal

[support 447]

Хорошо, что разобрались.

[enigmabob@mail.ru 0]

Доброе время суток всем! Пподскажите , может кто знает, почему данный скрипт может не работать в IE8, в Опере работает как часы.

версия магазина 1.65