Форум русской поддержки Joomla!® CMS
03.12.2016, 17:39:16 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Увеличение изображение при наведении курсора в тизер выводе

 (Прочитано 3501 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Crackyn
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« : 08.04.2014, 20:00:10 »

Помогите сделать такую штуку как увеличение изображения при наведении курсора вот пример:
http://www.alibaba.com/product-detail/2014-Wholesale-assorted-floating-charms-for_1665116655.html?tracelog=hp_gs_pic2

Только данная функция должна работать в тизер выводе каталога.
Нашел плагин "magiczoom"
 www.magictoolbox.com/magiczoom/modules/joomla/ пытался его прикрутить не получаеться.

Нашел пример кода http://codepen.io/anon/pen/uFikx
пытался и его прикрутить часть в файле: my_site\media\zoo\applications\product\templates\my_templates\renderer\item\teaser.php

Код:
<?php if ($this->checkPosition('media')) : ?>
<div class="pos-media <?php echo 'media-'.$view->params->get('template.items_media_alignment'); ?>">
<div class="magnify"><div class="large"></div>
<?php echo $this->renderPosition('media'); ?>
</div>
</div>
<?php endif; ?>

CSS и js добавил как полагается в index.php

Появилась ошибка в JS
 
Код:
Uncaught TypeError: Property '$' of object [object Object] is not a function hover.js:1 (anonymous function)

А вот класс к изображению не знаю как назначить:
Код:
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>

</div>



Может кто то знает способ как сделать данную функцию
Записан
Grigory S.
Завсегдатай
*****

Репутация: +68/-0
Offline Offline

Пол: Мужской
Сообщений: 685


(с)


« Ответ #1 : 08.04.2014, 20:51:38 »

Код
	jQuery(document).ready(function(){
                jQuery('div.magnify').find('img').addClass('small');
});
 
Записан
Crackyn
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #2 : 08.04.2014, 21:40:31 »

Спасибо класс добавлен но теперь другая проблема




Первую строчку поменял на
Код:
jQuery(document).ready(function(){

ошибка вылезла в этой строчке
Код:
$(".large").css("background","url('" + $(".small").attr("src") + "') no-repeat");

Привожу весь код

Код:
jQuery(document).ready(function(){

var native_width = 0;
var native_height = 0;
  $(".large").css("background","url('" + $(".small").attr("src") + "') no-repeat");

//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the HTML. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");

//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;

//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";

//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates

//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})


Что исправить.
Записан
Grigory S.
Завсегдатай
*****

Репутация: +68/-0
Offline Offline

Пол: Мужской
Сообщений: 685


(с)


« Ответ #3 : 08.04.2014, 21:53:29 »

Попробуйте весь код заменить на
Код
$(document).ready(function(){
   $('.magnify').find('img').addClass('small');
var native_width = 0;
var native_height = 0;
   $('.large').css('background','url('' + $('.small').attr('src') + '') no-repeat');
$('.magnify').mousemove(function(e){
if(!native_width && !native_height){
var image_object = new Image();
image_object.src = $('.small').attr('src');
native_width = image_object.width;
native_height = image_object.height;
}
else{
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0){
$('.large').fadeIn(100);
}
else{
$('.large').fadeOut(100);
}
if($('.large').is(':visible')){
var rx = Math.round(mx/$('.small').width()*native_width - $('.large').width()/2)*-1;
var ry = Math.round(my/$('.small').height()*native_height - $('.large').height()/2)*-1;
var bgp = rx + 'px ' + ry + 'px';
var px = mx - $('.large').width()/2;
var py = my - $('.large').height()/2;
$('.large').css({left: px, top: py, backgroundPosition: bgp});
}
}
});
});
 
Записан
Crackyn
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #4 : 08.04.2014, 22:07:46 »

То же самое в этом месте:

Код:
$('.large').css('background','url('' + $('.small').attr('src') + '') no-repeat');

Uncaught SyntaxError: Unexpected string
Записан
Siber
Осваиваюсь на форуме
***

Репутация: +9/-0
Offline Offline

Сообщений: 158


« Ответ #5 : 08.04.2014, 22:16:11 »

$('.large').css('background','url("" + $(".small").attr("src") + "") no-repeat');
Записан
Grigory S.
Завсегдатай
*****

Репутация: +68/-0
Offline Offline

Пол: Мужской
Сообщений: 685


(с)


« Ответ #6 : 08.04.2014, 22:42:15 »

Упс, вот Azn
Код
jQuery(document).ready(function(){
       jQuery('.magnify').find('img').addClass('small');
var native_width = 0;
var native_height = 0;
jQuery(".large").css("background","url('" + jQuery(".small").attr("src") + "') no-repeat");
jQuery(".magnify").mousemove(function(e){
if(!native_width && !native_height){
var image_object = new Image();
image_object.src = jQuery(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
}
else{
var magnify_offset = jQuery(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
if(mx < jQuery(this).width() && my < jQuery(this).height() && mx > 0 && my > 0){
jQuery(".large").fadeIn(100);
}
else{
jQuery(".large").fadeOut(100);
}
if(jQuery(".large").is(":visible")){
var rx = Math.round(mx/jQuery(".small").width()*native_width - jQuery(".large").width()/2)*-1;
var ry = Math.round(my/jQuery(".small").height()*native_height - jQuery(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - jQuery(".large").width()/2;
var py = my - jQuery(".large").height()/2;
jQuery(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
});
});
 
Записан
Crackyn
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #7 : 09.04.2014, 00:49:06 »

Работает, спасибо, буду еще дорабатывать нюансы.
Записан
eliseev_s
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 1


« Ответ #8 : 17.10.2015, 15:35:53 »

Может, откапываю старую тему, но у меня задача: как реализовать экранную лупу для нескольких (произвольное количество, от 1 до где-то 10) изображений в каталоге zoo, шаблоне full?

UPD: Всё, разобрался сам. Пришлось перекроить шаблон вывода галереи zoo и втиснуть в него бесплатный elevate zoom (http://www.elevateweb.co.uk/image-zoom/examples)
« Последнее редактирование: 19.10.2015, 06:23:04 от eliseev_s » Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet