Link Vorschau "Bubble"

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hier stelle ich ein generisches Script vor, mit dem ihr beliebige Inhalte unter einem Link platzieren könnt.
    == Script ==

    Quellcode

    1. /**
    2. * Bubble Helper Class
    3. *
    4. * example usage
    5. * Bubble.init("externalURL", function (D) {
    6. * return D.href + '<br /><img src="easy-coding-logo.png">';
    7. * });
    8. *
    9. * @author Torben Brodt <easy-coding.de>
    10. * @url http://trac.easy-coding.de/trac/wcf/wiki/Thumbshots
    11. * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-3.0.html>
    12. */
    13. var Bubble = {
    14. Cursor: {
    15. x: 0,
    16. y: 0
    17. },
    18. Offset: {
    19. x: 0,
    20. y: 0
    21. },
    22. blacklist : {},
    23. div: document.getElementById("BubbleDiv"),
    24. init: function (ParentID, showRef) {
    25. Bubble.create();
    26. Bubble.addEvent(window, "mousemove", Bubble.getCurPos);
    27. Bubble.addEvent(window, "resize", Bubble.getOffset);
    28. Bubble.addEvent(window, "scroll", Bubble.getOffset);
    29. var B = Bubble.getElementsByClassName(ParentID), A = B.length;
    30. for (i = 0; i < A; i++) {
    31. if(Bubble.blacklist.href && !B[i].href.match(Bubble.blacklist.href)) {
    32. Bubble.addEvent(B[i], "mouseover", function () {
    33. Bubble.show(this, showRef);
    34. });
    35. Bubble.addEvent(B[i], "mouseout", function () {
    36. Bubble.hide();
    37. });
    38. }
    39. }
    40. },
    41. /**
    42. * currently only href is supported
    43. */
    44. disallow: function (attr, str) {
    45. Bubble.blacklist.href = str;
    46. },
    47. show: function (D, showRef) {
    48. Bubble.div.style.display = "block";
    49. Bubble.div.innerHTML = showRef(D);
    50. Bubble.getCurPos();
    51. Bubble.getOffset();
    52. Bubble.div.style.left = (Bubble.Cursor.x + Bubble.Offset.x) + "px";
    53. Bubble.div.style.top = (Bubble.Cursor.y + Bubble.Offset.y) + "px";
    54. },
    55. hide: function () {
    56. Bubble.div.innerHTML = "";
    57. Bubble.div.style.display = "none";
    58. },
    59. create: function () {
    60. Bubble.div = document.createElement("div");
    61. Bubble.div.id = "BubbleDiv";
    62. document.getElementsByTagName("body")[0].appendChild(Bubble.div);
    63. Bubble.div.style.position = 'absolute';
    64. },
    65. getOffset: function () {
    66. var Px = 10, Py = 20;
    67. var Cx = Bubble.Cursor.x, Cy = Bubble.Cursor.y;
    68. var w = Bubble.div.clientWidth || 150, h = Bubble.div.clientHeight || 150;
    69. var Ww, Wh, Wx, Wy;
    70. var E = window;
    71. if (typeof(E.innerWidth) === "number") {
    72. Ww = E.innerWidth;
    73. Wh = E.innerHeight;
    74. Wx = E.pageXOffset;
    75. Wy = E.pageYOffset;
    76. } else if (document.documentElement) {
    77. F = document.documentElement;
    78. if (F.clientWidth || F.clientHeight) {
    79. Ww = F.clientWidth;
    80. Wh = F.clientHeight;
    81. Wx = F.scrollLeft;
    82. Wy = F.scrollTop;
    83. }
    84. }
    85. // top right
    86. if ((Cx - Wx) > (Ww / 2) && (Cy - Wy) < h) {
    87. Px = -w - Px;
    88. }
    89. // bottom left
    90. else if ((Cx - Wx) < (Ww / 2) && (Cy - Wy) > (Wh / 2)) {
    91. Py = -h - Py;
    92. }
    93. // bottom right
    94. else if ((Cx - Wx) > (Ww / 2) && (Cy - Wy) > (Wh / 2)) {
    95. Px = -w - Px;
    96. Py = -h - Py;
    97. }
    98. Bubble.Offset = {
    99. x: Px,
    100. y: Py
    101. };
    102. },
    103. getCurPos: function (C) {
    104. C = C ? C : window.event;
    105. if (C && typeof(C.pageX) !== "number" && typeof(C.clientX) === "number") {
    106. C.pageX = C.clientX;
    107. C.pageY = C.clientY;
    108. if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    109. C.pageX += document.body.scrollLeft;
    110. C.pageY += document.body.scrollTop;
    111. } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    112. C.pageX += document.documentElement.scrollLeft;
    113. C.pageY += document.documentElement.scrollTop;
    114. }
    115. }
    116. if(C) {
    117. Bubble.Cursor = {
    118. x: C.pageX,
    119. y: C.pageY
    120. };
    121. }
    122. },
    123. addEvent: function( obj, type, fn ) {
    124. if ( window.addEventListener ) {
    125. obj.addEventListener( type, fn, false );
    126. } else {
    127. obj['e'+type+fn] = fn;
    128. obj[type+fn] = function() {
    129. obj['e'+type+fn]( window.event );
    130. };
    131. obj.attachEvent( 'on'+type, obj[type+fn] );
    132. }
    133. },
    134. getElementsByClassName: function (searchClass) {
    135. var classElements = [], i, j, els, pattern;
    136. els = document.getElementsByTagName('*');
    137. pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
    138. for (i = 0, j = 0; i < els.length; i += 1) {
    139. if (pattern.test(els[i].className)) {
    140. classElements[j] = els[i];
    141. j += 1;
    142. }
    143. }
    144. return classElements;
    145. }
    146. };
    Alles anzeigen


    == Beispiele ==
    === Thumbshots ===

    Quellcode

    1. <script type="text/javascript">
    2. Bubble.init("externalURL", function (D) {
    3. return '<img alt="" style="width:150px;height:100px" src="http://www.m-software.de/screenshot/Screenshot.png?url='+ escape(D.href) +'&commingsoonimg=http://fadeout.de/images/thumbshot.png" />';
    4. });
    5. </script>


    == Demo ==
    demo.easy-coding.de/javascript/bubble/ und demo.easy-coding.de/javascript/bubble/download.zip

    9.476 mal gelesen