| 1 | jQuery(document).ready(function(jQuery){ |
|---|
| 2 | /* CONFIG */ |
|---|
| 3 | // these 2 variables determine popup's gap from the cursor |
|---|
| 4 | var xGap = 10; |
|---|
| 5 | var yGap = 10; |
|---|
| 6 | var MainTitle =""; |
|---|
| 7 | |
|---|
| 8 | var maxTop = 0; |
|---|
| 9 | var maxLeft =0; |
|---|
| 10 | /* END CONFIG */ |
|---|
| 11 | jQuery("#theMainImage").mouseover(function(){ |
|---|
| 12 | // tooltip IMG title remove |
|---|
| 13 | MainTitle = this.title; |
|---|
| 14 | this.title =""; |
|---|
| 15 | }); |
|---|
| 16 | jQuery("#theMainImage").mouseout(function(){ |
|---|
| 17 | // tooltip IMG title restaure |
|---|
| 18 | this.title = MainTitle; |
|---|
| 19 | }); |
|---|
| 20 | |
|---|
| 21 | jQuery("area,a").mouseover(function(e){ |
|---|
| 22 | MainTitle = jQuery("#theMainImage").attr("title"); |
|---|
| 23 | jQuery("#theMainImage").attr("title",""); // for IE |
|---|
| 24 | this.t = this.title; |
|---|
| 25 | // llgbo conf |
|---|
| 26 | var val = this.title.split("||",15); |
|---|
| 27 | if (val[0].length<1) { return; } |
|---|
| 28 | maxLeft = jQuery(window).width(); |
|---|
| 29 | maxTop = jQuery(window).height(); |
|---|
| 30 | // |
|---|
| 31 | this.activate ='ok'; |
|---|
| 32 | this.title = ""; |
|---|
| 33 | this.tt = "<p id='title'>"+val[0]+"</p>"; |
|---|
| 34 | var pid = "dflt"; |
|---|
| 35 | if (this.className != "navThumb") // no picture for navthumb |
|---|
| 36 | {for (var i=1; i<val.length; i++) { |
|---|
| 37 | if ( val[i].toLowerCase().indexOf("<img") == 0) |
|---|
| 38 | { pid = "pict";} |
|---|
| 39 | this.tt += "<p id="+pid+">"+ val[i]+"</p>";} |
|---|
| 40 | } |
|---|
| 41 | jQuery("body").append("<div id='toolTip'>"+this.tt+"</div>"); |
|---|
| 42 | |
|---|
| 43 | var MyTT = jQuery("#toolTip"); |
|---|
| 44 | if (this.id == "Rules") |
|---|
| 45 | { MyTT.css( {'border-color':'#c92'});} |
|---|
| 46 | if (this.id == "RulesEx") |
|---|
| 47 | { MyTT.css( {'border-color':'#d3fed2'}) |
|---|
| 48 | jQuery("#toolTip #title").css({'color':'#d3fed2'});} |
|---|
| 49 | |
|---|
| 50 | updateXY(e); |
|---|
| 51 | MyTT.css("opacity", 0.25) |
|---|
| 52 | .show; |
|---|
| 53 | MyTT.fadeTo(1200,.95); |
|---|
| 54 | }); |
|---|
| 55 | |
|---|
| 56 | jQuery("area,a").mouseout(function(e){ |
|---|
| 57 | if (this.activate =='ok') // mouseout without mouseover we keep the right title |
|---|
| 58 | { this.title = this.t; |
|---|
| 59 | jQuery("#toolTip") |
|---|
| 60 | .fadeOut("slow") |
|---|
| 61 | .remove(); |
|---|
| 62 | jQuery("#theMainImage").attr("title",MainTitle); // for IE |
|---|
| 63 | } |
|---|
| 64 | }); |
|---|
| 65 | jQuery("area,a").mousemove(function(e){ |
|---|
| 66 | updateXY(e); |
|---|
| 67 | }); |
|---|
| 68 | var updateXY = function(e) { |
|---|
| 69 | var xLeft,yCord,xCord; |
|---|
| 70 | var MyTT = jQuery("#toolTip"); |
|---|
| 71 | var wT = MyTT.width() + 6 /* border */+ xGap; |
|---|
| 72 | var hT = MyTT.height() + 6 /* border */+ yGap; |
|---|
| 73 | |
|---|
| 74 | if ( e.pageX < (maxLeft/2) ) // piwigo left |
|---|
| 75 | {xCord = wT *-1;} |
|---|
| 76 | else { |
|---|
| 77 | xCord =( maxLeft < (e.pageX + wT )) ? xCord = wT * -1 : xCord = xGap;} |
|---|
| 78 | xLeft = (e.pageX + xCord < 3 ) ? xLeft = e.pageX + xGap : xLeft = e.pageX + xCord; |
|---|
| 79 | yCord =( maxTop < (e.pageY + hT )) ? yCord = hT * -1 : yCord = yGap; |
|---|
| 80 | MyTT |
|---|
| 81 | .css("top",(e.pageY + yCord) + "px") |
|---|
| 82 | .css("left",(xLeft) + "px"); |
|---|
| 83 | } |
|---|
| 84 | }); |
|---|
