Автор Тема: Лупа к картинке  (Прочитано 18970 раз)

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Лупа к картинке
« : Октября 23, 2013, 01:21:00 pm »
Здравствуйте, как сделать лупу к картирке, когда наводят мышкой на картинку она не только больше становится, но лупойм и увеличивалась кортинка больше вплоть до швов....

Оффлайн Devil

  • Пользователь
  • **
  • Сообщений: 23
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #1 : Октября 23, 2013, 01:47:58 pm »
ищите jquery плагин

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #2 : Октября 23, 2013, 03:32:28 pm »
Лупа как типа навели на картинку увидили увелечение как токавая сейчас в нынешнее время потеряла свою актуальность виду того что эра сенсаров (где клацают пальцами а не водят мышкой) пошла, на ipad и iphone вообще нет действия "при наведении" по крайне мере в родном браузере

Да мне это и нужно... jqery нашел, но как прикрутить? Или есть у кого какие варианты ?

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #3 : Октября 23, 2013, 07:47:17 pm »
А я не нашел :(

Скачал jqzoom. Установил. Раскидал по папкам, установил в  product_detailed.tpl.html

Вместо

<a href="./products_pictures/{if $p_default}{$p_default}-B.jpg{else}{$product_info[9]}{/if}" class="thickbox" id="adpdp{$product_info[11]}"><img src="./products_pictures/{if $p_default}{$p_default}.jpg{else}{$product_info[5]}{/if}" id="dp{$product_info[11]}" style="margin-bottom: 3px;" alt="{$product_info[1]}" /></a><br />
      <a href="./products_pictures/{if $p_default}{$p_default}-B.jpg{else}{$product_info[9]}{/if}" rel="example_group" id="adp{$product_info[11]}"><span style="font-size: 11px;">{$smarty.const.ENLARGE_PICTURE}</span></a>
{else}
      <img src="./products_pictures/nophoto.jpg" id="dp{$product_info[11]}" style="margin-bottom: 3px;width: {$smarty.const.RESIZE_NORMAL_X}px; height: {$smarty.const.RESIZE_NORMAL_Y}px" alt="{$product_info[1]}" />

Установил:
<a href="./products_pictures/{$product_info[9]}" class="jqzoom"><img src="./products_pictures/{$product_info[5]}" style="margin-bottom: 3px;" alt="{$product_info[1]}" /></a><br />
          <a href="./products_pictures/{$product_info[9]}" class="thickbox"><span style="font-size: 11px;">{$smarty.const.ENLARGE_PICTURE}</span></a>
{else}

          <img src="./products_pictures/nophoto.jpg" id="dp{$product_info[11]}" style="margin-bottom: 3px;width: {$smarty.const.RESIZE_NORMAL_X}px; height: {$smarty.const.RESIZE_NORMAL_Y}px" alt="{$product_info[1]}" />

Но при этома маленькая фотография в карточке товара, становится под лупу. Это вроде разобрал все гуд.
Но когда нажать кнопку "увеличить", окно с картинкой открывается в новом пустом окне, где только одна картинка.

В head.tpl.html прописал:
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">

<script type="text/javascript">

$(function() {
        var options =
            {
                zoomWidth: 100,
                zoomHeight: 100,
xOffset: 50,
        zoomType:'reverse',
                showEffect:'fadein',
                hideEffect:'fadeout',
                fadeoutSpeed: 'fast',
                title :true
            }
            $(".jqzoom").jqzoom(options);

         });

</script>

Помогите разобраться

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #4 : Октября 23, 2013, 08:01:44 pm »
Пишет loading zoom при наводе мышкой на картинку....

Увеличить нажимаешь, все равно в отдельном окне грузится.

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #5 : Октября 23, 2013, 08:07:14 pm »
Это конечно Важный момент!
Но есть еще одно но...

Когда я редактирую отображение области,
$(function() {
        var options =
            {
                zoomWidth: 100,
                zoomHeight: 100,
xOffset: 50,
        zoomType:'reverse',
                showEffect:'fadein',
                hideEffect:'fadeout',
                fadeoutSpeed: 'fast',
                title :true
            }
            $(".jqzoom").jqzoom(options);

         });

И значения 100 меняю на 200 к примеру, то картинка на которую навожу тоже увеличивается квадратом.
А как сделать так, чтобы область просмотра картинки оставалась 100 на 100, а отображаемое окно было к примеру 500 на 500 при это все удачно отображалось.

Пожалуйста помогите с двумя вопросами моими. Очень помощь нужна.

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #6 : Октября 23, 2013, 08:34:17 pm »
Может скрипт такой лажовый ? А как можно прикрутить http://ruseller.com/lessons.php?rub=32&id=166

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #7 : Октября 23, 2013, 08:45:22 pm »
Кстати...может поможешь...

из head удаляю весь код
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">
{literal}
<script type="text/javascript">

$(function() {
        var options =
            {
                zoomWidth: 100,
                zoomHeight: 100,
xOffset: 50,
        zoomType:'reverse',
                showEffect:'fadein',
                hideEffect:'fadeout',
                fadeoutSpeed: 'fast',
                title :true
            }
            $(".jqzoom").jqzoom(options);

         });

</script>

В итоге Увеличение кнопки работает, а лупа нет

Оффлайн maa1988

  • Спец
  • ***
  • Сообщений: 246
    • Просмотр профиля
Re: Лупа к картинке
« Ответ #8 : Октября 23, 2013, 10:09:01 pm »
Установил другой скрипт

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

Как только это убираешь из head.tpl фотография увеличивается. Ставишь... фотография открывается на новой странице...

Оффлайн sanyok

  • Пользователь
  • **
  • Сообщений: 68
    • Просмотр профиля
    • Шаблоны для UnitCMS & LegoSP
Re: Лупа к картинке
« Ответ #9 : Октября 26, 2013, 09:34:12 am »
Лупа как типа навели на картинку увидили увелечение как токавая сейчас в нынешнее время потеряла свою актуальность виду того что эра сенсаров (где клацают пальцами а не водят мышкой) пошла, на ipad и iphone вообще нет действия "при наведении" по крайне мере в родном браузере

Да мне это и нужно... jqery нашел, но как прикрутить? Или есть у кого какие варианты ?

написал в личку проверьте
http://legosp-themes.ru - Шаблоны для UnitCMS & LegoSP - updated
http://www.freelance.ru/users/sanyok/ - Портфолио

WM: Z102477779616, R342915609011 Yandex: 4100138529471