Webseiten und/oder kl. Filme in div-tag


SirToby

Erfahrenes Mitglied
Ich habe folgendes Problem.

Lange suchte ich nach einer schönen Lösung, die Bilder auf meiner Homepage --> http://www.tobyatwork.de vergrößert vernünftig darstellen zu können. Doch leider fehlen mir dazu die nötigen Javascript-Kenntnisse. Auf einer anderen Seite (http://www.drweb.de/javascript/thumbnail.shtml) wurde ich schließlich und endlich fündig. Die Bilder in meiner Galerie zB werden vernünftig angezeigt und der erzeugte div-layer läßt sich dank des Scripts sogar verschieben.
Nun möchte ich aber in so einen DIV-Layer auch simple .html-Seiten oder kl. Filmchen reinladen können, zB von einer Visualisierung oder dergleichen. Leider sind meine bisherigen Bemühungen dahingehend kläglich gescheitert.

In der Hoffnung, hier vll. jemand zu finden, der mir da helfen kann, habe ich mal diesen Post verfasst.

Hat vielleicht jemand eine Idee, wie ich da am besten rangehen könnte, worauf ich achten muss oder so? -- Und bitte..keine Antwort à la "Lern Javascript". Ist mir schon klar, aber alles auf einmal lernen geht nunmal nicht. Peut à peut wächst der Baum. :)
 

SirToby

Erfahrenes Mitglied
Hi!

Links usw. zu includen ist nicht das Problem.

Ich poste mal den quellcode dazu, ist vll. einfacher.

./scripts/load_site.js/
Code:
var ie=document.all
var ns6=document.getElementById&&!document.all


function ieobjekt(){
  return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}


function site_vergroessern(welche, e, position, imgwidth, imgheight){
  if (ie||ns6){
  aufbau=document.getElementById? document.getElementById("zeigedasbild") : document.all.zeigedasbild
  if (position=="center"){
    seite_y_stellung=ns6? parseInt(pageYOffset) : parseInt(ieobjekt().scrollTop)
    horizoposi=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ieobjekt().scrollLeft+ieobjekt().clientWidth/2-imgwidth/2
    vertiposi=ns6? seite_y_stellung+window.innerHeight/2-imgheight/2 : seite_y_stellung+ieobjekt().clientHeight/2-imgheight/2
    if (window.opera && window.innerHeight) //Ausgleich fuer Opera
      vertiposi=seite_y_stellung+window.innerHeight/2-imgheight/2
      vertiposi=Math.max(seite_y_stellung, vertiposi)
  }
  else{
    var horizoposi=ns6? pageXOffset+e.clientX : ieobjekt().scrollLeft+event.clientX
    var vertiposi=ns6? pageYOffset+e.clientY : ieobjekt().scrollTop+event.clientY
  }
  aufbau.style.left=horizoposi+"px"
  aufbau.style.top=vertiposi+"px"
  aufbau.innerHTML='<div align="right" id="leiste"><span id="schliessen_text" onClick="vorschau_zu()">»&nbsp;close</span></div><iframe id="show_site" src="'+welche+'" style="background-color: #9098A0; border: 1px solid #FFFFFF; vertical-align: bottom"></iframe>'
  aufbau.style.visibility="visible"
  return false
  }
  else //falls kein IE 4+ oder NS 6+, zeige das Bild einfach in einem neuen Browser-Fenster
  return true
}


function vorschau_zu(){
  aufbau.style.visibility="hidden"
}


function drag_and_drop(e){
  if (ie&&dragapproved){
    aufbau.style.left=tempx+event.clientX-offsetx+"px"
    aufbau.style.top=tempy+event.clientY-offsety+"px"
  }
  else if (ns6&&dragapproved){
    aufbau.style.left=tempx+e.clientX-offsetx+"px"
    aufbau.style.top=tempy+e.clientY-offsety+"px"
  }
  return false
}


function initiiere_drag(e){
  if (ie&&event.srcElement.id=="leiste"||ns6&&e.target.id=="leiste"){
    offsetx=ie? event.clientX : e.clientX
    offsety=ie? event.clientY : e.clientY

    tempx=parseInt(aufbau.style.left)
    tempy=parseInt(aufbau.style.top)

    dragapproved=true
    document.onmousemove=drag_and_drop
  }
}

document.onmousedown=initiiere_drag
document.onmouseup=new Function("dragapproved=false")


Der Aufruf der Funktion geschieht dann so:
HTML:
<a href=\"../gallery/3d/weinglas.jpg\" onClick=\"return vergroessern('../gallery/3d/weinglas.jpg',event,'center',640,452)\">
                <img src=\"../gallery/3d/weinglas_kl_sepia.gif\" alt=\"Weingl&auml;ser\" title=\"Weingl&auml;ser\" name=\"Weinglas\" onMouseOver=\"document.Weinglas.src='../gallery/3d/weinglas_kl.gif';\" onMouseOut=\"document.Weinglas.src='../gallery/3d/weinglas_kl_sepia.gif';\" style=\"border: 1px solid #484848; vertical-align: bottom;\" />
              </a>

Wenn ich nun als ".src" eine Seite oder ein kl. Video angebe, dann geht des script nimmer. Im Moment weiß ich net warum.

Hier mal ein Link, wie es aussieht: http://www.tobyatwork.de/index.php?act=cgart&cat=3d
 
M

Maik

SirToby hat gesagt.:
Wenn ich nun als ".src" eine Seite oder ein kl. Video angebe, dann geht des script nimmer. Im Moment weiß ich net warum.
Wie heute Morgen schon geschrieben, können HTML-Seiten grundsätzlich nicht mit Javascript in einen DIV-Layer geladen werden.
 

SirToby

Erfahrenes Mitglied
Ergo, ich muss mir für die Anzeige nen grundsätzlich anderes System überlegen.

Meinetwegen ein kl. JS-Script, dass nur den Layer öffnet aber der Inhalt dann über PHP dynamisch includiert wird.

Mal sehen, was mir da so einfällt. Werde die Lösung dann hier mal posten oder als kl. Tutorial veröffentlichen.
 

Forum-Statistiken

Themen
272.356
Beiträge
1.558.615
Mitglieder
187.830
Neuestes Mitglied
hansmeiser