Хотелось бы такое сделать как на картинке это возможно 
заранее спасибо!
когда наводишь мышку))на картинку
Вопрос по поводу всплывающей подсказки
Started by
lex270987
, Nov 17 2013 15:30
-
This topic is locked
9 replies to this topic
#2
Posted 17 November 2013 - 16:11
Это сделано с помощью jQuery Tiptop плагина
https://www.google.r...q=jquery tiptop
PS Не стоит писать каждый раз в заголовке "Добрый вечер" 
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!
Отключайте проверку лицензий как можно скорее!
— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.
#4
Posted 17 November 2013 - 16:22
Как и любой другой плагин jQuery
Вы пробовали смотреть демо плагина? читать статьи (например с habrahabr) ?
К сожалению, подобные сторонние плагины не относятся к JBZoo.
Вы пробовали смотреть демо плагина? читать статьи (например с habrahabr) ?
К сожалению, подобные сторонние плагины не относятся к JBZoo.
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!
Отключайте проверку лицензий как можно скорее!
— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.
#6
Posted 17 November 2013 - 16:29
Для этого в плагин нужно передать соответствующие поля через $this->renderPosition('POSITION_NAME');
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!
Отключайте проверку лицензий как можно скорее!
— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.
#7
Posted 17 November 2013 - 16:38
((((бесполезно я все равно в этом мало понимаю.Я умею тока код вставлять))
/*
* jQuery TipTop v 1.0
* http://www.audit-seo.ru
*
* Copyright 2013, Lebedev Eugeny
* Free to use
*
* February 2013
*/
(function( $ ) {
settings = {
id: 'TipTopPopap',
movement: false,
theme: 'white',
delay: 300,
pos: 'bottom',
maxWidth: 330,
shiftTop: 20,
shiftLeft: 15
};
var intervalID;
var TypeContent = 'content';
methods = {
init : function( params ) {
var options = $.extend({}, settings, params);
return this.each(function(){
if(options.movement) {
$(this).bind('mousemove', function(e) {
contentInfo = methods._GetInfo(this);
if(contentInfo) {
methods._show(this, options, contentInfo, e);
}
}).bind('mouseleave',function(e){
methods._close(options.id);
});
} else {
$(this).bind('mouseenter',function(e){
contentInfo = methods._GetInfo(this);
if(contentInfo) {
methods._show(this, options, contentInfo, e);
}
}).bind('mouseleave',function(e){
intervalID = setTimeout(function(){$("div#"+options.id).remove();}, options.delay);
});
}
});
},
_GetInfo : function (e) {
thisTitle = $(e).attr('title');
thisContentId = $(e).attr('data_info');
if(thisContentId) {
return $('#'+thisContentId).html();
} else {
TypeContent = 'title';
return thisTitle;
}
},
_show : function (e, options, data, m) {
id = options.id
clearInterval(intervalID);
if(!$("div#"+options.id).lenght) {
divPopap = $('<div id="'+options.id+'" class="TipTop"></div>').addClass(options.theme).bind('mouseenter',function(e){
clearInterval(intervalID);
}).bind('mouseleave',function(e){
methods._close(id);
}).dblclick(function(e) {
methods._close(id);
});
$('body').append(divPopap);
}
if(TypeContent == 'title' || options.movement === true) {
pp = $('#'+id).html(data);
} else {
pp = $('#'+id).html(data+'<div id="TipTopClose"></div>');
}
if(pp.width() > options.maxWidth) {
pp = $('#'+id).css({width: options.maxWidth+'px'});
}
$('#TipTopClose').click(function() {
methods._close(id);
});
offset = $(e).offset();
Elwidth = $(e).outerWidth();
Elheight = $(e).outerHeight();
PopapWidth = pp.outerWidth();
PopapHeight = pp.outerHeight();
PosVertical = 0;
PosGorizontal = 0;
screenScroll = $(window).scrollTop();
screenScrollLeft = $(window).scrollLeft();
screenWidth = $("body").innerWidth();
screenHeight = $(window).height();
switch(options.pos) {
case "cursor": {
if(m.pageY+options.shiftTop+PopapHeight > screenScroll+screenHeight) {
shift_top = m.pageY+options.shiftTop+PopapHeight-screenScroll-screenHeight;
PosVertical = m.pageY+options.shiftTop-shift_top-20;
} else {
PosVertical = m.pageY+options.shiftTop;
}
if(m.pageX+options.shiftLeft+PopapWidth > screenScrollLeft+screenWidth) {
shift = m.pageX+options.shiftLeft+PopapWidth-screenScrollLeft-screenWidth;
PosGorizontal = m.pageX+options.shiftLeft-shift-10;
} else {
PosGorizontal = m.pageX+options.shiftLeft;
}
break;
}
case "top": {
if(offset.top-options.shiftTop-PopapHeight < screenScroll) {
PosVertical = offset.top+options.shiftTop+Elheight;
} else {
PosVertical = offset.top-options.shiftTop-PopapHeight;
}
if(offset.left+(Elwidth/2)-(PopapWidth/2)+PopapWidth > screenScrollLeft+screenWidth) {
shift_left = offset.left+(Elwidth/2)-(PopapWidth/2)+PopapWidth-screenScrollLeft-screenWidth;
PosGorizontal = offset.left+(Elwidth/2)-(PopapWidth/2)-shift_left-10;
} else {
PosGorizontal = offset.left+(Elwidth/2)-(PopapWidth/2);
}
if(PosGorizontal <= screenScrollLeft) {
PosGorizontal = screenScrollLeft+10;
}
break;
}
case "bottom": {
if(offset.top+options.shiftTop+Elheight+PopapHeight < screenScroll+screenHeight) {
PosVertical = offset.top+options.shiftTop+Elheight;
} else {
PosVertical = offset.top-options.shiftTop-PopapHeight;
}
if(offset.left+(Elwidth/2)-(PopapWidth/2)+PopapWidth > screenScrollLeft+screenWidth) {
shift_left = offset.left+(Elwidth/2)-(PopapWidth/2)+PopapWidth-screenScrollLeft-screenWidth;
PosGorizontal = offset.left+(Elwidth/2)-(PopapWidth/2)-shift_left-10;
} else {
PosGorizontal = offset.left+(Elwidth/2)-(PopapWidth/2);
}
if(PosGorizontal <= screenScrollLeft) {
PosGorizontal = screenScrollLeft+10;
}
break;
}
case "right": {
if(offset.top+options.shiftTop < screenScroll) {
PosVertical = screenScroll+10;
} else {
PosVertical = offset.top+options.shiftTop;
}
if(PosVertical+PopapHeight > screenScroll+screenHeight) {
shift = PosVertical+PopapHeight-screenScroll-screenHeight+10;
PosVertical = PosVertical-shift-10;
}
if(offset.left+Elwidth+options.shiftLeft+PopapWidth > screenScrollLeft+screenWidth) {
PosGorizontal = offset.left-PopapWidth-options.shiftLeft;
} else {
PosGorizontal = offset.left+Elwidth+options.shiftLeft;
}
break;
}
case "left": {
if(offset.top+options.shiftTop < screenScroll) {
PosVertical = screenScroll+10;
} else {
PosVertical = offset.top+options.shiftTop;
}
if(PosVertical+PopapHeight > screenScroll+screenHeight) {
shift = PosVertical+PopapHeight-screenScroll-screenHeight+10;
PosVertical = PosVertical-shift-10;
}
if(offset.left-PopapWidth-options.shiftLeft <= screenScrollLeft) {
PosGorizontal = offset.left+Elwidth+options.shiftLeft;
} else {
PosGorizontal = offset.left-PopapWidth-options.shiftLeft;
}
break;
}
default: {
if(m.pageY+options.shiftTop+PopapHeight > screenScroll+screenHeight) {
shift_top = m.pageY+options.shiftTop+PopapHeight-screenScroll-screenHeight;
PosVertical = m.pageY+options.shiftTop-shift_top-20;
} else {
PosVertical = m.pageY+options.shiftTop;
}
if(m.pageX+options.shiftLeft+PopapWidth > screenScrollLeft+screenWidth) {
PosGorizontal = m.pageX-options.shiftLeft-PopapWidth;
} else {
PosGorizontal = m.pageX+options.shiftLeft;
}
break;
}
}
$('#'+id).css({
top: PosVertical,
left: PosGorizontal
}).show();
},
_close : function(id) {
clearInterval(intervalID);
$("div#"+id).remove();
}
};
$.fn.TipTop = function( method ) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.TipTop' );
}
};
})(jQuery);
вот сюда что надо вставить чтобы вывести характеритики продукта??
http://cap24.ru/tipt...query.TipTop.js
Edited by Sliapy, 17 November 2013 - 16:56.
Используйте кнопку код
#8
Posted 17 November 2013 - 17:14
В сам плагин ничего вставлять не нужно. Нужно соответствующим образом изменить HTML-разметку шаблона товара (\media\zoo\applications\jbuniversal\templates\catalog\renderer\item\product\teaser.php)
Подключить скрипт плагина и затем инициализировать его.
Это требует не очень глубоких знаний HTML и javascript.
Если не уверены в своих силах, попробуйте обратиться в коммерческий раздел - http://forum.jbzoo.c...oznagrazhdenie/
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]
#9
Posted 17 November 2013 - 17:22
понятно спасибо!не просто хотелось бы конечно это сделать!но я сам не смогу((
хорошо бы было если бы эту функцию добавили в следующую сборку.
Классно же наводишь на товар и там всплывающее окошко с описание или характеристиками.
#10
Posted 17 November 2013 - 20:23
Можете оставить предложение в соответствующем разделе - http://forum.jbzoo.c...ozheniya-plany/
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]
