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

  • 17 Ответов
  • 4425 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Помогите сделать такую штуку как увеличение изображения при наведении курсора вот пример:
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.

  • *****
  • 664
  • 69
  • (с)
Код: php
	jQuery(document).ready(function(){
                 jQuery('div.magnify').find('img').addClass('small');
});
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

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




Первую строчку поменял на
Код
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.

  • *****
  • 664
  • 69
  • (с)
Попробуйте весь код заменить на
Код: php
$(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});
}
}
});
});
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

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

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

Uncaught SyntaxError: Unexpected string

*

Siber

  • ***
  • 151
  • 9
$('.large').css('background','url("" + $(".small").attr("src") + "") no-repeat');

*

Grigory S.

  • *****
  • 664
  • 69
  • (с)
Упс, вот :)
Код: php
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});
}
}
});
});
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

Работает, спасибо, буду еще дорабатывать нюансы.

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

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

*

istraweb

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

UPD: Всё, разобрался сам. Пришлось перекроить шаблон вывода галереи zoo и втиснуть в него бесплатный elevate zoom (http://www.elevateweb.co.uk/image-zoom/examples)
Привет! Не подскажите, как вы реализовали для full?
Рисую UiKit и графику. Создам сайт под ключ.


*

istraweb

  • **
  • 13
  • -2
http://www.jacklmoore.com/zoom/
Мне бы инструкцию реализации в Zoo, а то мало разбираюсь в коде, буду признательно благодарен!
« Последнее редактирование: 10.05.2017, 16:12:39 от istraweb »
Рисую UiKit и графику. Создам сайт под ключ.

*

AlekVolsk

  • ********
  • 6301
  • 336
это просто скрипт, подключаете на фронте css/js, для выводимого изображения присваиваете класс, например .zoomImg и дописываете скрипт:
Код: javascript
jQuery(document).ready(function($)
{
  $('img.zoomImg').zoom({magnify:1});
});
о параметрах функции zoom() читайте на сайте разработчика скрипта

*

AlekVolsk

  • ********
  • 6301
  • 336
человеку дал наводку. а мне минус в ответ: "не дал четкого ответа на вопрос"
да с какого перепугу вам кто-то должен вообще давать четкие ответы? я четких ответов вообще никогда не даю: вам указали направление - идите ножками сами, на своих плечах вас никто не понесет, слабо почитать доки к скрипту? нефиг вообще тогда лезть в разработку, не для средних умов тема-то...

*

arma

  • ******
  • 1318
  • 63
Этих доморощенных студий со школьниками пруд пруди развелось. Научились картинки менять в шаблонах и тексты переписывать и то не всегда ("помогите убрать надпись с сайта" - типичный вопрос) и вот уже: "Да у нас лучшая web-студия, да любой сайт для вас..."  Так ещё и не довольны, что не откусили, в рот не положили и не разжевали за них. Бесит. istraweb, постыдились бы.
 

*

Taatshi

  • *****
  • 4779
  • 452
Эт штоль вот эта студия? http://istrawebdesign.ru Истра веб дизайн? Не умеют скрипы прикручивать?))) Очередная школота.

Оставлю пост для поиска - вдруг кто уровнем студии заинтересуется...  ^-^
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3  /  ОТЗЫВЫ 
Минимальная ставка за платные услуги 1000 рэ Связь: telegram - Taatshi, почта - Taatshi на яндексе.


*

umbabaraumba

  • *******
  • 2441
  • 152
  • если помог можете поставить +
Эт штоль вот эта студия? http://istrawebdesign.ru Истра веб дизайн? Не умеют скрипы прикручивать?))) Очередная школота.

Оставлю пост для поиска - вдруг кто уровнем студии заинтересуется...  ^-^
Смешной адрес у этой "студии" в контактах
Московская область, Истринский район, п.Глебовский, микр ПФ, вл.9
 ;D
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно