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

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Лупа к изображению
« : Апреля 12, 2012, 01:07:38 pm »
Прикрутил лупу отсюда http://pcvector.net/scripts/image-effects/7-effekt-lupy-na-izobrazhenii-zoomy.html

На денвере все работает, на сервере не хочет :(

Сделал так
в файл css/тема/stylesheet/stylesheet.css добавил
/*Лупа*/
.zoomy{
    position: absolute;
    display: none;
    background-repeat: no-repeat;
    -webkit-box-shadow: 3px 3px 10px #000;
    -moz-box-shadow: 3px 3px 10px #000;
    border: 0;
    cursor: url(../image/blank.gif), move;
    line-height: 100px;
    text-align: center;
    background-image: url(../image/loading.gif);
    background-position: center;
    background-color: #fff;
    z-index: 1000;
}
.zoomy span{
    display: block;
    margin: 10px auto;
    background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5)));
    background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%);

}


.zoomy img{
    opacity: 0;
    filter:alpha(opacity=0);
}
.zoomy a{
    color: #333;
    text-decoration: none;
}

.broke a{
    display: block;
    height: 100%;
    width: 100%;
   
}

#brokeZoomy{
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0px;
    left: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background: #fff url(../image/broke.gif) center no-repeat;
}



Залил картинки для лупы в папку  css/тема/image/

залил jquery.zoomy0.5.min.js в core/js

в файле css/тема/theme/head.tpl.html

перед </head> добавил

<script type="text/javascript" src="./core/js/jquery.zoomy0.5.min.js."></script>
и в  css/тема/theme/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>
поменял class="thickbox" на class="zoom"
<a href="./products_pictures/{if $p_default}{$p_default}-B.jpg{else}{$product_info[9]}{/if}" class="zoom" 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>и в самом низу вставил
<script type="text/javascript">
    $(function(){   
        $('.zoom').zoomy();
    });
    </script>

Где ошибся?

Куда копать? :)
Студия web дизайна http://lugobor.ru

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #1 : Апреля 12, 2012, 01:11:19 pm »
« Последнее редактирование: Апреля 14, 2012, 07:32:13 am от lugobor »
Студия web дизайна http://lugobor.ru

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #2 : Апреля 12, 2012, 01:22:40 pm »
Reload the page to get source for: http://lugobor31.cc.ua/core/js/jquery.zoomy0.5.min.js

сверть права на фаил выставте такиеже как и на jquery.nivo.slider.pack.js

оба 644
Студия web дизайна http://lugobor.ru

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #3 : Апреля 12, 2012, 01:36:11 pm »
 ;D Ура!!! заработало!!! Спасибо!!!
Студия web дизайна http://lugobor.ru

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #4 : Апреля 12, 2012, 02:55:44 pm »
Собрал все воедино во вложении

[вложение удалено администратором]
Студия web дизайна http://lugobor.ru

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #5 : Апреля 18, 2012, 04:50:12 pm »
Лупа конфликтует с перелетом в корзину

http://dudkov.ua/product/unikub-2/

Как их помирить?
Студия web дизайна http://lugobor.ru

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #6 : Апреля 18, 2012, 05:42:13 pm »
Поправил, не помогло...
Студия web дизайна http://lugobor.ru

Оффлайн sanyok

  • Пользователь
  • **
  • Сообщений: 68
    • Просмотр профиля
    • Шаблоны для UnitCMS & LegoSP
Re: Лупа к изображению
« Ответ #7 : Апреля 19, 2012, 08:02:35 am »
Поправил, не помогло...

ни вижу блок с id='module_cart'. 
http://legosp-themes.ru - Шаблоны для UnitCMS & LegoSP - updated
http://www.freelance.ru/users/sanyok/ - Портфолио

WM: Z102477779616, R342915609011 Yandex: 4100138529471

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #8 : Апреля 19, 2012, 09:12:10 am »
Поправил, не помогло...

Тут такая же ситуация
в категории полет нормальный http://sofi.cc.ua/catalog/dlya-domashnego-otdyha/
а в подробно улетает где-то снизу http://sofi.cc.ua/product/pizhama-p-201-lupoline-10/
Студия web дизайна http://lugobor.ru

Оффлайн sanyok

  • Пользователь
  • **
  • Сообщений: 68
    • Просмотр профиля
    • Шаблоны для UnitCMS & LegoSP
Re: Лупа к изображению
« Ответ #9 : Апреля 19, 2012, 09:42:10 am »
Поправил, не помогло...

Тут такая же ситуация
в категории полет нормальный http://sofi.cc.ua/catalog/dlya-domashnego-otdyha/
а в подробно улетает где-то снизу http://sofi.cc.ua/product/pizhama-p-201-lupoline-10/

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

WM: Z102477779616, R342915609011 Yandex: 4100138529471

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Re: Лупа к изображению
« Ответ #10 : Апреля 19, 2012, 10:24:59 am »
это и за position в классе .zoomy

Спасибо за наводку. Решил не заморачиваться, поменял местами фото и инфу. Полет удовлетворительный!
Студия web дизайна http://lugobor.ru

nictboom

  • Гость
Re: Лупа к изображению
« Ответ #11 : Апреля 20, 2012, 01:29:57 am »
это и за position...
может даже это, <a id="adpdp..." class="zoom" ... style="position: relative; .....>

Оффлайн Al_Uk

  • Спец
  • ***
  • Сообщений: 247
    • Просмотр профиля
Re: Лупа к изображению
« Ответ #12 : Апреля 21, 2012, 09:38:22 pm »
Лупа конфликтует с перелетом в корзину

http://dudkov.ua/product/unikub-2/

Как их помирить?

странно, через Хром если зайти все равно в корзину летит где то внизу товар..

и странная лупа получилась. На дополнительных фотографиях не работает.

Хорошая лупа и реализация дополнительные картинки сделаны ТУТ
http://www.focalprice.com/IP0359B/MultiPorts_Power_Station_and_Speaker_for_iPad12_iPhone_3G4_Black.html

Кто может так сделать?
цена вопроса для Lego4.6  и 5,02
в личку пожалуйста.

модуль лупы на ваше усмотрение..

Нужно:
1.чтобы дополнительные картинки выстраивались под главной
2. перелистывались дополнительные картинки стрелочками побокам
3. при наведении (без щелчка) на дополнительную картинку она становилась  главной картинкой
4. при наведении на главную картинку справа появлялась лупа
5. не конфликтовал с корзиной и PrettyPhoto (или какой там модуль в 4.6 и 5,02)
6. желательно чтоб код был компактный и не грузил намного сильнее хост.

собственно работать должно точно так же как тут
http://www.focalprice.com/IP0359B/MultiPorts_Power_Station_and_Speaker_for_iPad12_iPhone_3G4_Black.html
« Последнее редактирование: Апреля 21, 2012, 09:42:31 pm от Al_Uk »