Webseiten und/oder kl. Filme in div-tag

S

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. :)
 
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
 
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.
Zum Vergrößern anklicken....
Wie heute Morgen schon geschrieben, können HTML-Seiten grundsätzlich nicht mit Javascript in einen DIV-Layer geladen werden.
 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück