✔ Bildvorschau mit Zusatzinfos

flokli

flokli

Erfahrenes Mitglied
Hi,
ich hab mich schon ein bisschen in Javascript eingearbeitet, und jetzt würde ich gerne eine Gallery mit ein paar Fotos machen. Dazu hab ich auch schon ein passendes Script gefunden. (hier)
Einziges Problem ist, dass ich den bei Mouseover eingeblendeten div gerne erweitern möchte (mit Länge, Breite, Dateigröße...). Natürlich alles dynamisch.
Kann mir jemand einen Tipp geben, wo ich den Code dazu einfügen soll?
Hier kommt der Code (auch auf angegebener Page herunterzuladen):
HTML: 
<script type="text/javascript" language="JavaScript">
// Init section
   zakroma = "";
   obj_float_div = false;
   active_img_mark = null;
   show_delay = null;
   preloads = new Object;
   gags = new Array;
 
   window.onerror = function() { return true; }
   window.onload = function(e) { if (document.getElementById && document.createElement) tooltip.define(); }

function run_after_body() {
   document.write('<textarea id="gate_to_clipboard" style="display:none;"></textarea>');
   document.onmousemove = document_onmousemove;
   if (window.onscroll) window.onscroll = hide_div();
   document.write('<div class="float" id="div_200" style="left: -3000px; background: #ffffff;"><img id="img_200" class="border_b" width="200" height="150"></div>');
   setInterval("changer();",333);
   for (var i = 4; i <= 4+7; i += 1)  {
      var rnd_200 = i; rnd_200 = (rnd_200 < 10) ? '0' + rnd_200 : rnd_200;
      preloads['loader_'+i] = new Image;
      preloads['loader_'+i].src = zakroma + "/main/200x150/" + rnd_200 + ".gif";
      preloads['loader_'+i].width = 200;
      preloads['loader_'+i].height = 150;
   }
}

function get_obj(id_name) {
   if (document.getElementById) {
      return document.getElementById(id_name);
   } else if (document.all) {
      return document.all[id_name];
   } else {
      return null;
   }
}

function document_onmousemove(e) {

   if ( !obj_float_div ) return;

   var pos_X = 0, pos_Y = 0;
   if ( !e ) e = window.event;
   if ( e ) {
      if ( typeof(e.pageX) == 'number' ) {
         pos_X = e.pageX; pos_Y = e.pageY;
      } else if ( typeof(e.clientX) == 'number' ) {
         pos_X = e.clientX; pos_Y = e.clientY;
         if ( document.body && ( document.body.scrollTop || document.body.scrollLeft ) && !( window.opera || window.debug || navigator.vendor == 'KDE' ) ) {
            pos_X += document.body.scrollLeft; pos_Y += document.body.scrollTop;
         } else if ( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) && !( window.opera || window.debug || navigator.vendor == 'KDE' ) ) {
            pos_X += document.documentElement.scrollLeft; pos_Y += document.documentElement.scrollTop;
         }
      }
   }
 
   var scroll_X = 0, scroll_Y = 0;
   if ( document.body && ( document.body.scrollTop || document.body.scrollLeft ) && !( window.debug || navigator.vendor == 'KDE' ) ) {
      scroll_X = document.body.scrollLeft; scroll_Y = document.body.scrollTop;
   } else if ( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) && !( window.debug || navigator.vendor == 'KDE' ) ) {
      scroll_X = document.documentElement.scrollLeft; scroll_Y = document.documentElement.scrollTop;
   }
 
   var win_size_X = 0, win_size_Y = 0;
   if (window.innerWidth && window.innerHeight) {
      win_size_X = window.innerWidth; win_size_Y = window.innerHeight;
   } else if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
      win_size_X = document.documentElement.clientWidth; win_size_Y = document.documentElement.clientHeight;
   } else if (document.body && document.body.clientWidth && document.body.clientHeight) {
      win_size_X = document.body.clientWidth; win_size_Y = document.body.clientHeight;
   }
 
   pos_X += 15; pos_Y += 15;
 
   if (obj_float_div.offsetWidth && obj_float_div.offsetHeight) {
      if (pos_X - scroll_X + obj_float_div.offsetWidth + 5 > win_size_X) pos_X -= (obj_float_div.offsetWidth + 25);
      if (pos_Y - scroll_Y + obj_float_div.offsetHeight + 5 > win_size_Y) pos_Y -= (obj_float_div.offsetHeight + 20);
   }

   obj_float_div.style.left = pos_X + "px"; obj_float_div.style.top = pos_Y + "px";
 
}

function show_200(img_src,wp_id,img_w,img_h) {
   if (show_delay) {
      clearTimeout(show_delay); show_delay = null;
   } else {
      obj_float_div = get_obj('div_200');
      show_delay = setTimeout('show_200("' + img_src + '","' + wp_id + '",' + img_w + ',' + img_h+ ');', 400);
      return;
   }
   var img_mark = 'img_wp_id_' + wp_id;
   active_img_mark = img_mark;
   if (preloads[img_mark] && preloads[img_mark].complete) {
      swap_img(img_mark);
   } else {
      var rnd_200 = Math.round(Math.random()*4) + 7;
      swap_img('loader_' + rnd_200);
   }
   if ( ! preloads[img_mark] ) {
      preloads[img_mark] = new Image;
      preloads[img_mark].src = zakroma + img_src;
      preloads[img_mark].width = img_w;
      preloads[img_mark].height = img_h;
      preloads[img_mark].onerror = function() { gag(preloads[img_mark],200); }
   }
   show_div('div_200');
}

function changer() {
   if ( !obj_float_div || !preloads[active_img_mark] || !get_obj('img_200')) return;
   if ( get_obj('img_200').src != preloads[active_img_mark].src && preloads[active_img_mark].complete ) swap_img(active_img_mark);
}

function swap_img(img_mark) {
   var obj_base_img = get_obj('img_200');
   if (!obj_base_img) return;
   obj_base_img.src    = preloads[img_mark].src;
   obj_base_img.width  = preloads[img_mark].width;
   obj_base_img.height = preloads[img_mark].height;
}

function show_div(div_mark) {
   if (show_delay) {
      clearTimeout(show_delay); show_delay = null;
   } else {
      obj_float_div = get_obj(div_mark);
      show_delay = setTimeout('show_div("' + div_mark + '");', 400);
      return;
   }
   if ( ! obj_float_div ) return;
   if (obj_float_div.offsetWidth) {
      obj_float_div.style.width = "auto";
      obj_float_div.style.height = "auto";
      if (obj_float_div.offsetWidth > 300) obj_float_div.style.width = "300px";
   }
   document_onmousemove;
   obj_float_div.style.visibility = 'visible';
}

function hide_div() {
   //var rnd_200 = Math.round(Math.random()*4) + 7; swap_img('loader_' + rnd_200);
   clearTimeout(show_delay); show_delay = null;
   if ( ! obj_float_div ) return;
   obj_float_div.style.visibility = 'hidden';
   obj_float_div.style.left = "-3000px";
   obj_float_div = false;
}

function append_to_div(div_mark,doc) {
   var obj_box = get_obj(div_mark);
   if ( obj_box && typeof(obj_box.innerHTML) == 'string' ) obj_box.innerHTML += doc;
}

function gag(object,type) {
   if (gags[object.src]) return;
   if (type == 100) {
      object.src = zakroma + "/main/200x150/gag_100.gif";
      object.height = 75; // äëÿ Opera
      object.style.height = "75px"; // äëÿ Gecko, IE
   } else {
      object.src = zakroma + "/main/200x150/gag_200.gif";
      object.height = 150;
      object.style.height = "150px";
   }
   object.style.display = "block"; // äëÿ Gecko
   gags[object.src] = true;
}
</script>
<script type="text/javascript" language="JavaScript">run_after_body();</script>
<style type="text/css">
.border_b{
   border: 1px solid #000000;
}

.float{
   visibility: hidden;
   position: absolute;
   left: -3000px;
   z-index: 10;
}
</style>
</head>
<body>
<div class="tiny" style="margin-left: 20px; OVERFLOW: hidden; width: 120px" width="120">
<a href="#" target="_blank">
<img class="border_b" src="cosmos.jpg" width="100" height="87" border="0" onMouseOver=show_200("cosmos.jpg","71895",200,150) onMouseOut=hide_div() onerror=gag(this,100)></a>
</div>
(Ich glaube, irgendwo in der Funktion show_div() , bin mir aber nicht sicher...)
 
Zuletzt bearbeitet:
Die Dategröße kannst du mit Javascript allein ganz sicher nicht auslesen, da brauchst du schon ein php-Script, dass du über JS mit XMLHttpRequest aufrufst und dass JS dann den gewünschten Wert übergibt. Dafür benutze bitte die Forensuche, weil wir sowas schon 100 mal hatten.

Für Breite und Höhe müsstest du zuerst ein Image-Objekt erstellen, das Betreffende Bild mit Object.src="URLzumBild" laden und dann height und width abfragen.

Der entsprechende Code müsste in der Funktion stehen, wo das div dann initalisiert wird.
 
Ich habs gefunden...
Es steht vor den </div>...
Wegen Dateigröße und so ist mir das schon klar, wozu gibt es filesize...
Danke wegen der schnellen Antwort!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück