1/* 2 3jQuery Image Mapper v2.8 4 5Pin mapper for custom images. 6 7Copyright (c) 2014 Br0 (shindiristudio.com) 8 9Project site: http://codecanyon.net/ 10Project demo: http://shindiristudio.com/imgmapper 11 12*/ 13 14(function($){//zasticen scope 15 16 $.fn.imageMapper = function(options) { 17 18 /** 19 *Default plugin options 20 */ 21 var defaults = { 22 itemOpenStyle: 'click',//click,hover 23 itemDesignStyle: 'fluid',//fluid or responsive 24 pinScalingCoefficient: 0, 25 categories:false, 26 showAllCategory: true, 27 allCategoryText: 'All', 28 advancedPinOptions: false, 29 pinClickAction:'none',//link, content, lightboxImage, lightboxIframe, contentBelow, none 30 pinHoverAction:'content',//content, none 31 lightboxGallery: false, //enable galery on opened pin lightboxes 32 mapOverlay: false, 33 blurEffect: false, 34 slideAnimation: false 35 36 }; 37 38 /** 39 * Settings that are used throughout the plugin 40 */ 41 var settings = $.extend( {}, defaults, options); 42 43 if (settings.pinScalingCoefficient>0) 44 settings.pinScalingCoefficient = 1; 45 else if (settings.pinScalingCoefficient<=0) 46 pinScalingCoefficient = 0; 47 48 /** 49 * Global plugin variables 50 */ 51 var map_original_width; 52 var map_original_height; 53 54 var clicked; 55 var tab_clicked; 56 57 var map_width; 58 var map_height; 59 60 var pinType1 = 'imapper-pin-type-1', pinType2 = 'imapper-pin-type-2', pinType3 = 'imapper-pin-type-3', pinType4 = 'imapper-pin-type-4', pinType5 = 'imapper-pin-type-5', pinTypeCustom = 'imapper-pin-type-custom'; 61 var parent_width; 62 63 var contentWrapperOld; 64 var contentOld; 65 var contentHeaderOld; 66 var contentTextOld; 67 var contentTabOld; 68 var contentAdditionalOld; 69 70 var width; 71 var height; 72 73 var cHeight; 74 var cWidth; 75 76 var designStyle; 77 78 var multiplier; 79 var multiplierArea; 80 81 var pluginHref = window.location.href; 82 var pluginUrl = pluginHref.substring(0, pluginHref.lastIndexOf('/')+1 ); 83 var my_debug_12=false; 84 var my_use_new_code_responsive=true; 85 /** 86 * this is the plugin container 87 */ 88 return this.each( function() { 89 90 var id = $(this).attr('id').substring(11, $(this).attr('id').indexOf('-')); 91 92 93 94 imapperInit(id, settings); 95 96 97 width = $(this).find('.imapper-content').width(); 98 height = $(this).find('.imapper-content').height(); 99 if(my_debug_12){ 100 console.log('Imapper content width',{w:width,h:height}); 101 } 102 103 104 map_width = $(this).find('#imapper' + id + '-map-image').width(); 105 map_height = $(this).find('#imapper' + id + '-map-image').height(); 106 107 108 var my_w_12=$('#imapper' + id + '-map-image').data('w'); 109 var my_h_12=$('#imapper' + id + '-map-image').data('h'); 110 //console.log('My w',{w:my_w_12,h:my_h_12}); 111 var map_original_size = imapperGetOriginalSize('#imapper' + id + '-map-image'); 112 if((my_w_12!=''&&my_h_12!='')){ 113 map_original_width=parseInt(my_w_12); 114 map_original_height=parseInt(my_h_12); 115 }else { 116 map_original_width = map_original_size[0]; 117 map_original_height = map_original_size[1]; 118 } 119 var parent_width = ($(this).parent().width() < map_original_width) ? $(this).parent().width() : map_original_width; 120 121 if((my_use_new_code_responsive)&&(settings.pinScalingCoefficient==0)){ 122 if ($(window).width() <= 600 && settings.itemDesignStyle == 'responsive'){ 123 //var parent_width = ($(this).parent().width() < map_original_width) ? $(this).parent().width() : map_original_width; 124 var my_c_12=map_original_width/map_original_height; 125 if(my_debug_12){ 126 console.log('Coeff',{my_c_12:my_c_12}); 127 } 128 //map_original_width=600; 129 130 // If width larger than height 131 if(my_c_12>1){ 132 //var my_c12_12=map_height/map_original_width; 133 //if(map_original_width>600){ 134 var c=map_original_width/600; 135 136 map_original_width=600; 137 138 map_original_height=map_original_width/my_c_12; 139 140 //} 141 }else { 142 //if(map_original_width>600){ 143 var c=map_original_width/600; 144 map_original_width=600; 145 map_original_height=map_original_width/my_c_12; 146 //map_original_height=map_original_width*c; 147 //else map_original_height=map_original_width/c; 148 149 //} 150 } 151 //map_original_width=parseInt($(".imapper"+id+"-pin-content-wrapper").data('width'))*2; 152 //map_original_height=parseInt($(".imapper"+id+"-pin-content-wrapper").data('height'))*2; 153 154 /*if(map_original_width>600){ 155 map_original_width=parseInt($(".imapper"+id+"-pin-content-wrapper").data('width')); 156 map_original_height=parseInt($(".imapper"+id+"-pin-content-wrapper").data('height')); 157 158 } 159 if(map_width>map_original_width){ 160 map_original_width=map_width; 161 } 162 if(map_height>map_original_height){ 163 map_original_height=map_height; 164 }*/
165 /*if (settings.pinScalingCoefficient!=0) { 166 multiplier = settings.pinScalingCoefficient; 167 168 } 169 else { 170 multiplier = multiplierArea; 171 } 172 }*/ 173 parent_width = $(this).parent().width(); 174 175 }else { 176 /*var my_c_12=map_original_width/map_original_height; 177 if(my_debug_12){ 178 console.log('Coeff',{my_c_12:my_c_12}); 179 } 180 //map_original_width=600; 181 182 if(my_c_12>1){ 183 map_original_width=$(this).parent().width(); 184 map_original_height=map_original_width/my_c_12; 185 }else { 186 map_original_width=$(this).parent().width(); 187 188 map_original_height=map_original_width/my_c_12; 189 190 191 } 192 //parent_width = $(this).parent().width(); 193 parent_width = ($(this).parent().width() < map_original_width) ? $(this).parent().width() : map_original_width; 194 */ 195 } 196 } 197 198 199 if(my_debug_12){ 200 console.log('Imapper content width',{w:map_original_width,h:map_original_height}); 201 } 202 var my_mult_12_pins=1; 203 204 205 multiplierArea = parent_width / map_original_width; 206 if((my_use_new_code_responsive)&&(settings.pinScalingCoefficient==0)){ 207 if ($(window).width() > 600 && settings.itemDesignStyle == 'responsive'){ 208 multiplierArea=1; 209 } 210 } 211 if (settings.pinScalingCoefficient!=0) { 212 multiplier = settings.pinScalingCoefficient; 213 214 } 215 else { 216 multiplier = multiplierArea; 217 } 218 /*if((my_use_new_code_responsive)&&(settings.pinScalingCoefficient==0)){ 219 if(map_height>map_width){ 220 multiplierArea = map_height / map_original_height; 221 222 } 223 }*/ 224 225 cHeight = new Array(); 226 cWidth = new Array(); 227 228 designStyle = settings.itemDesignStyle; 229 230 clicked = new Array(); 231 tab_clicked = new Array(); 232 233 234 contentWrapperOld = new Array(); 235 contentOld = new Array(); 236 contentHeaderOld = new Array(); 237 contentTextOld = new Array(); 238 contentTabOld = new Array(); 239 contentAdditionalOld = new Array(); 240 241 $(this).css('width', parent_width); 242 243 /* 244 * Set pin classes depending of selected pin or custom pin to all active pins 245 */ 246 $('.imapper' + id + '-pin').each( function() { 247 var pinId = getPinId($(this)); 248 249 if ($(this).attr('src') !== undefined ) { 250 if ($(this).attr('src').indexOf('images/icons/1/') >= 0) { 251 // Glowing pin 252 $(this).addClass(pinType1); 253 } else if ($(this).attr('src').indexOf('images/icons/2/') >= 0) { 254 // Sliding pin 255 $(this).addClass(pinType2); 256 } else if ($(this).attr('src').indexOf('images/icons/3/') >= 0) { 257 // Shadow pin 258 $(this).addClass(pinType3); 259 } else if ($(this).attr('src').indexOf('images/icons/4/') >= 0) { 260 // Default map pin 261 $(this).addClass(pinType4); 262 } else if ($(this).attr('src').indexOf('images/icons/5/') >= 0) { 263 // Pin with icon 264 $(this).addClass(pinType5); 265 } else { 266 // Pin with tabs, area pin and custom pin 267 $(this).addClass(pinTypeCustom); 268 } 269 } 270 271 272 273 clicked[pinId] = 0; 274 tab_clicked[pinId] = 1; 275 276 277 var img_width = $(this).width(); 278 var img_height = $(this).height(); 279 280 281 var radius = parseInt($(this).siblings('.imapper-content').css('border-bottom-left-radius')) / 2 + 1; 282 283 284 contentTabOld[pinId] = new Array(); 285 contentAdditionalOld[pinId] = new Array(); 286 287 288 var tNumber = 1; 289 var tabValueNumber = $(this).siblings('.imapper-value-tab-number'); 290 if (tabValueNumber.length > 0) 291 tNumber = parseInt(tabValueNumber.html()); 292 293 cHeight[pinId] = ($(window).width() <= 600 && designStyle == 'responsive') ? map_original_height - ((tNumber >
293 1) ? tNumber : 0) * (75 - radius) : height; 294 cWidth[pinId] = ($(window).width() <= 600 && designStyle == 'responsive') ? map_original_width - ((tNumber > 1) ? tNumber : 0) * (75 - radius) : width; 295 //console.log('CH',{cH:cHeight,cW:cWidth}); 296 if ($(this).hasClass(pinType4)) 297 $(this).addClass('pin-mini-style'); 298 else 299 $(this).addClass('pin-style'); 300 301 302 if ($(this).hasClass(pinType2) || $(this).hasClass(pinType1)) 303 $(this).parent().find('.imapper-content').wrapInner('<div class="imapper-content-inner" style="width: ' + width + 'px; height: ' + height + 'px;" />'); 304 305 306 if ($(this).hasClass(pinType5)) 307 { var my_w_12=0; 308 $(this).parent().find('.imapper-pin-icon').each(function(i,v){ 309 var w_12_12=$(v).width(); 310 if(w_12_12<my_w_12)my_w_12=w_12_12; 311 //if(window.console){ 312 //console.log("width",my_w_12); 313 //} 314 }); 315 if(my_w_12==0)my_w_12=16; 316 $(this).parent().find('.imapper-pin-icon').css('left', -((my_w_12 / 2) - 1) + 'px'); 317 } 318 319 320 if (!($(this).hasClass(pinType1) || $(this).hasClass(pinType2) || $(this).hasClass(pinType3) || $(this).hasClass(pinType4) || $(this).hasClass(pinType5))) 321 { 322 $(this).css('top', -$(this).height() + 'px'); 323 $(this).css('left', -$(this).width()/2 + 'px'); 324 } 325 }); 326 327 //mouseenter function for pins 328 $('.imapper' + id + '-pin').mouseenter(function() { 329 330 331 332 if ($(this).hasClass(pinType1)) 333 { 334 if (!$(this).is('span')) { 335 var position = $(this).attr('src').indexOf('/images/'); 336 pluginUrl = $(this).attr('src').substring(0, position); 337 $(this).attr('src', pluginUrl + '/images/icons/1/1-1.png'); 338 } 339 } 340 else if ($(this).hasClass(pinType3)) 341 { 342 343 $(this).animate({ 344 marginTop: -10, 345 'padding-bottom': 10 346 }, 347 { 348 duration: 200, 349 queue: false 350 }); 351 352 $(this).parent().find('.imapper-pin-shadow').animate({ 353 marginTop: -80, 354 marginLeft: -46 355 }, 356 { 357 duration: 200, 358 queue: false 359 }); 360 } 361 else if ($(this).hasClass(pinTypeCustom)) { 362 var hoverPin = $(this).data('imapper-hover-pin'); 363 var standardPin = $(this).attr('src'); 364 $(this).data('imapper-standard-pin',$(this).attr('src')); 365 if (hoverPin!==undefined) 366 $(this).attr('src', hoverPin); 367 } 368 }); 369 370 //mouseout function for pins - this and previous function are used only for pins with animated shadow and when icon changes on hover 371 $('.imapper' + id + '-pin').mouseleave(function() { 372 373 if ($(this).hasClass(pinType1)) 374 { 375 if (!$(this).is('span')) { 376 var position = $(this).attr('src').indexOf('/images/'); 377 pluginUrl = $(this).attr('src').substring(0, position); 378 $(this).attr('src', pluginUrl + '/images/icons/1/1.png'); 379 } 380 } 381 else if ($(this).hasClass(pinType3)) 382 { 383 384 $(this).animate({ 385 marginTop: 0, 386 'padding-bottom': 0 387 }, 388 { 389 duration: 200, 390 queue: false 391 }); 392 393 $(this).parent().find('.imapper-pin-shadow').animate({ 394 marginTop: -75, 395 marginLeft: -41 396 }, 397 { 398 duration: 200, 399 queue: false 400 }); 401 } 402 else if ($(this).hasClass(pinTypeCustom)) { 403 var standardPin = $(this).data('imapper-standard-pin'); 404 405 if (standardPin!==undefined) 406 $(this).attr('src', standardPin); 407 } 408 409 }); 410 411 /* 412 * Set pin content position for each pin 413 * 414 * See classes for pins defined on line 243 415 */ 416 $('.imapper' + id + '-pin-content-wrapper').each(function() { 417 var position = $(this).parent().data('open-position'); 418 var img_width = $(this).parent().find('.imapper' + id + '-pin').width(); 419 var img_height = $(this).parent().find('.imapper' + id + '-pin').height(); 420 var borderColor = $(this).data('border-color'); 421 422 /* 423 * All but Sliding pin 424 * 425 * width defined above for .imapper-content 426 */ 427 if (!($(this).siblings('.imapper' + id + '-pin').hasClass(pinType2))) 428 { 429 if(my_debug_12){ 430 console.log('Imapper content width',{w:width,h:height}); 431 } 432 if (position == 'top') 433 { 434 $(this).find('.imapper-content').css('position', 'absolute'); 435 $(this).find('.imapper-content').css('right', '0px'); 436 437 $(this).find('.arrow-top-border').css('top', height + 1 + 'px'); 438 $(this).find('.arrow-top-border').css('left', width/2 - 11 + 'px'); 439 $(this).find('.arrow-top-border').css('border-top-color', borderColor); 440 441 $(this).css('width', width + 'px'); 442 $(this).css('height', height + img_height/4 + 35 + 'px'); 443 $(this).css('right', width/2 + 'px'); 444 $(this).css('bottom', height + img_height + 20 + 'px');//bilo height + img_height + 40 445 446 if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType4)) 447 { 448 // Map pin 449 $(this).css('right', width/2 - 4 + 'px'); 450 $(this).css('bottom', height + 50 + 'px'); 451 } 452 else if ($(this).siblings('.imapper' + id + '-pin').hasClass('imapper-area-pin')) { 453 // Area pin 454 $(this).css('bottom', height + img_height + 35 + 'px'); 455 } 456 457 $(this).find('.imapper-arrow').addClass('arrow-down'); 458 $(this).find('.imapper-arrow').css('top', height + 'px'); 459 } 460 else if (position == 'bottom') 461 { 462 $(this).find('.imapper-content').css('position', 'absolute'); 463 $(this).find('.imapper-content').css('bottom', '0px'); 464 $(this).find('.imapper-content').css('right', '0px'); 465 466 $(this).find('.arrow-bottom-border').css('top', img_height/4 + 24 + 'px'); 467 $(this).find('.arrow-bottom-border').css('left', width/2 - 11 + 'px'); 468 $(this).find('.arrow-bottom-border').css('border-bottom-color', borderColor); 469 470 $(this).css('width', width + 'px'); 471 $(this).css('height', height + img_height/4 + 40 + 'px'); 472 $(this).css('right', width/2 + 'px'); 473 $(this).css('bottom', 25 + 'px');//img_height/4 - 5 474 475 if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType4)) 476 { 477 // Map pin 478 $(this).css('right', width/2 - 4 + 'px'); 479 $(this).css('bottom', '0px'); 480 } 481 482 $(this).find('.imapper-arrow').addClass('arrow-up'); 483 var color = $(this).find('.imapper-arrow').css('border-top-color'); 484 $(this).find('.imapper-arrow').css('border-top-color', 'transparent'); 485 $(this).find('.imapper-arrow').css('border-bottom-color', color); 486 $(this).find('.imapper-arrow').css('top', img_height/4+25+ 'px');//bilo img_height/4+25 487 //$(this).find('.imapper-arrow').css('top', + 'px'); 488 } 489 else if (position == 'right') 490 { 491 $(this).find('.imapper-content').css('position', 'absolute'); 492 $(this).find('.imapper-content').css('right', '0px'); 493 $(this).find('.imapper-content').css('bottom', '0px'); 494 495 $(this).find('.arrow-right-border').css('top', height/2 - 11 + 'px'); 496 $(this).find('.arrow-right-border').css('left', img_width/4 + 24 + 'px'); 497 $(this).find('.arrow-right-border').css('border-right-color', borderColor); 498 499 $(this).css('width', width + img_width/4 + 40 + 'px'); 500 $(this).css('height', height + 'px'); 501 $(this).css('right', '0px'); 502 $(this).css('bottom', height/2 + img_height/2 + 'px'); 503 504 if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType4)) 505 { // Map pin 506 $(this).css('bottom', height/2 + 10 + 'px'); 507 } 508 else if ($(this).siblings('.imapper' + id + '-pin').hasClass('imapper-area-pin')) { 509 // Area pin 510 $(this).css('right', '-15px'); 511 } 512 513 $(this).find('.imapper-arrow').addClass('arrow-left'); 514 var color = $(this).find('.imapper-arrow').css('border-top-color'); 515 $(this).find('.imapper-arrow').css('border-top-color', 'transparent'); 516 $(this).find('.imapper-arrow').css('border-right-color', color); 517 $(this).find('.imapper-arrow').css('top', height/2 - 10 + 'px'); 518 $(this).find('.imapper-arrow').css('left', img_width/4 + 25 + 'px'); 519 } 520 else if (position == 'left') 521 { 522 $(this).find('.imapper-content').css('position', 'absolute'); 523 $(this).find('.imapper-content').css('bottom', '0px'); 524 525 $(this).find('.arrow-left-border').css('top', height/2 - 11 + 'px'); 526 $(this).find('.arrow-left-border').css('left', width + 'px'); 527 $(this).find('.arrow-left-border').css('border-left-color', borderColor); 528 529 /* 530 * Fix only for left position 531 * Set width as the real width of the .imapper-content-wrapper + arrow 532 * Than set right to its width + half image size as .imapper-content-wrapper is alligner left of parent which have width 0 533 * @singe 2.8 534 */ 535 536 $(this).css('width', width + 30 + 'px'); 537 $(this).css('height', height + 'px'); 538 $(this).css('right', width + 30 + img_width/2 + 'px'); 539 $(this).css('bottom', height/2 + img_height/2 + 'px'); 540 541 if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType4)) 542 { 543 // Map pin need more space 544 $(this).css('right', width + img_width + 20 + 'px'); 545 $(this).css('bottom', height/2 + 10 + 'px'); 546 } 547 else if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType1)) { 548 // Glowing pin 549 $(this).css('right', width + img_width - 22 + 'px'); 550 } 551 552 $(this).find('.imapper-arrow').addClass('arrow-right'); 553 var color = $(this).find('.imapper-arrow').css('border-top-color'); 554 $(this).find('.imapper-arrow').css('border-top-color', 'transparent'); 555 $(this).find('.imapper-arrow').css('border-left-color', color); 556 $(this).find('.imapper-arrow').css('top', height/2 - 10 + 'px'); 557 $(this).find('.imapper-arrow').css('left', width + 'px'); 558 } 559 } 560 /* 561 * Sliding pin only 562 */ 563 else if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType2)) 564 { 565 $(this).find('.imapper-content-header').css('padding', '0px 10px 0px 10px'); 566 if (position == 'right') 567 { 568 $(this).find('.imapper-content').css('position', 'absolute'); 569 $(this).find('.imapper-content').css('left', '19px'); 570 $(this).find('.imapper-content').css('border-top-left-radius', '0px'); 571 $(this).find('.imapper-content').css('border-bottom-left-radius', '0px'); 572 $(this).find('.imapper-content').css('border-left', 'none'); 573 574 $(this).css('width', width + 20 + 'px'); 575 $(this).css('height', height + 'px'); 576 $(this).css('right', '-2px'); 577 $(this).css('bottom', '75px'); 578 579 $(this).find('.imapper-content').css('width', '0px'); 580 581 $(this).find('.triangle-right-border').css('border-top-color', borderColor); 582 $(this).find('.triangle-right-border').css('border-bottom-color', borderColor); 583 $(this).find('.triangle-right-border').css('border-width', 0); 584 585 $(this).find('.imapper-arrow').addClass('triangle-right'); 586 var color = $(this).find('.imapper-arrow').css('border-top-color'); 587 $(this).find('.imapper-arrow').css('border-bottom-color', color); 588 $(this).find('.imapper-arrow').css('position', 'absolute'); 589 $(this).find('.imapper-arrow').css('top', '1px'); 590 } 591 else if (position == 'left') 592 { 593 $(this).find('.imapper-content').css('position', 'absolute'); 594 $(this).find('.imapper-content').css('left', '0px'); 595 $(this).find('.imapper-content').css('border-top-right-radius', '0px'); 596 $(this).find('.imapper-content').css('border-bottom-right-radius', '0px'); 597 $(this).find('.imapper-content').css('border-right', 'none'); 598 599 $(this).find('.imapper-content').css('width', '0px'); 600 $(this).find('.imapper-content').css('margin-left', width + 'px'); 601 602 $(this).find('.triangle-left-border').css('border-top-color', borderColor); 603 $(this).find('.triangle-left-border').css('border-bottom-color', borderColor); 604 605 $(this).css('width', width + 20 + 'px'); 606 $(this).css('height', height + 'px'); 607 $(this).css('right', width + 18 + 'px'); 608 $(this).css('bottom', '75px'); 609 610 $(this).find('.imapper-arrow').addClass('triangle-left'); 611 var color = $(this).find('.imapper-arrow').css('border-top-color'); 612 $(this).find('.imapper-arrow').css('border-bottom-color', color); 613 $(this).find('.imapper-arrow').css('position', 'absolute'); 614 $(this).find('.imapper-arrow').css('right', '0px'); 615 $(this).find('.imapper-arrow').css('top', '1px'); 616 } 617 } 618 619 /* 620 * Glowing pin and tab pin only 621 * Pins which support tabs have class imapper-pin-type-1, at least I thing that is the case here 622 * A.P. 623 */ 624 if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType1)) 625 { 626 627 var radius = (parseInt($(this).find('.imapper-content').css('border-top-left-radius')) / 2 + 1); 628 var zindextab = 100; 629 // Added for resposive styling mutlitabas in content for width < 600px 630 var left_tab = 0; 631 632 if (position == 'left' || position == 'right') 633 {
634 var bottom = parseInt($(this).css('height')) + 25 - radius; 635 var bottom_tab = parseInt($(this).css('height')); 636 637 $(this).find('.imapper-content-additional').each(function() { 638 $(this).css('height', '0px'); 639 $(this).find('.imapper-content-inner').css('display', 'none'); 640 $(this).css('bottom', bottom + 'px'); 641 bottom += 25 - radius; 642 643 }); 644 645 $(this).find('.imapper-content-tab').each(function(index) { 646 $(this).css('height', '25px'); 647 $(this).css('width', width + 'px'); 648 649 650 $(this).css('border-top-left-radius', $(this).siblings('.imapper-content').css('border-top-left-radius')); 651 $(this).css('border-top-right-radius', $(this).siblings('.imapper-content').css('border-top-right-radius')); 652 $(this).css('border-style', 'solid'); 653 $(this).css('border-width', '1px 1px 0 1px'); 654 $(this).css('border-color', borderColor); 655 656 $(this).find('a').css('padding', '0 0 0 10px'); 657 658 if (position == 'right') 659 $(this).css('right', '0px'); 660 661 $(this).css('bottom', bottom_tab + 'px'); 662 bottom_tab += 25 - radius; 663 664 $(this).css('z-index', zindextab); 665 zindextab--; 666 667 /* 668 * Set tabs width differently for window width < 600 669 * @since 2.8 670 */ 671 if ( $(window).width() <= 600 ) { 672 // Add css class active to first tab only 673 if ( $(this).attr('id').indexOf('-content-tab') > 0 ) { 674 $(this).addClass('active'); 675 } 676 // Other css 677 $(this).css('right', ''); 678 $(this).css('left', left_tab + 'px'); 679 left_tab += 42; 680 $(this).css('z-index', ''); 681 $(this).css('bottom', ''); 682 } 683 }); 684 685 $(this).find('.imapper-content').each(function(index) { 686 /* 687 * Fix for height for the other functions 688 * Width defined on line 97 689 * @since 2.8 690 */ 691 $(this).css('width', width + 'px'); 692 693 var tNumber = 1; 694 var tabValueNumber = $(this).parent().siblings('.imapper-value-tab-number'); 695 if (tabValueNumber.length > 0) 696 tNumber = parseInt(tabValueNumber.html()); 697 698 if (tNumber != 1) 699 { 700 701 if (index == 0) 702 { 703 $(this).css('border-top-left-radius', '0px'); 704 $(this).css('border-top-right-radius', '0px'); 705 } 706 else 707 $(this).css('border-radius', '0px'); 708 709 710 711 $(this).find('.imapper-content').css('border-width', '0 1px 1px 1px'); 712 } 713 }); 714 } 715 else if (position == 'top' || position == 'bottom') 716 { 717 var right = parseInt($(this).css('width')) + 25 - radius; 718 var right_tab = parseInt($(this).css('width')); 719 720 $(this).find('.imapper-content-additional').each(function() { 721 $(this).css('width', '0px'); 722 $(this).find('.imapper-content-inner').css('display', 'none'); 723 $(this).css('right', right + 'px');
724 right += 25 - radius; 725 }); 726 727 $(this).find('.imapper-content-tab').each(function() { 728 729 $(this).css('width', '25px'); 730 $(this).css('height', height + 'px'); 731 $(this).find('a').css('height', height + 'px'); 732 733 $(this).css('border-top-left-radius', $(this).parent().find('.imapper-content').css('border-top-left-radius')); 734 $(this).css('border-bottom-left-radius', $(this).parent().find('.imapper-content').css('border-bottom-left-radius')); 735 $(this).css('border-style', 'solid'); 736 $(this).css('border-width', '1px 0 1px 1px'); 737 $(this).css('border-color', borderColor); 738 739 $(this).find('a').css('padding', '5px 0 0 5px'); 740 741 if (position == 'bottom') 742 $(this).css('bottom', '0px'); 743 744 $(this).css('right', right_tab + 'px'); 745 right_tab += 25 - radius; 746 747 $(this).css('z-index', zindextab); 748 zindextab--; 749 750 /* 751 * Set tabs width differently for window width < 600 752 * @since 2.8 753 */ 754 if ( $(window).width() <= 600 ) { 755 // Add css class active to first tab only 756 if ( $(this).attr('id').indexOf('-content-tab') > 0 ) { 757 $(this).addClass('active'); 758 } 759 // Other css 760 $(this).css('right', ''); 761 $(this).css('left', left_tab + 'px'); 762 left_tab += 42; 763 $(this).css('z-index', ''); 764 } 765 766 }); 767 768 $(this).find('.imapper-content').each(function(index) { 769 /* 770 * Fix for height for the other functions 771 * height defined on line 98 772 * @since 2.8 773 */ 774 $(this).css('height', height + 'px'); 775 var tNumber = 1; 776 var tabValueNumber = $(this).parent().siblings('.imapper-value-tab-number'); 777 if (tabValueNumber.length > 0) 778 tNumber = parseInt(tabValueNumber.html()); 779 if (tNumber != 1) 780 { 781 if (index == 0) 782 { 783 $(this).css('border-top-left-radius', '0px'); 784 $(this).css('border-bottom-left-radius', '0px'); 785 } 786 else 787 $(this).css('border-radius', '0px'); 788 789 $(this).find('.imapper-content').css('border-width', '1px 1px 1px 0'); 790 } 791 }); 792 } 793 } 794 795 796 /* 797 * Add class to pin that have mutliple tabs to style responsive behavior 798 * Only for window width < 600 799 * @since 2.8 800 */ 801 if ( $(window).width() <= 600 ) { 802 803 if ( $(this).siblings('.imapper' + id + '-pin').parent('.imapper-pin-wrapper').find('.imapper-content').size() > 1 ) { 804 $(this).siblings('.imapper' + id + '-pin').parent('.imapper-pin-wrapper').addClass('imapper-responsive-tab-pin-tabs'); 805 } 806 807 } 808 809 if ($(this).siblings('.imapper' + id + '-pin').attr('src')!==un
809defined) { 810 var indexPosition = $(this).siblings('.imapper' + id + '-pin').attr('src').indexOf('images/'); 811 812 var position = $(this).parent().find('.imapper' + id + '-pin').attr('src').indexOf('/images/'); 813 pluginUrl = $(this).parent().find('.imapper' + id + '-pin').attr('src').substring(0, position); 814 815 $(this).siblings('.imapper-pin-color').css('behavior', 'url(' + pluginUrl + '/pie/PIE.htc)'); 816 } 817 818 }); 819 820 var hheight; 821 $(this).find('.imapper-content-text').each(function(index) { 822 if (index == 0) 823 hheight = $(this).siblings('.imapper-content-header').height(); 824 825 if ($(this).siblings('.imapper-content-header').html() != '') 826 { 827 828 var dis = $(this).closest('.imapper-content-inner'); 829 830 if (dis.length==0) 831 dis = $(this); 832 833 834 if ($(dis).closest('.imapper-content-wrapper').siblings('img').hasClass(pinType2)) 835 $(this).css('height', $(this).parent().height() - hheight - 20 + 'px'); 836 else 837 $(this).css('height', $(this).parent().height() - hheight - 30 + 'px'); 838 } 839 else 840 { 841 $(this).siblings('.imapper-content-header').css('padding', '0px'); 842 $(this).css('height', $(this).parent().height() - 20 + 'px'); 843 } 844 845 $(this).mCustomScrollbar({'scrollInertia':300}); 846 }); 847 if(my_debug_12){ 848 console.log('Multiplier',{multiplier:multiplier,multiplierAra:multiplierArea}); 849 } 850 if (multiplier <= 1) 851 { 852 853 $(this).find('.imapper-pin-wrapper > img').parent().css('transform', 'scale(' + multiplier + ')'); 854 855 var windowWidth = parseInt($(window).width()); 856 if (settings.pinScalingCoefficient!=0 && windowWidth<600 && settings.itemDesignStyle == 'responsive' ) { 857 $(this).find('.imapper-pin-wrapper > img ~ .imapper-content-wrapper').css({'transform': 'scale(' + (multiplierArea/multiplier) + ')','transform-origin':'0% 0%', 858 '-webkit-transform-origin':'0% 0%', 859 '-moz-transform-origin':'0% 0%', 860 '-ms-transform-origin':'0% 0%', 861 '-o-transform-origin':'0% 0%'}); 862 } 863 864 865 } 866 $(this).find('.imapper-pin-wrapper > .imapper-area-pin').parent().css('transform', 'scale(' + multiplierArea + ')'); 867 868 var windowWidth = parseInt($(window).width()); 869 870 if (windowWidth>600 || settings.itemDesignStyle == 'fluid') { 871 $(this).find('.imapper-pin-wrapper > img ~ .imapper-content-wrapper').each(function(){ 872 var openPosition = $(this).parent().data('open-position'); 873 switch(openPosition) { 874 case 'top': 875 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'center bottom','-webkit-transform-origin':'center bottom','-moz-transform-origin':'center bottom','-ms-transform-origin':'center bottom','-o-transform-origin':'center bottom'}); 876 break; 877 case 'bottom': 878 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'center top','-webkit-transform-origin':'center top','-moz-transform-origin':'center top','-ms-transform-origin':'center top','-o-transform-origin':'center top'}); 879 break; 880 case 'left': 881 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'right center','-webkit-transform-origin':'right center','-moz-transform-origin':'right center','-ms-transform-origin':'right center','-o-transform-origin':'right center'}); 882 break; 883 case 'right': 884 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'left center','-webkit-transform-origin':'left center','-moz-transform-origin':'left center','-ms-transform-origin':'left center','-o-transform-origin':'left center'}); 885 break; 886 } 887 888 });
889 } 890 891 892 893 $(this).css('visibility', 'visible'); 894 895 896 /* =========================================================*/ 897 /* Click on content tab if mutli tabs 898 /* ==========================================================*/ 899 $(document).on('click', '.imapper-content-tab a', function(e) { 900 e.preventDefault(); 901 902 var pinId = getPinId($(this).closest('.imapper-content-wrapper').siblings('.imapper-pin-type-1')); 903 904 var newClick = parseInt($(this).html()); 905 var dis = $(this).parent().parent(); 906 907 var position = $(this).closest('.imapper-pin-wrapper').data('open-position'); 908 909 if (newClick != tab_clicked[pinId] && $(window).width() > 600) 910 { 911 if (position == 'left' || position == 'right') 912 { 913 if (newClick > tab_clicked[pinId]) 914 { 915 916 917 $(dis).find('.imapper-content').eq(newClick - 1).stop(true,true); 918 919 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).find('.imapper-content-inner').fadeOut('fast'); 920 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).animate({ height: 0}, {duration: 400}); 921 922 for (var i = tab_clicked[pinId]; i < newClick; i++) 923 { 924 var bottomNew = parseInt($(dis).find('.imapper-content-tab').eq(i - 1).css('bottom')) - cHeight[pinId]; 925 $(dis).find('.imapper-content-tab').eq(i - 1).animate({ bottom: bottomNew}, {duration: 400}); 926 927 if (i != tab_clicked[pinId]) 928 $(dis).find('.imapper-content').eq(i - 1).css('bottom', parseInt($(dis).find('.imapper-content').eq(i - 1).css('bottom')) - cHeight[pinId]); 929 } 930 931 $(dis).find('.imapper-content').eq(newClick - 1).find('.imapper-content-inner').fadeIn('fast'); 932 var bottomNew2 = parseInt($(dis).find('.imapper-content').eq(newClick - 1).css('bottom')) - cHeight[pinId]; 933 $(dis).find('.imapper-content').eq(newClick - 1).animate({ height: cHeight[pinId], bottom: bottomNew2}, {duration: 400}); 934 } 935 else 936 { 937 938 $(dis).find('.imapper-content').eq(newClick - 1).stop(true,true); 939 940 941 942 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).find('.imapper-content-inner').fadeOut('fast'); 943 var bottomNew = parseInt($(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).css('bottom')) + cHeight[pinId]; 944 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).animate({ height: 0, bottom: bottomNew}, {duration: 400}); 945 946 $(dis).find('.imapper-content').eq(newClick - 1).find('.imapper-content-inner').fadeIn('fast'); 947 $(dis).find('.imapper-content').eq(newClick - 1).animate({ height: cHeight[pinId]}, {duration: 400}); 948 949 for (var i = newClick; i < tab_clicked[pinId]; i++) 950 { 951 var bottomNew2 = parseInt($(dis).find('.imapper-content-tab').eq(i - 1).css('bottom')) + cHeight[pinId]; 952 $(dis).find('.imapper-content-tab').eq(i - 1).stop(true,true).animate({ bottom: bottomNew2}, {duration: 400}); 953 954 if (i != newClick) 955 $(dis).find('.imapper-content').eq(i - 1).css('bottom', parseInt($(dis).find('.imapper-content').eq(i - 1).css('bottom')) + cHeight[pinId]); 956 } 957 } 958 } 959 else if (position == 'top' || position == 'bottom') 960 { 961 if (newClick > tab_clicked[pinId]) 962 { 963 964 $(dis).find('.imapper-content').eq(newClick - 1).stop(true,true); 965 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).find('.imapper-content-inner').fadeOut('fast'); 966 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).animate({ width: 0}, {duration: 400}); 967 for (var i = tab_clicked[pinId]; i < newClick; i++) 968 { 969 var rightNew = parseInt($(dis).find('.imapper-content-tab').eq(i - 1).css('right')) - cWidth[pinId]; 970 $(dis).find('.imapper-content-tab').eq(i - 1).animate({ right: rightNew}, {duration: 400}); 971 972 if (i != tab_clicked[pinId]) 973 $(dis).find('.imapper-content').eq(i - 1).css('right', parseInt($(dis).find('.imapper-content').eq(i - 1).css('right')) - cWidth[pinId]); 974 } 975 976 $(dis).find('.imapper-content').eq(newClick - 1).find('.imapper-content-inner').fadeIn('fast'); 977 var rightNew2 = parseInt($(dis).find('.imapper-content').eq(newClick - 1).css('right')) - cWidth[pinId]; 978 $(dis).find('.imapper-content').eq(newClick - 1).animate({ width: cWidth[pinId], right: rightNew2}, {duration: 400}); 979 } 980 else 981 { 982 $(dis).find('.imapper-content').eq(newClick - 1).stop(true,true); 983 984 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).find('.imapper-content-inner').fadeOut('fast'); 985 var rightNew = parseInt($(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).css('right')) + cWidth[pinId]; 986 $(dis).find('.imapper-content').eq(tab_clicked[pinId] - 1).animate({ width: 0, right: rightNew}, {duration: 400}); 987 988 $(dis).find('.imapper-content').eq(newClick - 1).find('.imapper-content-inner').fadeIn('fast'); 989 $(dis).find('.imapper-content').eq(newClick - 1).animate({ width: cWidth[pinId]}, {duration: 400}); 990 991 for (var i = newClick; i < tab_clicked[pinId]; i++) 992 { 993 var rightNew2 = parseInt($(dis).find('.imapper-content-tab').eq(i - 1).stop(true,true).css('right')) + cWidth[pinId]; 994 $(dis).find('.imapper-content-tab').eq(i - 1).animate({ right: rightNew2}, {duration: 400}); 995 996 if (i != newClick) 997 $(dis).find('.imapper-content').eq(i - 1).css('right', parseInt($(dis).find('.imapper-content').eq(i - 1).css('right')) + cWidth[pinId]); 998 } 999 } 1000 } 1001 1002 $(dis).find('.imapper-content').eq(newClick - 1).find('.imapper-content-text').mCustomScrollbar('update'); 1003 tab_clicked[pinId] = newClick; 1004 1005 } else { 1006 1007 // Must have another check for window width as argument above not always true - newClick != tab_clicked[pinId] 1008 if ( $(window).width() <= 600 ) { 1009 1010 /* 1011 * Responsive behavior for less than 600px window width 1012 * Class imapper-responsive-tab-pin-tabs will be added to pins with multiple tabs 1013 */ 1014 var responsiveCurrentTabClicked = $(this); 1015 var responsiveShowTabId = $('#' + responsiveCurrentTabClicked.parent().attr('id').replace('-tab', '')); 1016 var responsiveParentPinWrapper = responsiveCurrentTabClicked.parents('.imapper-pin-wrapper'); 1017 var responsiveContentWrapper = responsiveParentPinWrapper.find('.imapper-content-wrapper'); 1018 1019 // Add background so we can swap tabs 1020 responsiveContentWrapper.css('background', responsiveContentWrapper.data('back-color')); 1021 1022 setTimeout(function(){ 1023 // Hide all tabls contents and remove tab active class 1024 responsiveParentPinWrapper.find('.imapper-content-tab').removeClass('active'); 1025 responsiveParentPinWrapper.find('.imapper-content').not(responsiveShowTabId).fadeOut(200); 1026 // Show clicked tab content and add active class 1027 1028 responsiveCurrentTabClicked.parent('.imapper-content-tab').addClass('active'); 1029 responsiveShowTabId.addClass('active').fadeIn(200, function(){ 1030 // remove fake background 1031 responsiveContentWrapper.css('background', ''); 1032 }); 1033 1034 }, 150); 1035 } 1036 1037 } 1038 }); 1039 1040 $('.imapper' + id + '-pin-wrapper').each(function(){ 1041 1042 var itemClickAction; 1043 if (settings.itemOpenStyle == 'click') 1044 itemClickAction = 'content'; 1045 else
1046 itemClickAction = 'none'; 1047 1048 if (settings.advancedPinOptions == true && settings.pinClickAction!='') 1049 itemClickAction = settings.pinClickAction; 1050 1051 if ($(this).attr('data-imapper-click-action') !== undefined) 1052 itemClickAction = $(this).attr('data-imapper-click-action'); 1053 1054 var itemHoverAction; 1055 if (settings.itemOpenStyle == 'hover') 1056 itemHoverAction = 'content'; 1057 else 1058 itemHoverAction = 'none'; 1059 1060 if (settings.advancedPinOptions == true && settings.pinHoverAction!='') 1061 itemHoverAction = settings.pinHoverAction; 1062 1063 if ($(this).attr('data-imapper-hover-action') !== undefined) 1064 itemHoverAction = $(this).attr('data-imapper-hover-action'); 1065 1066 if (itemHoverAction == 'content')//handles pin hover event 1067 { 1068 1069 1070 1071 $(this).children('.imapper' + id + '-pin').mouseover( function() {//hover in function for pins 1072 1073 $(this).siblings('.imapper-content-wrapper').stop(true,true); 1074 $(this).siblings('.imapper-content-wrapper').find('.imapper-content').stop(true,true); 1075 1076 if (settings.mapOverlay) 1077 addOverlay($(this),id); 1078 1079 1080 var properties2 = {}; 1081 1082 var contentOpenPosition = $(this).closest('.imapper-pin-wrapper').data('open-position'); 1083 1084 if (settings.slideAnimation == true) { 1085 1086 var rightPos = 0; 1087 var bottomPos = 0; 1088 1089 switch (contentOpenPosition) { 1090 case 'top': 1091 case 'bottom': 1092 bottomPos = parseInt($(this).siblings('.imapper-content-wrapper').css('bottom')); 1093 var duration = {duration: 400, queue: true, always: function() { 1094 $(this).css({'bottom':bottomPos+'px'}); } 1095 }; 1096 break; 1097 case 'left': 1098 case 'right': 1099 rightPos = parseInt($(this).siblings('.imapper-content-wrapper').css('right')); 1100 var duration = {duration: 400, queue: true, always: function() { 1101 $(this).css({'right':rightPos+"px"}); 1102 }}; 1103 break; 1104 default: 1105 var duration = {duration: 400, queue: true}; 1106 } 1107 1108 } else { 1109 var duration = {duration: 400, queue: true}; 1110 } 1111 1112 var cpWidth = ($(window).width() <= 600 && designStyle == 'responsive') ? ($(this).closest('.imagemapper-wrapper').width() / parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1113 $(this).parent().css('transform').indexOf(',')))) : width; 1114 1115 if ($(window).width() > 600 && designStyle == 'responsive' || designStyle == 'fluid') 1116 { 1117 $(this).css('z-index', '12'); 1118 $(this).siblings('.imapper-value-tab-number').css('z-index', '12'); 1119 $(this).siblings('.imapper-content-wrapper').css('z-index', '11'); 1120 } 1121 else 1122 { 1123 $(this).siblings('.imapper-content-wrapper').css('z-index', '13'); 1124 } 1125 1126 $(this).parent().css('z-index', '100'); 1127 1128 if ($(this).siblings('.imapper-content-wrapper').css('visibility') == 'hidden') 1129 $(this).siblings('.imapper-content-wrapper').css('visibility', 'visible'); 1130 1131 if ($(this).hasClass(pinType2)) 1132 { 1133 if ($(this).parent().data('open-position') == 'right') 1134 properties2 = {width: cpWidth, marginLeft: 0}; 1135 else 1136 properties2 = {width: cpWidth, marginLeft: 0}; 1137 1138 $(this).siblings('.imapper-content-wrapper').find('.imapper-content').animate(properties2, duration); 1139 } 1140 1141 if (settings.slideAnimation) { 1142 1143 var contentWrapperWidth = $(this).siblings('.imapper-content-wrapper').width(); 1144 var contentWrapperHeight = $(this).siblings('.imapper-content-wrapper').height(); 1145 1146 switch (contentOpenPosition) { 1147 case 'top': 1148 $(this).siblings('.imapper-content-wrapper').css('bottom',(bottomPos+contentWrapperHeight/5)+"px"); 1149 $(this).siblings('.imapper-content-wrapper').animate({opacity: 1, bottom: bottomPos+"px"}, duration); 1150 break; 1151 case 'bottom': 1152 $(this).siblings('.imapper-content-wrapper').css('bottom',(bottomPos-contentWrapperHeight/5)+"px"); 1153 $(this).siblings('.imapper-content-wrapper').animate({opacity: 1, bottom: bottomPos+"px"}, duration); 1154 break; 1155 case 'left': 1156 $(this).siblings('.imapper-content-wrapper').css('right',(rightPos+contentWrapperWidth/5)+"px"); 1157 $(this).siblings('.imapper-content-wrapper').animate({opacity: 1, right: rightPos+"px"}, duration); 1158 break; 1159 case 'right': 1160 $(this).siblings('.imapper-content-wrapper').css('right',(rightPos-contentWrapperWidth/5)+"px"); 1161 $(this).siblings('.imapper-content-wrapper').animate({opacity: 1, right: rightPos+"px"}, duration); 1162 break; 1163 break; 1164 default: 1165 $(this).siblings('.imapper-content-wrapper').animate({opacity: 1}, duration); 1166 } 1167 } else { 1168 $(this).siblings('.imapper-content-wrapper').animate({opacity: 1}, duration); 1169 } 1170 1171 });
1172 /** 1173 * Dragan bugs 3 25 2015 remove window ehn is hover over 1174 * content widnow 1175 */ 1176 $(this).find(".imapper-content-wrapper").mouseleave( function() {//hover out function for pins 1177 1178 var pinId = getPinId($(this).siblings('.imapper' + id + '-pin'));//id of the pin 1179 var properties = {opacity: 0}; 1180 var properties2 = {}; 1181 var duration = {}; 1182 /*if(window.console){ 1183 console.log("Remove from content",pinId); 1184 }*/ 1185 var cpWidth = ($(window).width() <= 600 && designStyle == 'responsive') ? ($(this).parent().width() / parseFloat($(this).css('transform').substring($(this).css('transform').indexOf('(') + 1, 1186 $(this).css('transform').indexOf(',')))) : width; 1187 1188 1189 1190 if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType2)) 1191 { 1192 1193 if ($(this).data('open-position') == 'right') 1194 properties2 = {width: 0}; 1195 else 1196 properties2 = {width: 0, marginLeft: cpWidth}; 1197 1198 duration = {duration: 300, queue: true}; 1199 } 1200 else 1201 { 1202 duration = { 1203 duration: 300, 1204 queue: true, 1205 complete: function() { 1206 $(this).find('.imapper-content').parent().css('visibility', 'hidden'); 1207 } 1208 }; 1209 } 1210 1211 1212 1213 $(this).each(function(){ 1214 //if (!($(this).is(':hover'))) { 1215 $(this).animate(properties, duration); 1216 /*}else { 1217 /*$(this).find('.imapper-content-wrapper').mouseleave(function(){ 1218 $(this).siblings('img').trigger('mouseleave'); 1219 });
1220 }*/ 1221 1222 }); 1223 1224 1225 if ($(this).siblings('.imapper' + id + '-pin').hasClass(pinType2)) 1226 $(this).find('.imapper-content').delay(200).animate(properties2, { 1227 duration: 300, 1228 queue: false, 1229 complete: function() { 1230 $(this).parent().css('visibility', 'hidden'); 1231 } 1232 }); 1233 1234 $(this).siblings('.imapper' + id + '-pin').css('z-index', '10'); 1235 $(this).children('.imapper-value-tab-number').css('z-index', '10'); 1236 $(this).children('.imapper-content-wrapper').css('z-index', '9'); 1237 1238 $(this).css('z-index', ''); 1239 1240 imapperClearMap($('#imapper'+id+'-map-image'), id, clicked); 1241 }); 1242 /** 1243 * End dragan changes 1244 */ 1245 $(this).mouseleave( function() {//hover out function for pins 1246 1247 1248 1249 var pinId = getPinId($(this).children('.imapper' + id + '-pin'));//id of the pin 1250 var properties = {opacity: 0}; 1251 var properties2 = {}; 1252 var duration = {}; 1253 1254 var cpWidth = ($(window).width() <= 600 && designStyle == 'responsive') ? ($(this).parent().width() / parseFloat($(this).css('transform').substring($(this).css('transform').indexOf('(') + 1, 1255 $(this).css('transform').indexOf(',')))) : width; 1256 1257 1258 1259 if ($(this).children('.imapper' + id + '-pin').hasClass(pinType2)) 1260 { 1261 1262 if ($(this).data('open-position') == 'right') 1263 properties2 = {width: 0}; 1264 else 1265 properties2 = {width: 0, marginLeft: cpWidth}; 1266 1267 duration = {duration: 300, queue: true}; 1268 } 1269 else 1270 { 1271 duration = { 1272 duration: 300, 1273 queue: true, 1274 complete: function() { 1275 $(this).find('.imapper-content').parent().css('visibility', 'hidden'); 1276 } 1277 }; 1278 } 1279 1280 1281 1282 $(this).find('.imapper-content-wrapper').delay(200).each(function(){ 1283 if (!($(this).is(':hover'))) { 1284 $(this).animate(properties, duration); 1285 }else { 1286 /*$(this).find('.imapper-content-wrapper').mouseleave(function(){ 1287 $(this).siblings('img').trigger('mouseleave'); 1288 });*/ 1289 } 1290 1291 }); 1292 1293 1294 if ($(this).children('.imapper' + id + '-pin').hasClass(pinType2)) 1295 $(this).find('.imapper-content').delay(200).animate(properties2, { 1296 duration: 300, 1297 queue: false, 1298 complete: function() { 1299 $(this).parent().css('visibility', 'hidden'); 1300 } 1301 });
1302 1303 $(this).children('.imapper' + id + '-pin').css('z-index', '10'); 1304 $(this).children('.imapper-value-tab-number').css('z-index', '10'); 1305 $(this).children('.imapper-content-wrapper').css('z-index', '9'); 1306 1307 $(this).css('z-index', ''); 1308 1309 imapperClearMap($('#imapper'+id+'-map-image'), id, clicked); 1310 }); 1311 } 1312 1313 1314 if (itemClickAction!='none')//handles pin click 1315 { 1316 1317 1318 1319 if (itemClickAction=='content') { 1320 1321 1322 /* =========================================================*/ 1323 /* Bind click on each pin to open content 1324 /* ==========================================================*/ 1325 $(this).children('.imapper' + id + '-pin').click(function () { 1326 1327 imapperClearMap($('#imapper' + id + '-map-image'), id, []); 1328 1329 if ($(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').hasClass('imapper-cb-tabs-version')) 1330 $(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').addClass('imapper-content-below-invisible').html(''); 1331 else 1332 $(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').slideUp().addClass('imapper-content-below-invisible').html(''); 1333 1334 1335 var pinId = getPinId($(this)); 1336 1337 if (clicked[pinId] === undefined) {//fail safe when there are multiple mappers on the page 1338 clicked[pinId] = 0; 1339 } 1340 1341 var cpWidth = ($(window).width() <= 600 && designStyle == 'responsive') ? ($(this).parent().parent().width() / parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1342 $(this).parent().css('transform').indexOf(',')))) : width; 1343 1344 /* 1345 * Clicked pin will be 0 if no other pin content open, else will be 1. 1346 * If 1 than first will close all opened contents and than set clicked[pinId] to open clicked pin content 1347 */ 1348 if (clicked[pinId] == 0) 1349 { 1350 1351 var contentOpenPosition = $(this).closest('.imapper-pin-wrapper').data('open-position'); 1352 1353 var properties = {opacity: 1}; 1354 var properties2 = {}; 1355 var duration = {duration: 300, queue: true}; 1356 1357 var rightPos = 0; 1358 var bottomPos = 0; 1359 1360 if (settings.slideAnimation == true) { 1361 switch (contentOpenPosition) { 1362 case 'top': 1363 case 'bottom': 1364 bottomPos = parseInt($(this).siblings('.imapper-content-wrapper').css('bottom')); 1365 var duration = {duration: 300, queue: true, always: function () { 1366 $(this).css({'bottom': bottomPos + 'px'}); 1367 }}; 1368 break; 1369 case 'left': 1370 case 'right': 1371 rightPos
1371= parseInt($(this).siblings('.imapper-content-wrapper').css('right')); 1372 var duration = {duration: 300, queue: true, always: function () { 1373 $(this).css({'right': rightPos + "px"}); 1374 }}; 1375 break; 1376 } 1377 } 1378 1379 var clickedPinId = getPinId($(this)); 1380 1381 $('.imapper' + id + '-pin').each(function () { 1382 var pid = getPinId($(this)); 1383 1384 if (clicked[pid] == 1) { 1385 $(this).trigger('click'); 1386 } 1387 1388 }); 1389 1390 if (settings.mapOverlay) 1391 addOverlay($(this), id); 1392 1393 if ($(window).width() > 600 && designStyle == 'responsive' || designStyle == 'fluid') 1394 { 1395 $(this).css('z-index', '12'); 1396 $(this).siblings('.imapper-value-tab-number').css('z-index', '12'); 1397 $(this).siblings('.imapper-content-wrapper').css('z-index', '11'); 1398 1399 } 1400 else 1401 { 1402 $(this).siblings('.imapper-content-wrapper').css('z-index', '13'); 1403 } 1404 1405 $(this).parent().css('z-index', '100'); 1406 1407 if ($(this).hasClass(pinType2)) 1408 { 1409 if ($(this).parent().data('open-position') == 'right') { 1410 properties2 = {width: cpWidth}; 1411 } 1412 else 1413 properties2 = {width: cpWidth, marginLeft: 0}; 1414 } 1415 1416 1417 1418 if (settings.slideAnimation) { 1419 1420 var contentWrapperWidth = $(this).siblings('.imapper-content-wrapper').width(); 1421 var contentWrapperHeight = $(this).siblings('.imapper-content-wrapper').height(); 1422 1423 switch (contentOpenPosition) { 1424 case 'top': 1425 $(this).siblings('.imapper-content-wrapper').css('bottom', (bottomPos + contentWrapperHeight / 5) + "px"); 1426 $(this).stop(true).siblings('.imapper-content-wrapper').css('visibility', 'visible').animate({opacity: 1, bottom: bottomPos + "px"}, duration); 1427 break; 1428 case 'bottom': 1429 $(this).siblings('.imapper-content-wrapper').css('bottom', (bottomPos - contentWrapperHeight / 5) + "px"); 1430 $(this).stop(true).siblings('.imapper-content-wrapper').css('visibility', 'visible').animate({opacity: 1, bottom: bottomPos + "px"}, duration); 1431 break; 1432 case 'left': 1433 $(this).siblings('.imapper-content-wrapper').css('right', (rightPos + contentWrapperWidth / 5) + "px"); 1434 $(this).stop(true).siblings('.imapper-content-wrapper').css('visibility', 'visible').animate({opacity: 1, right: rightPos + "px"}, duration); 1435 break; 1436 case 'right': 1437 $(this).siblings('.imapper-content-wrapper').css('right', (rightPos - contentWrapperWidth / 5) + "px"); 1438 $(this).stop(true).siblings('.imapper-content-wrapper').css('visibility', 'visible').animate({opacity: 1, right: rightPos + "px"}, duration); 1439 break; 1440 break; 1441 default: 1442 $(this).stop(true).siblings('.imapper-content-wrapper').animate({opacity: 1}, duration); 1443 } 1444 } else { 1445 $(this).stop(true).siblings('.imapper-content-wrapper').css('visibility', 'visible').animate(properties, duration); 1446 } 1447 1448 if ($(this).hasClass(pinType2)) 1449 $(this).siblings('.imapper-content-wrapper').find('.imapper-content').animate(properties2, 1450 { 1451 duration: 400, 1452 queue: false 1453 }); 1454 1455 $(this).siblings('.imapper-content-wrapper').find('.imapper-content-text').mCustomScrollbar('update'); 1456 clicked[pinId] = 1; 1457 $(this).addClass('imapper-no-overlay'); 1458 } 1459 else 1460 { 1461 var properties = {opacity: 0}; 1462 var properties2 = {}; 1463 var duration = {}; 1464 1465 if ($(this).hasClass(pinType2)) 1466 { 1467 if ($(this).parent().data('open-position') == 'right') { 1468 properties2 = {width: 0}; 1469 } 1470 else 1471 properties2 = {width: 0, marginLeft: cpWidth}; 1472 1473 duration = {duration: 400, queue: false}; 1474 } 1475 else 1476 duration = { 1477 duration: 400, 1478 queue: false, 1479 complete: function () { 1480 $(this).css('visibility', 'hidden'); 1481 } 1482 }; 1483 1484 $(this).siblings('.imapper-content-wrapper').animate(properties, duration); 1485 1486 if ($(this).hasClass(pinType2)) 1487 $(this).siblings('.imapper-content-wrapper').find('.imapper-content').animate(properties2, 1488 { 1489 duration: 400, 1490 queue: false, 1491 complete: function () { 1492 $(this).parent().css('visibility', 'hidden'); 1493 } 1494 }); 1495 1496 $(this).css('z-index', '10'); 1497 $(this).siblings('.imapper-value-tab-number').css('z-index', '10'); 1498 $(this).siblings('.imapper-content-wrapper').css('z-index', '9'); 1499 1500 $(this).parent().css('z-index', ''); 1501 1502 clicked[pinId] = 0; 1503 1504 $('.imapper' + id + '-pin').removeClass('imapper-no-overlay'); 1505 1506 1507 } 1508 1509 1510 }); 1511 1512 $('#imapper' + id + '-map-image').click(function() {//closes the opened items 1513 1514 imapperClearMap($(this), id, clicked); 1515 1516 1517 });
1518 } else if (itemClickAction == 'link' ) { 1519 $(this).children('.imapper' + id + '-pin').click( function() { 1520 1521 var link = $(this).parent().data('imapper-link'); 1522 window.open(link); 1523 }); 1524 } else if (itemClickAction == 'lightboxImage' || itemClickAction == 'lightboxIframe' ) { 1525 1526 $(this).children('.imapper' + id + '-pin').click( function() { 1527 1528 if ($(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').hasClass('imapper-cb-tabs-version')) 1529 $(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').addClass('imapper-content-below-invisible'); 1530 else 1531 $(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').slideUp().addClass('imapper-content-below-invisible'); 1532 1533 setTimeout(function(){ 1534 $('.imapper'+id+'-content-below').html(''); 1535 1536 },400); 1537 1538 1539 $(this).siblings('.imapper-pretty-photo').trigger('click'); 1540 1541 1542 }); 1543 } else if (itemClickAction == 'contentBelow') { 1544 $(this).children('.imapper' + id + '-pin').click( function() { 1545 1546 1547 imapperClearMap($('#imapper'+id+'-map-image'), id, clicked); 1548 1549 var pinId = getPinId($(this)); 1550 1551 var isPinOpen = $('.content-below-pin-'+pinId).length; 1552 1553 if ( isPinOpen == 0 ) { 1554 1555 if (settings.mapOverlay) 1556 addOverlay($(this),id); 1557 1558 var contentHeader = $(this).siblings('.imapper-content-wrapper').find('.imapper-content-header').html(); 1559 var contentText = $(this).siblings('.imapper-content-wrapper').find('.imapper-content-text').html(); 1560 $(this).closest('.imagemapper-wrapper').siblings('.imapper'+id+'-content-below').css('display','block').addClass('imapper-content-below-invisible'); 1561 1562 1563 1564 if ($(this).siblings('.imapper-content-wrapper').find('.imapper-content').length>1) { 1565 1566 var cbContent = '<div class="imapper-cb-content-wrapper content-below-pin-'+pinId+'">'; 1567 var cbTabs = '<div class="imapper-cb-tabs">'; 1568 var i = 1; 1569 1570 $(this).siblings('.imapper-content-wrapper').find('.imapper-content').each(function(){ 1571 1572 var cbHeader = $(this).find('.imapper-content-header').html(); 1573 var cbText = $(this).find('.imapper-content-text').html(); 1574 1575 cbTabs +='<div class="imapper-cb-tab-wrapper '+( i==1 ? "imapper-cb-tab-active" : "" )+'"><a class="imapper-cb-tab" href="imapper'+ id +'-pin'+pinId+'-cb-content-'+i+'">'+i+'</a><div class="imapper-category-arrow-bottom"></div></div>'; 1576 cbContent += '<div class="imapper-cb-content '+( i==1 ? "imapper-cb-content-active" : "" )+'" id="imapper'+ id +'-pin'+pinId+'-cb-content-'+i+'"><div class="content-below-header">'+cbHeader+'</div><div class="content-below-text">'+cbText+'</div></div>'; 1577 i++; 1578 }); 1579
1580 cbContent+='</div>'; 1581 cbTabs+='</div>'; 1582 $('.imapper'+id+'-content-below').html(cbTabs+cbContent).addClass('imapper-cb-tabs-version'); 1583 $('.imapper'+id+'-content-below').removeClass('imapper-content-below-invisible'); 1584 } 1585 else { 1586 $('.imapper'+id+'-content-below').html('<div class="content-below-header content-below-pin-'+pinId+'">'+contentHeader+'</div><div class="content-below-text">'+contentText+'</div>'); 1587 $('.imapper'+id+'-content-below').removeClass('imapper-content-below-invisible').css('display','none').slideDown(); 1588 1589 } 1590 1591 $('.imapper'+id+'-content-below .content-below-text *').removeClass(); 1592 1593 } else { 1594 $('#imapper' + id + '-map-image').trigger('click'); 1595 } 1596 }); 1597 1598 $('#imapper' + id + '-map-image').click(function() { 1599 if ($(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').hasClass('imapper-cb-tabs-version')) 1600 $(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').addClass('imapper-content-below-invisible'); 1601 else 1602 $(this).closest('.imagemapper-wrapper').siblings('.imapper-content-below').slideUp().addClass('imapper-content-below-invisible'); 1603 1604 setTimeout(function(){ 1605 $('.imapper'+id+'-content-below ').html(''); 1606 1607 },400); 1608 1609 1610 imapperClearMap($(this), id, clicked); 1611 }); 1612 1613 $(document).on('click','.imapper-cb-tab-wrapper',function(e){ 1614 e.preventDefault(); 1615 var contentId = $(this).children('.imapper-cb-tab').attr('href'); 1616 $(this).addClass('imapper-cb-tab-active').siblings().removeClass('imapper-cb-tab-active'); 1617 $('#'+contentId).addClass('imapper-cb-content-active').siblings().removeClass('imapper-cb-content-active'); 1618 }); 1619 } 1620 1621 } 1622 1623 /* 1624 * Pin content displaye and bind click on close button. 1625 * For < 600px screens 1626 */ 1627 $(document).on('click','.imapper-close-button', function() { 1628 1629 var el = $('#imapper'+id+'-map-image'); 1630 1631 if (settings.itemOpenStyle == 'hover' || $(this).closest('.imapper-pin-wrapper').data('imapper-hover-action') == 'content' ) { 1632 $(this).closest('.imapper-pin-wrapper').trigger('mouseleave'); 1633 /* 1634 * When responsive < 600px, if content action is hover and clicked on close button pin content does not close, only if clicked outside. 1635 * Below line make sure it also get's closed 1636 */ 1637 $(this).closest('.imapper-pin-wrapper').find('.imapper-content-wrapper').trigger('mouseleave'); 1638 } else { 1639 $(this).parent().siblings('.imapper' + id + '-pin').trigger('click'); 1640 } 1641 imapperClearMap(el, id, clicked); 1642 }); 1643 1644 initAreaPinsBlur(settings,id); 1645 1646 1647 1648 1649 }); 1650 1651 $(document).on('click','.imapper-category-item-wrapper', function(e) {//button for closing the pin content which is visible in responsive mode 1652 e.preventDefault(); 1653 var catName = $(this).children('.imapper-category-button').attr('href'); 1654 1655$(this).addClass('imapper-category-active').siblings().removeClass('imapper-category-active'); 1656 1657 if (catName!='All') { 1658 var pinWrappers = $(this).closest('.imapper-categories-wrapper').nextAll('.imagemapper-wrapper').first().children('.imapper-pin-wrapper'); 1659 pinWrappers.addClass('imapper-category-hidden').filter('[data-category=\''+catName+'\']').removeClass('imapper-category-hidden').addClass('imapper-category-visible'); 1660 var catPins = pinWrappers.filter(':not(.imapper-category-hidden) > .imapper' + id + '-pin'); 1661 var pinVisibleFlag = false; 1662 var pinId; 1663 catPins.each(function(){ 1664 pinId = getPinId($(this)); 1665 if (clicked[pinId] == 1) 1666 pinVisibleFlag = true; 1667 if ($('.content-below-pin-' + pinId).length > 0) 1668 pinVisibleFlag = true; 1669 });
1670 1671 if (!pinVisibleFlag) { 1672 imapperClearMap($('#imapper'+id+'-map-image'), id, clicked); 1673 $('#imapper' + id + '-map-image').trigger('click'); 1674 } 1675 1676 } else { 1677 1678 $('.imapper' + id + '-pin-wrapper').removeClass('imapper-category-hidden').addClass('imapper-category-visible'); 1679 1680 } 1681 }); 1682 1683 1684 $('.imapper' + id + '-pin').each(function() { 1685 var pinId = getPinId($(this)); 1686 1687 contentWrapperOld[pinId] = [ $(this).parent().find('.imapper-content-wrapper').css('top'), $(this).parent().find('.imapper-content-wrapper').css('left'), 1688 $(this).parent().find('.imapper-content-wrapper').css('width'), $(this).parent().find('.imapper-content-wrapper').css('height'), $(this).parent().find('.imapper-content-wrapper').css('z-index') ]; 1689 1690 contentOld[pinId] = [ $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('top'), $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('left'), 1691 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('width'), $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('height'), 1692 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('bottom'), $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('right')]; 1693 1694 contentHeaderOld[pinId] = [ $(this).parent().find('.imapper-content-header').css('width'), $(this).parent().find('.imapper-content-header').css('font-size'), 1695 $(this).parent().find('.imapper-content-header').css('padding-left') ]; 1696 1697 contentTextOld[pinId] = [ $(this).parent().find('.imapper-content-text').css('width'), $(this).parent().find('.imapper-content-text').css('height'), 1698 $(this).parent().find('.imapper-content-text').css('margin-top'), $(this).parent().find('.imapper-content-text').css('font-size'), $(this).parent().find('.imapper-content-text').css('padding-left') ]; 1699 1700 $(this).parent().find('.imapper-content-tab').each(function(index) { 1701 contentTabOld[pinId][index] = [ $(this).css('width'), $(this).css('height'), $(this).css('bottom'), $(this).css('right') ]; 1702 }); 1703 1704 $(this).parent().find('.imapper-content-additional').each(function(index) { 1705 contentAdditionalOld[pinId][index] = [ $(this).css('width'), $(this).css('height'), $(this).css('bottom'), $(this).css('right') ]; 1706 }); 1707 }); 1708 1709 /* =========================================================*/ 1710 /* Responsive pin alocation and add close button for pin content */ 1711 /* ==========================================================*/ 1712 if ($(window).width() <= 600 && designStyle == 'responsive') 1713 { 1714 1715 var mapHeight = $('.imapper'+id+'-map-image').height(); 1716 1717 1718 $('.imapper' + id + '-pin').each(function() { 1719 1720 /* 1721 * Override above set width for content that show on click 1722 * Set width as iMapper wrapper for the content. This way we avoid content to make white space on responsive view 1723 * Also set fix for this change in css wordpress_image_mapper/css/frontend/image_mapper.css 1724 * 1725 * Override height also to prevent it going outside iMapper container 1726 */ 1727 map_original_width = $(this).parents('.imagemapper-wrapper').width(); 1728 map_original_height = $(this).parents('.imagemapper-wrapper').height(); 1729 1730 var positionLeft = (-parseInt($(this).parent().css('left')) / parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1731 $(this).parent().css('transform').indexOf(',')))) + 'px'; 1732 1733 1734 var parentTopPercent = parseInt($(this).parent().data('top'))/100; 1735 var mapHeight = parseInt($(this).closest('.imagemapper-wrapper').height()); 1736 var part1 = mapHeight*parentTopPercent / parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1737 $(this).parent().css('transform').indexOf(','))); 1738 var iconHeight = parseInt($(this).height()) * parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1739 $(this).parent().css('transform').indexOf(','))); 1740 positionTop = - (part1) + "px"; 1741 if(my_debug_12){ 1742 console.log('REsponsive',{w:width,h:height}); 1743 } 1744 1745 var pinId = getPinId($(this)); 1746 var position = $(this).parent().data('open-position'); 1747 1748 var radius = parseInt($(this).parent().find('.imapper-content').css('border-bottom-right-radius')) / 2 + 1; 1749 1750 $(this).parent().find('.imapper-content-wrapper').css({'top': positionTop, 'left': positionLeft, 'width': map_original_width + 'px', 'height': map_original_height + 'px', 'z-index': '15'}); 1751 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'top': '0px', 'left': '0px', 'width': map_original_width + 'px', 'height': map_original_height + 'px'}); 1752 1753 if ($(this).hasClass(pinType2)) 1754 { 1755 1756 if (clicked[pinId] == 0) 1757 { 1758 $(this).parent().find('.imapper-content').css('width', '0px'); 1759 if (position == 'left') 1760 $(this).parent().find('.imapper-content').css('margin-left', map_original_width + 'px'); 1761 } 1762 else 1763 { 1764 $(this).parent().find('.imapper-content').css('width', map_original_width + 'px'); 1765 if (position == 'left') 1766 $(this).parent().find('.imapper-content').css('margin-left', '0px'); 1767 } 1768 1769 1770 } 1771 else if ($(this).hasClass(pinType1)) 1772 { 1773 if (position == 'left' || position == 'right') 1774 { 1775 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'height': cHeight[pinId], 'top': '', 'bottom': '0px'}); 1776 1777 var bottom = cHeight[pinId];
1778 var bottom_content = cHeight[pinId] + (75 - radius); 1779 $(this).parent().find('.imapper-content-tab').each(function() { 1780 $(this).css({'width': map_original_width, 'height': '75px', 'bottom': bottom}); 1781 $(this).find('a').css({'height': '75px', 'font-size': '24px'}); 1782 bottom += 75 - radius; 1783 }); 1784 $(this).parent().find('.imapper-content-additional').each(function() { 1785 $(this).css({'width': map_original_width, 'bottom': bottom_content}); 1786 bottom_content += 75 - radius; 1787 }); 1788 } 1789 else if (position == 'top' || position == 'bottom') 1790 { 1791 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'width': cWidth[pinId], 'left': '', 'right': '0px'}); 1792 1793 var right = cWidth[pinId]; 1794 var right_content = cWidth[pinId] + (75 - radius); 1795 $(this).parent().find('.imapper-content-tab').each(function() { 1796 $(this).css({'height': map_original_height, 'width': '75px', 'right': right}); 1797 $(this).find('a').css({'width': '75px', 'font-size': '24px', 'height': map_original_height}); 1798 right += 75 - radius; 1799 }); 1800 $(this).parent().find('.imapper-content-additional').each(function() { 1801 $(this).css({'height': map_original_height, 'right': right_content}); 1802 right_content += 75 - radius; 1803 }); 1804 } 1805 } 1806 1807 $(this).parent().find('.imapper-content-header').css({'width': map_original_width - 30 + 'px', 'font-size': parseInt($(this).parent().find('.imapper-content-header').css('font-size')) * 2 + 'px', 1808 'padding-left': '20px'}); 1809 1810 var textHeight = $(this).parent().find('.imapper-content').height() - $(this).parent().find('.imapper-content-header').height() - 50; 1811 $(this).parent().find('.imapper-content-text').css({'width': map_original_width - 30 + 'px', 'height': textHeight, 'margin-top': '70px', 1812 'font-size': parseInt($(this).parent().find('.imapper-content-text').css('font-size')) * 2 + 'px', 'padding-left': '20px'}); 1813 1814 $(this).parent().find('.imapper-content-text').each(function() { 1815 $(this).mCustomScrollbar('update'); 1816 }); 1817 1818 $(this).parent().find('.imapper-arrow').css('display', 'none'); 1819 $(this).parent().find('.imapper-arrow-border').css('display', 'none'); 1820 $(this).parent().find('.imapper-triangle-border').css('display', 'none'); 1821 1822 // Set plugin root dir url for close button 1823 pluginUrl = image_mapper_frontend_js_data.plugin_root_url; 1824 1825 $(this).parent().find('.imapper-content-wrapper').append('<img class="imapper-close-button" src="' + pluginUrl + 'images/close.jpg">'); 1826 $(this).parent().find('.imapper-close-button').css({'position': 'absolute', 'right': '30px', 'top': '25px', 'z-index': '100', 'cursor': 'pointer'}); 1827 }); 1828 } 1829 1830 $(window).resize(function() { 1831 $("div[id*='imagemapper']").each( function() { 1832 1833 var id = $(this).attr('id').substring(11, $(this).attr('id').indexOf('-')); 1834 1835 var wrapperWidth = $('#imapper' + id + '-map-image').css('width');
1836 $('.imapper'+id+'-content-below').css('maxWidth',wrapperWidth); 1837 /** 1838 * New code for responosive 1839 */ 1840 1841 /** 1842 * New code for respononsive 1843 */ 1844 var parent_width = ($(this).parent().width() < map_original_width) ? $(this).parent().width() : map_original_width; 1845 multiplierArea = parent_width / map_original_width; 1846 if (settings.pinScalingCoefficient!=0) { 1847 multiplier = settings.pinScalingCoefficient; 1848 1849 } 1850 else { 1851 multiplier = multiplierArea; 1852 } 1853 /** 1854 * New code for responsivness 1855 */ 1856 if((my_use_new_code_responsive)&&(settings.pinScalingCoefficient==0)){ 1857 if ($(window).width() > 600 && settings.itemDesignStyle == 'responsive'){ 1858 var my_w_12=$('#imapper' + id + '-map-image').data('w'); 1859 var my_h_12=$('#imapper' + id + '-map-image').data('h'); 1860 //console.log('My w',{w:my_w_12,h:my_h_12}); 1861 //var map_original_size = imapperGetOriginalSize('#imapper' + id + '-map-image'); 1862 if((my_w_12!=''&&my_h_12!='')){ 1863 map_original_width=parseInt(my_w_12); 1864 map_original_height=parseInt(my_h_12); 1865 } 1866 multiplierArea=1; 1867 multiplier=1; 1868 parent_width = ($(this).parent().width() < map_original_width) ? $(this).parent().width() : map_original_width; 1869 1870 }else if(($(window).width()<600)&&settings.itemDesignStyle == 'responsive'){ 1871 1872 var my_w_12=$('#imapper' + id + '-map-image').data('w'); 1873 var my_h_12=$('#imapper' + id + '-map-image').data('h'); 1874 //console.log('My w',{w:my_w_12,h:my_h_12}); 1875 var map_original_size = imapperGetOriginalSize('#imapper' + id + '-map-image'); 1876 if((my_w_12!=''&&my_h_12!='')){ 1877 map_original_width=parseInt(my_w_12); 1878 map_original_height=parseInt(my_h_12); 1879 } 1880 var my_c_12=map_original_width/map_original_height; 1881 if(my_debug_12){ 1882 console.log('Coeff',{my_c_12:my_c_12}); 1883 } 1884 //map_original_width=600; 1885 1886 if(my_c_12>1){ 1887 //var my_c12_12=map_height/map_original_width; 1888 //if(map_original_width>600){ 1889 var c=map_original_width/600; 1890 1891 map_original_width=600; 1892 1893 map_original_height=map_original_width/my_c_12; 1894 1895 //} 1896 }else { 1897 //if(map_original_width>600){ 1898 var c=map_original_width/600; 1899 map_original_width=600; 1900 map_original_height=map_original_width/my_c_12; 1901 //map_original_height=map_original_width*c; 1902 //else map_original_height=map_original_width/c; 1903 1904 //} 1905 } 1906 multiplierArea = parent_width / map_original_width; 1907 1908 multiplier=multiplierArea; 1909 } 1910 } 1911 /** 1912 * New code for multiplier 1913 */ 1914 1915 $(this).css('width', parent_width); 1916 1917 1918 if (multiplier <= 1)//ratio of available width and original width of the image if the image is wider than the container 1919 { 1920 1921 $(this).find('.imapper-pin-wrapper > img').parent().css('transform', 'scale(' + multiplier + ')'); 1922 1923 var windowWidth = parseInt($(window).width()); 1924 if (settings.pinScalingCoefficient!=0 && windowWidth<600 && settings.itemDesignStyle == 'responsive' ) { 1925 $(this).find('.imapper-pin-wrapper > img ~ .imapper-content-wrapper').css({'transform': 'scale(' + (multiplierArea/multiplier) + ')','transform-origin':'0% 0%', 1926 '-webkit-transform-origin':'0% 0%', 1927 '-moz-transform-origin':'0% 0%', 1928 '-ms-transform-origin':'0% 0%', 1929 '-o-transform-origin':'0% 0%'}); 1930 } 1931 1932 1933 } 1934 1935 var windowWidth = parseInt($(window).width()); 1936 1937 if (windowWidth>600 || settings.itemDesignStyle == 'fluid') { 1938 1939 $(this).find('.imapper-pin-wrapper > img ~ .imapper-content-wrapper').each(function(){ 1940 var openPosition = $(this).parent().data('open-position'); 1941 switch(openPosition) { 1942 case 'top': 1943 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'center bottom','-webkit-transform-origin':'center bottom','-moz-transform-origin':'center bottom','-ms-transform-origin':'center bottom','-o-transform-origin':'center bottom'}); 1944 break; 1945 case 'bottom': 1946 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'center top','-webkit-transform-origin':'center top','-moz-transform-origin':'center top','-ms-transform-origin':'center top','-o-transform-origin':'center top'}); 1947 break; 1948 case 'left': 1949 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'right center','-webkit-transform-origin':'right center','-moz-transform-origin':'right center','-ms-transform-origin':'right center','-o-transform-origin':'right center'}); 1950 break; 1951 case 'right': 1952 $(this).css({'transform': 'scale(' + (multiplier) + ')','transform-origin':'left center','-webkit-transform-origin':'left center','-moz-transform-origin':'left center','-ms-transform-origin':'left center','-o-transform-origin':'left center'}); 1953 break; 1954 } 1955 1956 });
1957 } 1958 1959 1960 $(this).find('.imapper-pin-wrapper > .imapper-area-pin').parent().css('transform', 'scale(' + multiplierArea + ')'); 1961 1962 1963 $(this).find('.imapper-content-text').each(function() { 1964 $(this).mCustomScrollbar('update'); 1965 }); 1966 1967 if ($(window).width() <= 600 && designStyle == 'responsive') 1968 { 1969 $('.imapper' + id + '-pin').each(function() { 1970 var pinId = getPinId($(this)); 1971 var positionLeft = (-parseInt($(this).parent().css('left')) / parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1972 $(this).parent().css('transform').indexOf(',')))) + 'px'; 1973 1974 var positionTop = (-parseInt($(this).parent().css('top')) / parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1975 $(this).parent().css('transform').indexOf(',')))) + 'px'; 1976 1977 var parentTopPercent = parseInt($(this).parent().data('top'))/100; 1978 var mapHeight = parseInt($(this).closest('.imagemapper-wrapper').height()); 1979 var part1 = mapHeight*parentTopPercent / parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1980 $(this).parent().css('transform').indexOf(','))); 1981 var iconHeight = parseInt($(this).height()) * parseFloat($(this).parent().css('transform').substring($(this).parent().css('transform').indexOf('(') + 1, 1982 $(this).parent().css('transform').indexOf(','))); 1983 positionTop = - (part1) + "px"; 1984 1985 var position = $(this).parent().data('open-position'); 1986 1987 var radius = parseInt($(this).parent().find('.imapper-content').not('.imapper-content-additional').css('border-bottom-right-radius')) / 2 + 1; 1988 1989 var tNumber = parseInt($(this).siblings('.imapper-value-tab-number').html()); 1990 cHeight[pinId] = map_original_height - ((tNumber > 1) ? tNumber : 0) * (75 - radius); 1991 cWidth[pinId] = map_original_width - ((tNumber > 1) ? tNumber : 0) * (75 - radius); 1992 1993 $(this).parent().find('.imapper-content-wrapper').css({'top': positionTop, 'left': positionLeft, 'width': map_original_width + 'px', 'height': map_original_height + 'px', 'z-index': '15'}); 1994 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'top': '0px', 'left': '0px', 'width': map_original_width + 'px', 'height': map_original_height + 'px'}); 1995 1996 if ($(this).hasClass(pinType2)) 1997 { 1998 if (clicked[pinId] == 0) 1999 { 2000 $(this).parent().find('.imapper-content').css('width', '0px'); 2001 if (position == 'left') 2002 $(this).parent().find('.imapper-content').css('margin-left', map_original_width + 'px'); 2003 } 2004 else 2005 { 2006 $(this).parent().find('.imapper-content').css('width', map_original_width + 'px'); 2007 if (position == 'left') 2008 $(this).parent().find('.imapper-content').css('margin-left', '0px'); 2009 } 2010 } 2011 else if ($(this).hasClass(pinType1)) 2012 { 2013 tab_clicked[pinId] = 1; 2014 if (position == 'left' || position == 'right') 2015 { 2016 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'height': cHeight[pinId], 'top': '', 'bottom': '0px'}); 2017 2018 2019 var bottom = cHeight[pinId]; 2020 var bottom_content = cHeight[pinId] + (75 - radius); 2021 $(this).parent().find('.imapper-content-tab').each(function() { 2022 $(this).css({'width': map_original_width, 'height': '75px', 'bottom': bottom}); 2023 $(this).find('a').css({'height': '75px', 'font-size': '24px'}); 2024 bottom += 75 - radius; 2025 }); 2026 $(this).parent().find('.imapper-content-additional').each(function() { 2027 $(this).css({'width': map_original_width, 'height': '0px', 'bottom': bottom_content}); 2028 bottom_content += 75 - radius; 2029 }); 2030 } 2031 else if (position == 'top' || position == 'bottom') 2032 { 2033 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'width': cWidth[pinId], 'left': '', 'right': '0px'}); 2034 2035 var right = cWidth[pinId];
2036 var right_content = cWidth[pinId] + (75 - radius); 2037 $(this).parent().find('.imapper-content-tab').each(function() { 2038 $(this).css({'height': map_original_height, 'width': '75px', 'right': right}); 2039 $(this).find('a').css({'width': '75px', 'font-size': '24px', 'height': map_original_height}); 2040 right += 75 - radius; 2041 }); 2042 $(this).parent().find('.imapper-content-additional').each(function() { 2043 $(this).css({'height': map_original_height, 'width': '0px', 'right': right_content}); 2044 right_content += 75 - radius; 2045 }); 2046 } 2047 } 2048 2049 $(this).parent().find('.imapper-content-header').css({'width': map_original_width - 30 + 'px', 'font-size': parseInt(contentHeaderOld[pinId][1]) * 2 + 'px', 'padding-left': '20px'}); 2050 2051 var textHeight = $(this).parent().find('.imapper-content').height() - $(this).parent().find('.imapper-content-header').height() - 50; 2052 $(this).parent().find('.imapper-content-text').css({'width': map_original_width - 30 + 'px', 'height': textHeight, 'margin-top': '70px', 'font-size': parseInt(contentTextOld[pinId][3]) * 2 + 'px', 2053 'padding-left': '20px'}); 2054 2055 $(this).parent().find('.imapper-content-text').each(function() { 2056 $(this).mCustomScrollbar('update'); 2057 }); 2058 2059 $(this).parent().find('.imapper-arrow').css('display', 'none'); 2060 $(this).parent().find('.imapper-arrow-border').css('display', 'none'); 2061 $(this).parent().find('.imapper-triangle-border').css('display', 'none'); 2062 2063 var pos = $(this).attr('src').indexOf('/images/'); 2064 pluginUrl = $(this).attr('src').substring(0, pos); 2065 2066 $(this).parent().find('.imapper-content-wrapper').append('<img class="imapper-close-button" src="' + pluginUrl + '/images/close.jpg">'); 2067 $(this).parent().find('.imapper-close-button').css({'position': 'absolute', 'right': '30px', 'top': '25px', 'z-index': '100', 'transform': 'scale('+multiplierArea+')', 'cursor': 'pointer', 'box-shadow': 'none'}); 2068 2069 }); 2070 } 2071 else if ($(window).width() > 600 && designStyle == 'responsive') 2072 { 2073 $('.imapper' + id + '-pin').each(function() { 2074 var pinId = getPinId($(this)); 2075 var position = $(this).parent().data('open-position'); 2076 2077 cHeight[pinId] = height; 2078 cWidth[pinId] = width; 2079 2080 $(this).parent().find('.imapper-content-wrapper').css({'top': contentWrapperOld[pinId][0], 'left': contentWrapperOld[pinId][1], 'width': contentWrapperOld[pinId][2], 2081 'height': contentWrapperOld[pinId][3], 'z-index': contentWrapperOld[pinId][4]}); 2082 2083 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'top': contentOld[pinId][0], 'left': contentOld[pinId][1], 'width': contentOld[pinId][2], 'height': contentOld[pinId][3]}); 2084 2085 if ($(this).hasClass(pinType2) && position == 'left') 2086 { 2087 if (clicked[pinId] == 0) 2088 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('margin-left', width); 2089 else 2090 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('margin-left', '0px'); 2091 } 2092 else if ($(this).hasClass(pinType1)) 2093 { 2094 tab_clicked[pinId] = 1; 2095 if (position == 'left' || position == 'right') 2096 { 2097 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css('top', ''); 2098 $(this).parent().find('.imapper-content-tab').each(function(index) { 2099 $(this).css({'width': contentTabOld[pinId][index][0], 'height': contentTabOld[pinId][index][1], 'bottom': contentTabOld[pinId][index][2]}); 2100 $(this).find('a').css({'height': '', 'font-size': '12px'}); 2101 }); 2102 $(this).parent().find('.imapper-content-additional').each(function(index) { 2103 $(this).css({'width': contentAdditionalOld[pinId][index][0], 'height': contentAdditionalOld[pinId][index][1], 'bottom': contentAdditionalOld[pinId][index][2]}); 2104 }); 2105 } 2106 else if (position == 'top' || position == 'bottom') 2107 { 2108 $(this).parent().find('.imapper-content').not('.imapper-content-additional').css({'top': '', 'left': ''}); 2109 $(this).parent().find('.imapper-content-tab').each(function(index) { 2110 $(this).css({'width': contentTabOld[pinId][index][0], 'height': contentTabOld[pinId][index][1], 'right': contentTabOld[pinId][index][3]}); 2111 $(this).find('a').css({'width': '', 'font-size': '12px', 'height': contentTabOld[pinId][index][1]}); 2112 });
2113 $(this).parent().find('.imapper-content-additional').each(function(index) { 2114 $(this).css({'width': contentAdditionalOld[pinId][index][0], 'height': contentAdditionalOld[pinId][index][1], 'right': contentAdditionalOld[pinId][index][3]}); 2115 }); 2116 } 2117 } 2118 2119 $(this).parent().find('.imapper-content-header').css({'width': contentHeaderOld[pinId][0], 'font-size': contentHeaderOld[pinId][1], 'padding-left': contentHeaderOld[pinId][2]}); 2120 $(this).parent().find('.imapper-content-text').css({'width': contentTextOld[pinId][0], 'height': contentTextOld[pinId][1], 'margin-top': contentTextOld[pinId][2], 2121 'font-size': contentTextOld[pinId][3], 'padding-left': contentTextOld[pinId][4]}); 2122 2123 $(this).parent().find('.imapper-content-text').each(function() { 2124 $(this).mCustomScrollbar('update'); 2125 }); 2126 2127 $(this).parent().find('.imapper-arrow').css('display', 'block'); 2128 $(this).parent().find('.imapper-arrow-border').css('display', 'block'); 2129 $(this).parent().find('.imapper-triangle-border').css('display', 'block'); 2130 2131 $(this).parent().find('.imapper-close-button').remove(); 2132 2133 }); 2134 } 2135 }); 2136 }); 2137 2138 }); 2139 2140 } 2141 2142 function getPinId(obj) { 2143 return obj.attr('id').substring(obj.attr('id').indexOf('-pin') + 4); 2144 } 2145 2146 //function parameter is src of the image, return value is an array with the original image width and height - doesn't work in IE8 or lower 2147 function imapperGetOriginalSize(image) 2148 { 2149 var img = new Image(); 2150 img.src = $(image).attr('src'); 2151 var original_size = new Array(); 2152 2153 original_size[0] = img.naturalWidth; 2154 original_size[1] = img.naturalHeight; 2155 2156 return original_size; 2157 2158 } 2159 2160 function addOverlay(obj, id) 2161 { 2162 obj.addClass('imapper-no-overlay').closest('.imapper-pin-wrapper').siblings('#imapper'+id+'-map-image').wrap('<div class="imapper-overlay-wrapper"></div>'); 2163 } 2164 2165 function imapperClearMap(obj, id, clicked) { 2166 2167 $('.imapper' + id + '-pin').each(function() { 2168 var pid = getPinId($(this)); 2169 if (clicked[pid] == 1) 2170 $(this).trigger('click'); 2171 });
2172 2173if ($('#imapper'+id+'-map-image').parent().hasClass('imapper-overlay-wrapper')) { 2174 2175 $('#imapper'+id+'-map-image').unwrap().siblings('.imapper-pin-wrapper').children().removeClass('imapper-no-overlay'); 2176} 2177 2178 } 2179 2180 function initAreaPinsBlur(settings, id){ 2181 $('.imapper' + id + '-pin-wrapper').each(function(){ 2182 2183 if (settings.mapOverlay && $(this).children('.imapper-area-pin').length>0) { 2184 2185 var img = $('#imapper'+id+'-map-image'); 2186 var original_size = imapperGetOriginalSize(img); 2187 var imgWidth = parseFloat(img.css('width')); 2188 var imgHeight = parseFloat(img.css('height')); 2189 2190 var pinWrapperLeft = parseFloat($(this).position().left)*original_size[0]/imgWidth; 2191 var pinWrapperTop = Math.abs(parseFloat($(this).position().top))*original_size[1]/imgHeight; 2192 2193 var areaPin = $(this).children('.imapper-area-pin'); 2194 2195 var areaPinLeft = parseFloat($(this).children('.imapper-area-pin').css('width'))/2; 2196 2197 var areaPinTop = Math.abs(parseFloat($(this).children('.imapper-area-pin').css('height'))); 2198 2199 var areaPinBorderLeft = parseFloat(areaPin.css('border-left-width')); 2200 2201 2202 var areaPinBorderTop = parseFloat(areaPin.css('border-top-width')); 2203 2204 2205 $(this).children('.imapper-area-pin').find('img').css({'left':-pinWrapperLeft+areaPinLeft-areaPinBorderLeft+'px','top':-pinWrapperTop+areaPinTop-areaPinBorderTop+'px'}); 2206 } 2207 2208 }); 2209 } 2210 2211 function imapperInit(id, settings)//creates the html code for mapper instance 2212 { 2213 var itemOpenStyle = settings.itemOpenStyle, itemDesignStyle = settings.itemDesignStyle, pinClickAction = settings.pinClickAction, showAllCategory = settings.showAllCategory, allCategoryText = settings.allCategoryText, lightboxGallery = settings.lightboxGallery, itemClickAction = ''; 2214 2215 cats = ''; 2216 var tempCat; 2217 2218 $('#imapper' + id + '-map-image').css('max-width', '100%'); 2219 2220 if (settings.blurEffect) 2221 $('#imapper' + id + '-map-image').addClass('imapper-blur-effect'); 2222 2223 if (settings.mapOverlay) { 2224 2225 $('#imagemapper' + id + '-wrapper .imapper-area-pin').append($('#imapper' + id + '-map-image').clone()); 2226 $('#imagemapper' + id + '-wrapper .imapper-area-pin img').removeAttr('id').removeClass(); 2227 } 2228 2229 $('#imagemapper' + id + '-wrapper').after('<div class="imapper-content-below imapper-content-below-invisible imapper'+id+'-content-below"></div>'); 2230 2231 var wrapperWidth = $('#imapper' + id + '-map-image').css('width'); 2232 $('.imapper'+id+'-content-below').css({'maxWidth':wrapperWidth,'display':'none'}); 2233 2234 $('#imagemapper' + id + '-wrapper').children('.imapper-pin-wrapper').each(function() {//for each pin wrapper 2235 var pinImg = $(this).children('.imapper' + id + '-pin');//pin image 2236 var pinId = getPinId(pinImg);//pin id 2237 var pinSrc = pinImg.attr('src');//pin image src 2238 var dataLeft = ($(this).attr('data-left') !== undefined) ? $(this).attr('data-left') : '50%'; 2239 var dataTop = ($(this).attr('data-top') !== undefined) ? $(this).attr('data-top') : '50%'; 2240 var dataOpenPosition = ($(this).attr('data-open-position') !== undefined) ? $(this).attr('data-open-position') : 'left'; 2241 var dataPinColor = ($(this).attr('data-pin-color') !== undefined) ? $(this).attr('data-pin-color') : '#0000ff'; 2242 var dataPinIcon = ($(this).attr('data-pin-icon') !== undefined) ? $(this).attr('data-pin-icon') : 'icon-plane'; 2243 var dataImapperLink = ($(this).attr('data-imapper-link') !== undefined) ? $(this).attr('data-imapper-link') : ''; 2244 var itemClickAction = ($(this).attr('data-imapper-click-action') !== undefined) ? $(this).attr('data-imapper-click-action') : pinClickAction; 2245 var prettyPhotoWidth = ($(this).attr('data-imapper-lightbox-width') !== undefined) ? $(this).attr('data-imapper-lightbox-width') : '100%'; 2246 var prettyPhotoHeight = ($(this).attr('data-imapper-lightbox-height') !== undefined) ? $(this).attr('data-imapper-lightbox-height') : '100%'; 2247 var imapperContentWrapper = $(this).children('.imapper-content-wrapper'); 2248 var dataTextColor = (imapperContentWrapper.attr('data-text-color') !== undefined) ? imapperContentWrapper.attr('data-text-color') : '#dbdbdb'; 2249 var dataBackColor = (imapperContentWrapper.attr('data-back-color') !== undefined) ? imapperContentWrapper.attr('data-back-color') : '#1fb896'; 2250 var dataBorderColor = (imapperContentWrapper.attr('data-border-color') !== undefined) ? imapperContentWrapper.attr('data-border-color') : '#1fb896'; 2251 var dataBorderRadius = (imapperContentWrapper.attr('data-border-radius') !== undefined) ? imapperContentWrapper.attr('data-border-radius') : '10px'; 2252 var dataWidth = (imapperContentWrapper.attr('data-width') !== undefined) ? imapperContentWrapper.attr('data-width') : '200px'; 2253 var dataHeight = (imapperContentWrapper.attr('data-height') !== undefined) ? imapperContentWrapper.attr('data-height') : '150px'; 2254 var dataFont = (imapperContentWrapper.attr('data-font') !== undefined) ? imapperContentWrapper.attr('data-font') : 'Arial'; 2255 var imapperContent = imapperContentWrapper.children('.imapper-content'); 2256 var dataTabNumber = imapperContent.length; 2257 2258 if (pinImg.hasClass('iMapper-pin-1')) { 2259 pinImg.addClass('imapper-pin-type-1'); 2260 pinImg.css({'color':dataPinColor}); 2261 } 2262 2263 2264 // Why are the image elements added to the imapper-pretty-photo links? Because pretty photo plugin adds some weird characters above the image, when it can't find the alt attribute 2265 if (itemClickAction == 'lightboxImage') { 2266 if (lightboxGallery) 2267 pinImg.after('<a class="imapper-pretty-photo" style="display:none;" rel="prettyPhoto[imapper-gallery-'+id+']" alt="" href="'+dataImapperLink+'?width='+prettyPhotoWidth+'&height='+prettyPhotoHeight+'"><img href="'+dataImapperLink+'" style="display:none !important;" alt=" " /></a>'); 2268 else 2269 pinImg.after('<a class="imapper-pretty-photo" style="display:none;" rel="prettyPhoto" alt="altText" href="'+dataImapperLink+'?width='+prettyPhotoWidth+'&height='+prettyPhotoHeight+'"><img href="'+dataImapperLink+'" alt=" " style="display:none !important;" /></a>'); 2270 } else if (itemClickAction == 'lightboxIframe') { 2271 if (lightboxGallery) 2272 pinImg.after('<a class="imapper-pretty-photo" rel="prettyPhoto[imapper-gallery-'+id+']" href="'+dataImapperLink+'?iframe=true&width='+prettyPhotoWidth+'&height='+prettyPhotoHeight+'"><img alt=" " style="display:none !important;" /></a>'); 2273 else 2274 pinImg.after('<a class="imapper-pretty-photo" rel="prettyPhoto" href="'+dataImapperLink+'?iframe=true&width='+prettyPhotoWidth+'&height='+prettyPhotoHeight+'"><img alt=" " style="display:none !important;" /></a>'); 2275 } 2276 2277 2278 2279 $(this).css({'position': 'absolute', 'left': dataLeft, 'top': dataTop});//setting position relative to the map 2280 2281 if (dataTabNumber > 1) 2282 $(this).append('<div id="imapper' + id + '-value-item' + pinId + '-tab-number" class="imapper-value-tab-number" >' + dataTabNumber + '</div>'); 2283 2284 imapperContentWrapper.css('color', dataTextColor); 2285 imapperContentWrapper.append('<div class="imapper-arrow" style="border-color: ' + dataBackColor + ' transparent transparent transparent;"></div>'); 2286 2287 tempCat = $(this).data('category') 2288 if (cats.indexOf(tempCat)==-1 && tempCat !== undefined) { 2289 cats += '<div class="imapper-category-item-wrapper"><a class="imapper-category-button" href="'+tempCat+'">'+tempCat+'</a><div class="imapper-category-arrow-bottom"></div></div>'; 2290 } 2291 2292 2293 2294 imapperContent.css({'background-color': dataBackColor, 'border-color': dataBorderColor, 'border-radius': dataBorderRadius, 'width': dataWidth, 'height': dataHeight, 'font-family': '"' + dataFont + '"'}); 2295 2296 if (pinSrc!==undefined) { 2297 if ( pinSrc.indexOf('images/icons/2') >= 0) 2298 { 2299 imapperContent.css('height', '75px');//set fixed content height for the sliding pin 2300 if (dataOpenPosition != 'left' && dataOpenPosition != 'right') 2301 { 2302 dataOpenPosition = left; 2303 $(this).attr('data-open-position', 'left'); 2304 } 2305 imapperContentWrapper.append('<div class="triangle-' + dataOpenPosition + '-border imapper-triangle-border"></div>'); 2306 } 2307 else 2308 imapperContentWrapper.append('<div class="arrow-' + dataOpenPosition + '-border imapper-arrow-border"></div>'); 2309 } 2310 2311 if (dataTabNumber > 1) 2312 for (var i = 1; i <= dataTabNumber; i++) 2313 { 2314 if (i == 1) 2315 { 2316 var after = '#imapper' + id + '-pin' + pinId + '-content'; 2317 var contentTab = '-content'; 2318 } 2319 else 2320 { 2321 var after = '#imapper' + id + '-pin' + pinId + '-content-' + i; 2322 var contentTab = '-content-' + i; 2323 }
2324 // $('<div id="imapper' + id + '-pin' + pinId + contentTab + '-tab" class="imapper-content-tab" style="background-color: ' + dataBackColor + ';"><a href="#" style="color: ' + dataBorderColor + ';">' + i + '</a></div>').insertAfter(after);//append the element which contains the number of the pin 2325 } 2326 if (pinSrc!==undefined) { 2327 if (pinSrc.indexOf('images/icons/3/') >= 0)//add shadow for an element with the shadow 2328 $(this).prepend('<img id="imapper' + id + '-pin' + pinId + '" class="imapper-pin-shadow" src="' + pinSrc.substring(0, pinSrc.length - 5) + '1-1.png">') 2329 2330 if (pinSrc.indexOf('images/icons/5/') >= 0)//add icon and color for the pin with fawesome icons 2331 { 2332 $(this).children('.imapper' + id + '-pin').after('<i id="imapper' + id + '-pin' + pinId + '-icon" class="imapper-pin-icon fawesome icon-large ' + dataPinIcon + '"></i>'); 2333 $(this).children('.imapper' + id + '-pin').after('<div id="imapper' + id + '-pin' + pinId + '-color" class="imapper-pin-color" style="background-color: ' + dataPinColor + ';"></div>'); 2334 } 2335 2336 2337 } 2338 2339 2340 }); 2341 if (cats.length!=0 && settings.categories==true) { 2342 if (showAllCategory) 2343 cats = '<div class="imapper-category-item-wrapper imapper-category-active"><a class="imapper-category-button" href="All">'+allCategoryText+'</a><div class="imapper-category-arrow-bottom"></div></div>' + cats; 2344 cats = '<div class="imapper'+id+'-categories-wrapper imapper-categories-wrapper">' +cats; 2345 $('#imagemapper' + id + '-wrapper').before(cats); 2346 } 2347 2348 $('.imapper-pretty-photo').prettyPhoto({social_tools:false, theme:'pp_default'}); 2349 2350 } 2351 2352})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.