Здравствуйте. Я создал панораму, используя HTML область и теги карты и JQuery. Он отлично работает на Chrome / Safari / IE и Edge, но, к сожалению, у меня нет результата на Firefox. После некоторого исследования проблемы, я думаю, это происходит из атрибута usemap, или я должен был добавить «#». Но когда я делаю это, я получаю сообщение об ошибке: Синтаксическая ошибка, нераспознанное выражение: map [name = # hotspots] Если кто-то может мне помочь, было бы неплохо
Вот код:
Ошибка в строке 105.
Заранее спасибо:)
function boxDisplay(title,link,PrdImage){
document.getElementById("box").style.display = "block";
document.getElementById("PrdImage").src = PrdImage;
document.getElementById("PrdTitle").innerHTML = title;
document.getElementById("LinkPrd").href = link;
}
function closeInfos(){
document.getElementById("box").style.display = "none";
}
(function($) {
$.fn.panorama360 = function(options){
this.each(function(){
var settings = {
start_position: 0,
image_width: 0,
image_height: 0,
mouse_wheel_multiplier: 20,
bind_resize: true
};
if(options) $.extend(settings, options);
var viewport = $(this);
var panoramaContainer = viewport.children('.panorama-container');
var viewportImage = panoramaContainer.children('img:first');
if(settings.image_width<=0 && settings.image_height<=0){
settings.image_width = parseInt(viewportImage.data("width"));
settings.image_height = parseInt(viewportImage.data("height"));
if (!(settings.image_width) || !(settings.image_height)) return;
}
var image_ratio = settings.image_height/settings.image_width;
var elem_height = parseInt(viewport.height());
var elem_width = parseInt(elem_height/image_ratio);
var image_map = viewportImage.attr('usemap');
var image_areas;
var second_shape;
var third_shape;
var fourth_shape;
var fifth_shape;
var isDragged = false;
var mouseXprev = 0;
var scrollDelta = 0;
viewportImage.height(elem_height).removeAttr("usemap").css("left",0).clone().css("left",elem_width+"px").insertAfter(viewportImage);
panoramaContainer.css({
'margin-left': '-'+settings.start_position+'px',
'width': (elem_width*2)+'px',
'height': (elem_height)+'px'
});
setInterval( function() {
if (isDragged) return false;
scrollDelta = scrollDelta * 0.98;
if (Math.abs(scrollDelta)<=2) scrollDelta = 0;
scrollView(panoramaContainer, elem_width, scrollDelta);
}, 1);
viewport.mousedown(function(e){
if (isDragged) return false;
$(this).addClass("grab");
isDragged = true;
mouseXprev = e.clientX;
scrollOffset = 0;
return false;
}).mouseup(function(){
$(this).removeClass("grab");
isDragged = false;
scrollDelta = scrollDelta * 0.45;
return false;
}).mousemove(function(e){
if (!isDragged) return false;
scrollDelta = parseInt((e.clientX - mouseXprev));
mouseXprev = e.clientX;
scrollView(panoramaContainer, elem_width, scrollDelta);
return false;
}).bind("mousewheel",function(e,distance){
var delta=Math.ceil(Math.sqrt(Math.abs(distance)));
delta=distance<0 ? -delta : delta;
scrollDelta = scrollDelta + delta * 5;
scrollView(panoramaContainer,elem_width,delta*settings.mouse_wheel_multiplier);
return false;
}).bind('contextmenu',stopEvent).bind('touchstart', function(e){
if (isDragged) return false;
isDragged = true;
mouseXprev = e.originalEvent.touches[0].pageX;
scrollOffset = 0;
}).bind('touchmove', function(e){
e.preventDefault();
if (!isDragged) return false;
var touch_x = e.originalEvent.touches[0].pageX;
scrollDelta = parseInt((touch_x - mouseXprev));
mouseXprev = touch_x;
scrollView(panoramaContainer, elem_width, scrollDelta);
}).bind('touchend', function(e){
isDragged = false;
scrollDelta = scrollDelta * 0.45;
});
if (image_map) {
$('map[name='+image_map+']').children('').each(function(){
var area_coord, area_fragment;
var area_coord_sec, area_fragment_sec;
var area_coord_third, area_fragment_third;
var area_coord_fourth, area_fragment_fourth;
var area_coord_fifth, area_fragment_fifth;
switch ($(this).attr("class").toLowerCase()){
case 'area':
area_coord = $(this).attr("coords").split(",");
area_fragment = $(".area");
area_fragment.css({opacity:0.2});
panoramaContainer.append(area_fragment.clone().data("stitch",1).data("coords",area_coord));
break;
case 'area_sec':
area_coord_sec = $(this).attr("coords").split(",");
area_fragment_sec = $(".area_sec");
area_fragment_sec.css({opacity:0.2});
panoramaContainer.append(area_fragment_sec.clone().data("second",1).data("coords",area_coord_sec));
break;
case 'area_third':
area_coord_third = $(this).attr("coords").split(",");
area_fragment_third = $(".area_third");
area_fragment_third.css({opacity:0.2});
panoramaContainer.append(area_fragment_third.clone().data("third",1).data("coords",area_coord_third));
break;
case 'area_fourth':
area_coord_fourth = $(this).attr("coords").split(",");
area_fragment_fourth = $(".area_fourth");
area_fragment_fourth.css({opacity:0.2});
panoramaContainer.append(area_fragment_fourth.clone().data("fourth",1).data("coords",area_coord_fourth));
break;
case 'area_fifth':
area_coord_fifth = $(this).attr("coords").split(",");
area_fragment_fifth = $(".area_fifth");
area_fragment_fifth.css({opacity:0.2});
panoramaContainer.append(area_fragment_fifth.clone().data("fifth",1).data("coords",area_coord_fifth));
break;
}
}).remove();
image_areas = panoramaContainer.children(".area");
second_shape = panoramaContainer.children(".area_sec");
third_shape = panoramaContainer.children(".area_third");
fourth_shape = panoramaContainer.children(".area_fourth");
fifth_shape = panoramaContainer.children(".area_fifth");
repositionHotspots(image_areas,settings.image_height,elem_height,elem_width);
repositionHotspots_sec(second_shape,settings.image_height,elem_height,elem_width);
repositionHotspots_third(third_shape,settings.image_height,elem_height,elem_width);
repositionHotspots_fourth(fourth_shape,settings.image_height,elem_height,elem_width);
repositionHotspots_fifth(fifth_shape,settings.image_height,elem_height,elem_width);
}
});
function stopEvent(e){
}
function scrollView(panoramaContainer,elem_width,delta){
var newMarginLeft = parseInt(panoramaContainer.css('marginLeft'))+delta;
if (newMarginLeft > 0) newMarginLeft = -elem_width;
if (newMarginLeft < -elem_width) newMarginLeft = 0;
panoramaContainer.css('marginLeft', newMarginLeft+'px');
}
function repositionHotspots(areas,image_height,elem_height,elem_width){
var percent = elem_height/image_height;
areas.each(function(){
area_coord = $(this).data("coords");
stitch = $(this).data("stitch");
switch (stitch){
case 1:
$(this).css({
'left': (area_coord[0]*percent)+"px",
'top': (area_coord[1]*percent)+"px",
'width': ((area_coord[2]-area_coord[0])*percent)+"px",
'height': ((area_coord[3]-area_coord[1])*percent)+"px"
});
break;
case 2:
$(this).css({
'left': (elem_width+parseInt(area_coord[0])*percent)+"px",
'top': (area_coord[1]*percent)+"px",
'width': ((area_coord[2]-area_coord[0])*percent)+"px",
'height': ((area_coord[3]-area_coord[1])*percent)+"px"
});
break;
}
});
}
function repositionHotspots_sec(second_shape,image_height,elem_height,elem_width){
var percent = elem_height/image_height;
second_shape.each(function(){
area_coord_sec = $(this).data("coords");
second = $(this).data("second");
switch (second){
case 1:
$(this).css({
'left': (area_coord_sec[0]*percent)+"px",
'top': (area_coord_sec[1]*percent)+"px",
'width': ((area_coord_sec[2]-area_coord_sec[0])*percent)+"px",
'height': ((area_coord_sec[3]-area_coord_sec[1])*percent)+"px"
});
break;
case 2:
$(this).css({
'left': (elem_width+parseInt(area_coord_sec[0])*percent)+"px",
'top': (area_coord_sec[1]*percent)+"px",
'width': ((area_coord_sec[2]-area_coord_sec[0])*percent)+"px",
'height': ((area_coord_sec[3]-area_coord_sec[1])*percent)+"px"
});
break;
}
});
}
}
function repositionHotspots_third(third_shape,image_height,elem_height,elem_width){
var percent = elem_height/image_height;
third_shape.each(function(){
area_coord_third = $(this).data("coords");
third = $(this).data("third");
switch (third){
case 1:
$(this).css({
'left': (area_coord_third[0]*percent)+"px",
'top': (area_coord_third[1]*percent)+"px",
'width': ((area_coord_third[2]-area_coord_third[0])*percent)+"px",
'height': ((area_coord_third[3]-area_coord_third[1])*percent)+"px"
});
break;
case 2:
$(this).css({
'left': (elem_width+parseInt(area_coord_third[0])*percent)+"px",
'top': (area_coord_third[1]*percent)+"px",
'width': ((area_coord_third[2]-area_coord_third[0])*percent)+"px",
'height': ((area_coord_third[3]-area_coord_third[1])*percent)+"px"
});
break;
}
});
}
function repositionHotspots_fourth(fourth_shape,image_height,elem_height,elem_width){
var percent = elem_height/image_height;
fourth_shape.each(function(){
area_coord_fourth = $(this).data("coords");
fourth = $(this).data("fourth");
switch (fourth){
case 1:
$(this).css({
'left': (area_coord_fourth[0]*percent)+"px",
'top': (area_coord_fourth[1]*percent)+"px",
'width': ((area_coord_fourth[2]-area_coord_fourth[0])*percent)+"px",
'height': ((area_coord_fourth[3]-area_coord_fourth[1])*percent)+"px"
});
break;
case 2:
$(this).css({
'left': (elem_width+parseInt(area_coord_fourth[0])*percent)+"px",
'top': (area_coord_fourth[1]*percent)+"px",
'width': ((area_coord_fourth[2]-area_coord_fourth[0])*percent)+"px",
'height': ((area_coord_fourth[3]-area_coord_fourth[1])*percent)+"px"
});
break;
}
});
}
function repositionHotspots_fifth(fifth_shape,image_height,elem_height,elem_width){
var percent = elem_height/image_height;
fifth_shape.each(function(){
area_coord_fifth = $(this).data("coords");
fifth = $(this).data("fifth");
switch (fifth){
case 1:
$(this).css({
'left': (area_coord_fifth[0]*percent)+"px",
'top': (area_coord_fifth[1]*percent)+"px",
'width': ((area_coord_fifth[2]-area_coord_fifth[0])*percent)+"px",
'height': ((area_coord_fifth[3]-area_coord_fifth[1])*percent)+"px"
});
break;
case 2:
$(this).css({
'left': (elem_width+parseInt(area_coord_fifth[0])*percent)+"px",
'top': (area_coord_fifth[1]*percent)+"px",
'width': ((area_coord_fifth[2]-area_coord_fifth[0])*percent)+"px",
'height': ((area_coord_fifth[3]-area_coord_fifth[1])*percent)+"px"
});
break;
}
});
}
})(jQuery);
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
/* layout */
.panorama,.panorama-view{width:1000px;height:500px;overflow:hidden;border:solid 1px black;margin:0 auto;top:100px;}
.panorama,.panorama-container{position:relative}
.panorama-container img{height:500px;position:absolute;top:0}
.panorama .info,.panorama-view .area, .area_sec, .area_third, .area_fourth, .area_fifth{position:absolute;display:block}
.panorama .info{right:10px;bottom:10px}
/* style */
.panorama-view .area, .area_sec, .area_third, .area_fourth, .area_fifth{opacity:0.2;background-color:blue;cursor:pointer;overflow:hidden;text-indent:-9999px;}
.panorama-view .area:hover, .area_sec:hover, .area_third:hover, .area_fourth:hover, .area_fifth:hover{opacity:0.4!important;}
.panorama-view img{user-select:none;-o-user-select:none;-moz-user-select:none;-webkit-user-select:none}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,img{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
html,body{width:100%;height:100%}
body{background-color:#FFFFFF}
.round{border-radius:6px;-moz-border-radius:6px}
#box {border: 5px solid rebeccapurple;background-color: lightgray;padding: 35px 15px 5px 15px;width: 150px;height: 190px;display: none;position: absolute;bottom: 20px;right: 20px;}
#ClosePrdInfos {position: absolute;right: 5px;top: 5px;cursor: pointer;}
#PrdImage{max-width: 100%;}
.BlocPrd{text-align: center;padding-top: 30px;}
