fancybox außerhalb von iframe öffnen

Viruskiller11

Cadet 1st Year
Dabei seit
Dez. 2014
Beiträge
11
Hallo ihr lieben Leute,
bitte dringend um eure hilfe!!!!

meine hp hab ich mal freigeschalten, damit ihr mir besser bei meinem problem helfen könnt. ich wäre euch echt sehr sehr dankbar für eine lösung. hier die hp: www.gerdburger.com

die hp wurde folgendermaßen aufgebaut: index.html ruft die hauptseite auf mit einem iframe, wo alle punkte im menü aufgerufen werden. so auch die fotos.
Problem: die fancybox öffnet nun die fotos, jedoch nur in der größe des iframes. mein ziel ist aber, dass die fotos über das ganze fenster geöffnet werden sollen.
danke für eure hilfe!!!
lg, gerd
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Das wird nichts, ein Frame (egal ob <frame> oder <iframe>) ist ein in sich geschlossenes Element, dessen Grenzen nicht gesprengt werden können und dessen Content keinen Zugriff auf die Umgebung hat (und umgekehrt)

Wenn ich mir die Seite aber so angucke würde ich aber eh sagen: Abreißen, die Überreste verbrennen und die Asche im Marianengraben versenken. Das ist alles semantisch sowas von daneben, dass hier eine Reparatur außer Frage steht. Da hilft nur ein kompletter Neubau: ohne <iframe>, ohne <table> und vor allem auch mit einem Impressum, dass tatsächlich die Bestimmungen von §5 TMG erfüllt.
So wie die Seite jetzt ist, ist sie nicht:
- suchmaschinenfreundlich => niemand wird je drauf landen
- barrierefrei => muss man nicht haben, aber ist immer toll und ergibt sich oftmals automatisch
- für was anderes als Desktops zu gebrauchen... schon mal dran gedacht, dass, je nach Branche, 30-70% der Zugriffe über Mobile Devices kommen?

Also die Sache mit der Fancybox ist hier echt nur ein weiteres Symptom einer Krankheit, die man gern "Spät-90er-Code" nennt
 

Viruskiller11

Cadet 1st Year
Ersteller dieses Themas
Dabei seit
Dez. 2014
Beiträge
11
hi,
danke für die antwort.
naja, egal, wie sehr sie deiner meinung reparaturbedürftig ist, sie funktioniert mit allen bekanntesten browsern, auch tablets und handys wurden getestet. als einfache info-website ist sie zu gebrauchen, mehr muss nicht sein.
weiß jetzt nicht, was bei impressum falsch sein sollte?!

die seite findet man auf allen suchmaschinen, weiß nicht, was du damit meinst, dass man sie nicht findet. sie wurde von vielen leuten getestet.

und habe bereits eine info bekommen, dass die fancybox sehr wohl auch außerhalb eines iframes funktioniert.
lg,
g
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
naja, egal, wie sehr sie deiner meinung reparaturbedürftig ist, sie funktioniert mit allen bekanntesten browsern, auch tablets und handys wurden getestet. als einfache info-website ist sie zu gebrauchen, mehr muss nicht sein.
Ok, dann hör halt nicht darauf, was dir Leute sagen, die mit genau diesem Thema ihren Lebensunterhalt bestreiten. Du weißt sicher alles besser...
Und "kann man notdürftig auf dem Handy angucken, wenn man laufend hin und her zoomed" hat nichts, aber auch GAR NICHTS, mit korrekter Darstellung auf Mobilgeräten zu tun.

weiß jetzt nicht, was bei impressum falsch sein sollte?!
http://www.gesetze-im-internet.de/tmg/__5.html
Angaben, die eine schnelle elektronische Kontaktaufnahme und unmittelbare Kommunikation mit ihnen ermöglichen, einschließlich der Adresse der elektronischen Post
Ist schwer, einen Gesetzestext selbst zu lesen, selbst wenn man den Paragraphen sogar noch vorgesetzt kriegt, hm?

die seite findet man auf allen suchmaschinen, weiß nicht, was du damit meinst, dass man sie nicht findet. sie wurde von vielen leuten getestet.
Lass mich raten: Die haben alle nach "gerdburger" oder "gerdburger.com" gesucht, oder?
Fakt ist:
- solche semantisch wertlosen und vollkommen verkehrten <table> - Konstrukte werden in Suchmaschinen abgewertet
- Frames und iFrames erschweren die automatisierte Zuordnung von Inhalt zur Domain massiv => entweder wird der Inhalt gar nicht gecrawled, oder er wird (wegen semantischem Grießbrei) massiv abgewertet

und habe bereits eine info bekommen, dass die fancybox sehr wohl auch außerhalb eines iframes funktioniert.
Na da bin ich mal gespannt. Du kannst die Grenzen eines Frames nicht sprengen.
 

Viruskiller11

Cadet 1st Year
Ersteller dieses Themas
Dabei seit
Dez. 2014
Beiträge
11
danke nochmal.
ja, da habt ihr schon recht! ich muss schauen, ob ich das irgendwie hinbekomme, dass nichts abgeschnitten wird bzw nicht ständig gezoomt oder verkleinert werden muss.

eine möglichkeit, die fotoansicht außerhalb eines iframes zu öffnen, wäre folgender aufbau der seite "fotos":

HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
	</script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 	<link rel="stylesheet" href="styl.css" />
	
	<script type="text/javascript">
		function readyFancy(){
			$("[rel=Portfolio]").trigger("click");
		}
		function callMe(site){ 
			$("[rel=Portfolio]").fancybox({
				'margin'             		: 20,
				'padding'            		: 10,
				'width'				: '50%',
				'height'			: '80%',
				'frameWidth'			: '100',
				'frameHeight'			: '50',
				'transitionIn'			: 'fade',
				'transitionOut'			: 'fade',
				'type'				: 'iframe',
				'href'				: ''+site+'',
				'titlePosition' 		: 'inside',
				'autoScale'			: true,
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
		readyFancy();
		}
	</script>

<script language="JavaScript">
jetzt = new Date();
Tag = jetzt.getDate();
m = jetzt.getMonth();
Jahr = jetzt.getYear();
if(Jahr < 2000) Jahr+=1900;
wt = jetzt.getDay();
var Monat = new
Array("1","2","3","4","5","6","7","8","9","10","11","12");
</script> 

<style type="text/css">
.RechtsBackground {
	background-image: url(../Fotos/Homepage_Hintergrund/Filmrolle_rechts.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: 81px 453px;	
}

.UntenBackground {
	background-image: url(../Fotos/Homepage_Hintergrund/Filmrolle_unten_1108x70.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 1108px 70px;
	-webkit-background-size: 1108px 70px;
	-moz-background-size: 1108px 70px;
	-o-background-size: 1108px 70px;
	-ms-background-size: 1108px 70px;
}

td, tr, table {
  border:0px red solid;
  border-collapse:collapse;
  table-layout:absolute;
}

html {
overflow-y: hidden;
overflow-x: hidden;
}

div {
    position: relative;
    font-size: 90%;
    font-family: "Verdana";
    font-style: bold;
    color: #BB9220;
    left: 0px;
    bottom: -20px;
    [/b]margin-left: -500px;[/b];
    padding:0;
    margin:0;
}

h2 {
    position: static;
    text-align: center;
    text-align: -moz-center;
    vertical-align: top; 
}

a:link, a:visited {
  font-family: Verdana;
  font-size: 10px;
  text-decoration: none;
  color: #BB9220;
  }

</style>

</head>

<body bgcolor="#7B8F70" background="../Fotos/Homepage_Hintergrund/bgkeanu_hell.jpg" text="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<h2>
<a href="#" rel="Portfolio"></a>
<table align="center" border="0" style="width:100%; height:100%">
<tr valign="middle">
<td>
  <table border="0" align="center" style="width:800px; height:590px" cellspacing="0" cellpadding="0">
    <tr>
      <td valign="middle" align="left" height="70" colspan="3"><a href="../index.html"><img border="0" 	src="../Fotos/Homepage_Hintergrund/Filmrolle_oben_Namen.jpg" width="1108" height="70"></a></td>
    </tr>
    <tr>
      <th align="left" valign="middle" colspan="0">
	<iframe name="iframe_Menue" style="width:200px; height:450px" src="../Menue.html" marginwidth="0" marginheight="0" frameborder="0" 		scrolling="no"></iframe></th>
      <th align="left" valign="middle">
      <iframe name="iframe_Mitte" style="width:827px; height:450px;" src="FotosGerd.html" marginwidth="0" marginheight="0" frameborder="0">Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.</iframe></th>
      <th class="RechtsBackground" valign="middle" colspan="0" style="width:120px; height:450px;"></th>
    </tr>
    <tr>
      <td class="UntenBackground" valign="middle" align="left" height="70" colspan="3"><center><div><b><font size="1">- - - Last updated</font>
	<script language="JavaScript">
	function datum()
	{
	document.write("<font size='1'>" + Tag + "." + Monat[m] + "." + Jahr + "</font>");
	}
	datum();
	</script><font size="1"> - - -</font></div></b></center></td>
    </tr>
   </table>
</td>
</tr>
</table>
</h2>
</body>
</html>
liebe grüße,
g
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Also ich sehe da jetzt nichts, was ich nicht genau so erwartet hätte: Die Bilder haben maximal die Größe des Content-iFrame, anstatt tatsächlich Fullscreen zu werden, wie es bei einer Lightbox eigentlich passieren sollte. Auch die "Abdunklung" der Umgebung, um den Fokus auf das Bild zu verstärken, funktioniert nicht in Frames.

Oh, und hier hab ich noch einen wunderbaren Grund, warum Frames totaler BULLSHIT sind.
Zwei Herausforderungen an dich:
- Verlink mal bitte direkt auf eine deiner Unterseiten, z.B. aufs Impressum.
- Öffne mal eine Unterseite in einen neuem Tab.
Jetzt sag mir, was da plötzlich komisches passiert...
 

Viruskiller11

Cadet 1st Year
Ersteller dieses Themas
Dabei seit
Dez. 2014
Beiträge
11
hmmm, also ich hab jetzt testweise mal alles hochgeladen. schau mal bitte unter www.gerdburger.com.
sehe da jetzt nicht, was nicht funktionieren würde, was du meinst.

die fotos werden jetzt mit der fancybox außerhalb des iframes dargestellt. leider bekomme ich es halt nicht hin, dass die fotoansicht schön dargestellt wird und auch noch mit gallery-funktion.

lg,
g
 

Smartass

Cadet 4th Year
Dabei seit
Juni 2014
Beiträge
68
Die Positionierung von Inhalten auf einer Web-Seite wird heutzutage nicht mehr über Tabellen gelöst, sondern über Bereiche, die mithilfe von CSS auf gewünschte Weise zueinander ausgerichtet und ins richtige Verhältnis gesetzt werden. Damit lässt sich dann verwirklichen

... dass nichts abgeschnitten wird bzw. nicht ständig gezoomt oder verkleinert werden muss ...
Voraussetzung hierfür sind die neueren Webstandards CSS3, Media Queries, sowie Flexbox-Designs und hierfür natürlich auch HTML5. Auf diese Weise ist dann ein "responsiver Aufbau" Deiner Website anhand der Auflösung des jeweiligen Gerätes, mit dem die Seite aufgerufen wird, möglich.

Eine "Reparatur" Deines -trotzdem durchaus nutzbaren- Webauftritts ist -wie weiter oben im Thread ziemlich drastisch beschrieben- in diesem Sinn daher nicht möglich. Wichtig ist aber sowieso nur, das Du gutes Bild- und Textmaterial zur Verfügung hast - bzw. Du über die Fähigkeit verfügst, eine Webpräsenz mit eigener Domain-Adresse zu realisieren. Alles Weitere wird sich finden ...
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
hmmm, also ich hab jetzt testweise mal alles hochgeladen. schau mal bitte unter www.gerdburger.com.
sehe da jetzt nicht, was nicht funktionieren würde, was du meinst.
Ah, den Parent-Call hatte ich jetzt gar nicht auf dem Schirm.
Du hast trotzdem allerhand Einschränkungen. Für die richtig nützlichen Sachen, wie z.B. Galerie-artiges Durchblättern aller Bilder innerhalb der Lightbox, funktioniert nur mit vollständigem DOM-Zugriff (Document Object Model). Da der DOM eines Frames strikt von dem seines Eltern-Dokumentes getrennt ist, kann deine Lightbox hier einfach nicht blättern.
Um den Galerie-View zu nutzen, wird, vereinfacht gesagt, folgendes ausgeführt: "Hole alle Links, die eine gemeinsame Eigenschaft (eine Galerie-Kennung, z.B. in Form eines data-Attributs) haben und füge sie in eine Liste ein". Nur kann deine Lightbox das eben jetzt nicht. Deine Box liegt im Elternelement, deine Links im Frame.

Ich sage dir noch einmal: Reiß es ab, setz es ordentlich neu auf. Dann hast du weit weniger Probleme.

Und ich geb dir noch das hier mit:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
http://validator.w3.org/check?uri=h...alidator/1.3+http://validator.w3.org/services

Dein Code besteht aus einem großen Bündel Fehler. Dass irgend etwas korrekt dargestellt wird, ist eigentlich nur Glück.
 

Viruskiller11

Cadet 1st Year
Ersteller dieses Themas
Dabei seit
Dez. 2014
Beiträge
11
danke für all eure ratschläge, aber ich bin kein fachmann im bereich webdesign!

ich bin froh, dass ich mit einem normalen editor es überhaupt soweit geschafft habe und eben zumindest diese "1000 fehler" website kreieren konnte. abreißen und neubauen ist für euch wahrscheinlich kein problem, für mich aber unmöglich.

ich wollte eigentlich nur, dass die fancybox die fotos als gallery außerhalb des iframes anzeigt. irgendwie wird es sicher funktionieren dieses kleinere problem zu lösen, jedoch die gesamte website neu zu programmieren schaff ich persönlich nicht.

lg,
gerd
 

Viruskiller11

Cadet 1st Year
Ersteller dieses Themas
Dabei seit
Dez. 2014
Beiträge
11
Daaanke für das super Formular!

hab es gerade getestet. Es funktioniert, nur leider werden die fotos trotzdem noch im iframe und nicht außerhalb angezeigt.
Woran kann das liegen?
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
ich bin froh, dass ich mit einem normalen editor es überhaupt soweit geschafft habe und eben zumindest diese "1000 fehler" website kreieren konnte. abreißen und neubauen ist für euch wahrscheinlich kein problem, für mich aber unmöglich.
Was heißt hier "normaler Editor"? Hast du tatsächlich den Windows-eigenen Editor genommen? Dieses Drecksding, dass keinerlei Syntax Highlighting beherrscht und außerdem gern noch sämtliche Dokumente mit einer Byte Order Mark versieht, die dir in der Folge gern mal das System lahm legt?
Nimm doch was anständiges, das senkt den Stresspegel gewaltig. Notepad++ kostet nichts und ist für solche Aufgaben ideal.

Und wenn du einen wilden Wust aus <table> und <iframe> erzeugen konntest, dann kannst du genauso auch semantisch korrekt arbeiten und deine Inhalte korrekt im Dokument platzieren.
Was macht dein iFrame? Er bindet ne beinahe leere HTML-Datei in dein bestehendes Konstrukt ein. Warum also nicht erst einmal den "Rahmen" (also Navi, Logo, Bereich für Content,...) überarbeiten, ihn dann mehrfach duplizieren, unter passenden Namen speichern und den Inhalt direkt in den Rahmen schreiben, anstatt ein weiteres Dokument zu laden? Das ist nicht wirklich komplizierter als deine Frame-Grütze, aber deutlich besser für Suchmaschinen erreichbar, löst deine Lightbox-Probleme, eröffnet dir viele neue Möglichkeiten,...

Wenn du tatsächlich das aktuelle Konstrukt hinbekommen hast, dann kannst du zumindest den Frame-Mist in unter einer Stunde beseitigen.
 

Smartass

Cadet 4th Year
Dabei seit
Juni 2014
Beiträge
68
Ist so wies Daaron im ersten Satz schrieb: ... ein Frame (egal ob <frame> oder <iframe>) ist ein in sich geschlossenes Element, dessen Grenzen nicht gesprengt werden können ... Du könntest natürlich eine Kopie Deiner Startseite zur Photoseite umbauen (hochladen) und dann direkt darauf verlinken - also statt <a href="fancybox-Fotos-Demos/Fotos.html" target="iframe_Mitte">Fotos</a> in der Navigation auf <a href="fotos.html">Fotos</a> abändern. Dies würde dann beim Klick auf ein Vorschaubild die gesamte Seite abdunkeln, und das darüber schwebende grossformatige Bild wäre nicht mehr von der Framegröße abhängig.
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
@Smartass: Ich hab mich in der Beziehung tatsächlich getäuscht. Über window.parent kannst du tatsächlich partiell aus dem iframe ausbrechen. Ist eben ein ziemlich kruder Hack und nur sehr eingeschränkt nutzbar. Mit sauberem & effizientem Code hat das nichts zu tun.
 

Viruskiller11

Cadet 1st Year
Ersteller dieses Themas
Dabei seit
Dez. 2014
Beiträge
11
@Daaron: für dich ist das wahrscheinlich ein kinderspiel. für mich leider nicht. ich meine, es würd mich schon sehr interessieren, eine moderne responsive website zu schaffen, aber ich befürchte, dass ich da an meine grenzen stosse werde.
meinst du folgenden aufbau einer neuen website:
- index seite ohne iframes und ohne tables, stattdessen divs?
- diesen neuen code der indexseite in alle menüpunkte übernehmen bzw kopieren
- das "iframe loch" in der mitte wird danach mit allen meinen menü-punkten "gefüllt".
- und alles responsive machen für sämtliche mobilen geräte

findet man in den neuen websites absolut keine table mehr? ich habe das als sehr übersichtlich und einfach empfunden. man macht spalten und zeilen und befüllt sie - fertig! kann mir das ohne table nur komplizierter vorstellen.

sollte ich das machen und schaffen, befürchte ich aber, dass der rahmen und sonstige elemente der neuen website in unterschiedlichen browsern verschoben sein werden. das war bei meiner jetzigen website auch so, und habe lang herumgebastelt bis es in den wichtigsten browsern alles komplett gleich ausgerichtet war.
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
- index seite ohne iframes und ohne tables, stattdessen divs?
- diesen neuen code der indexseite in alle menüpunkte übernehmen bzw kopieren
- das "iframe loch" in der mitte wird danach mit allen meinen menü-punkten "gefüllt".
- und alles responsive machen für sämtliche mobilen geräte
Wenn man komplett umbauen will: Ja. Aber schon wenn du nur die Frames (und die passenden Navigationspunkte) ersetzt, hast du einen massiven Mehrwert, und genau das ist eben in unter einer Stunde zu schaffen, weils im Endeffekt nur Copy/Paste ist.

Ein kompletter Umbau auf semantisch korrektes HTML (das heißt: Nicht zwingend <div>, es gibt viel präzisere Elemente) dauert natürlich deutlich länger.

findet man in den neuen websites absolut keine table mehr? ich habe das als sehr übersichtlich und einfach empfunden. man macht spalten und zeilen und befüllt sie - fertig! kann mir das ohne table nur komplizierter vorstellen.
Das <table> - Element ist ausschließlich für tabellarische Daten gedacht. Es hat also seinen Platz in modernen Seiten, aber nicht als Layout-Element. Knackig wirds, wenn man in einem Responsive Design tatsächlich tabellarische Daten (z.B. den Warenkorb eines Shops, oder die Produktdetail) unterbringen muss. Das ist dann Königsklasse.

Ist ja nicht so, dass man das Rad immer neu erfinden muss. Es gibt massig Vorlagen für gute Strukturen, z.B. Holy Grail (mein absoluter Liebling) und Responsive Grid. Im schlimmsten Fall setzt man eben auf eines der gängigen Frameworks, z.B. Bootstrap, und lässt sich 80% der Arbeit abnehmen.
 
Top