Legosp Forum
Shop-Script "Legosp" => Разработка => Тема начата: maa1988 от Октября 23, 2013, 01:21:00 pm
-
Здравствуйте, как сделать лупу к картирке, когда наводят мышкой на картинку она не только больше становится, но лупойм и увеличивалась кортинка больше вплоть до швов....
-
ищите jquery плагин
-
Лупа как типа навели на картинку увидили увелечение как токавая сейчас в нынешнее время потеряла свою актуальность виду того что эра сенсаров (где клацают пальцами а не водят мышкой) пошла, на ipad и iphone вообще нет действия "при наведении" по крайне мере в родном браузере
Да мне это и нужно... jqery нашел, но как прикрутить? Или есть у кого какие варианты ?
-
А я не нашел :(
Скачал 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>
Помогите разобраться
-
Пишет loading zoom при наводе мышкой на картинку....
Увеличить нажимаешь, все равно в отдельном окне грузится.
-
Это конечно Важный момент!
Но есть еще одно но...
Когда я редактирую отображение области,
$(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 при это все удачно отображалось.
Пожалуйста помогите с двумя вопросами моими. Очень помощь нужна.
-
Может скрипт такой лажовый ? А как можно прикрутить http://ruseller.com/lessons.php?rub=32&id=166
-
Кстати...может поможешь...
из 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>
В итоге Увеличение кнопки работает, а лупа нет
-
Установил другой скрипт
<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 фотография увеличивается. Ставишь... фотография открывается на новой странице...
-
Лупа как типа навели на картинку увидили увелечение как токавая сейчас в нынешнее время потеряла свою актуальность виду того что эра сенсаров (где клацают пальцами а не водят мышкой) пошла, на ipad и iphone вообще нет действия "при наведении" по крайне мере в родном браузере
Да мне это и нужно... jqery нашел, но как прикрутить? Или есть у кого какие варианты ?
написал в личку проверьте