"Popup" im selben Fenster

Ladiesman217 · #1 (**permalink**) 09.07.2012, 15:33

Hallo zusammen,

ich wurde, bisher nahezu erfahrungslos, damit beauftragt, eine Webseite nach PSD-Vorgabe zu erstellen.
Zu meinem Erstaunen bin ich dabei auch schon recht weit gekommen und garnicht so unzufrieden, wie ich es selbst erwartet habe

Nun stehe ich allerdings vor einem Problem, welches ich ohne Hilfe und trotz Suche bei Google nicht lösen kann.

Ich möchte gern ein Fenster derart gestalten, dass wenn man auf der Webseite einen Link bzw. ein verlinktes Bild anklickt, sich eine Art Popup-Fenster öffnet, jedoch nicht in einem neuen Fenster oder Tab, sondern der ursprünglichen Webseite "vorgelagert (Vergleichsweise wie unter folgender Seite, wenn man oben das Produktbild anklickt: Scott The Essential Line B5RD EL Tragbares Stereo Radio: Amazon.de: Elektronik )
Weiterhin soll aber bei Anklicken des Bildes nicht nur das Bild vergrößert dargestellt werden, sondern zusätzlicher Inhalt in Form von Text angezeigt werden in dem sich öffnenden "Fenster".

Ich hoffe, ich habe mein Problem ausreichend beschrieben und hoffe auf Hilfe Eurerseits.

Ist diese möglich? Ist das überhaupt mit HTML oder CSS möglich oder brauche dafür Java und was muss ich Falle von Java in meiner HTML ändern.
Eine möglichst genaue Anleitung wäre aufgrund meiner geringen Kenntnisse sehr schön.

Vielen Dank vorab!!

fox · #2 (**permalink**) 09.07.2012, 15:52

Hi,

was du suchst nennt sich "modales Popup". Dazu gibt es hunderte vorgefertigte Skripte, der Klassiker ist LightBox, mein Favorit ist hingegen FancyBox (da es m.E. bedienerfreundlicher und schneller ist).

Hier findest du eine nahezu vollständige Auflistung aller Skripte mit Eigenschaften:
The Lightbox Clones Matrix « planetOzh

Wenn du dich dort nicht durchkämpfen willst, dann würde ich dir - wie schon gesagt - die FancyBox ans Herz legen. Einrichtung ist schnell geschehen, eine Anleitung findest du auf der o.g. Seite.

Ansonsten: Bei den meisten derartigen Skripten (JavaScript im übrigen, das hat mit Java nichts zu tun!) musst du im Markup nichts ändern, außer eine Klasse im Link zu setzen. Das hängt aber vom verwendeten Skript ab und ist dort jeweils beschrieben.

Ladiesman217 · #3 (**permalink**) 11.07.2012, 15:02

Hallo fox,

vielen Dank für deine Hilfe.
Ich habe mich jetzt an fancybox versucht und letztendlich das ganze mit der ANleitung hier auf der Seite auch hinbekommen (FancyBox Tutorial).
Ich habe jedoch 3 Bilder, die die fancybox verwenden sollen. Diese liegen jedoch nicht genau nebeneinander.
Beim ersten funktioniert das ganze, beim zweiten und dritten nicht.
Muss ich da noch etwas beachten bei mehrfacher Verwendung?

Der HTML Code im Kopf sieht so aus:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">-->
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YellowSky</title>
<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>
<script type="text/javascript">
  $(document).ready(function() {
	    /* Funktion Popup Teaser im Iframe nach ID */
      $("#teaser").fancybox({
         'width': '70%',
         'height': '50%',
         'autoScale': false,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'centerOnScroll': 'true',
         'type': 'iframe'
      });

  });
</script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

Und der für die 3 Boxen folgendermaßen:

HTML-Code:

  <div id="bgboxes">
    <div id="boxes">
      <div id="col1"> <a id="teaser" href="AboutT.html" title="Mehr über Uns">
      <img id="ÜberUns" src="images/aboutT.png" border="0"  /></a><br />
        <h2>
          <center>
            <p>Erfahren Sie mehr über uns.</p>
          </center>
        </h2>
      </div><!--end col1-->
      <div id="col2"> <a id="teaser" href="UnsereKundenT.html" title="Unsere Kunden">
      <img id="Unsere Kunden" src="images/kundenT.png" border="0"  /></a><br />
        <h2>
          <center>
            <p>Erfahren Sie, welchen Firmen wir schon helfen konnten.</p>
          </center>
        </h2>
      </div><!--end col2-->
      <div id="col3"> <a id="teaser" href="KontaktT.html" title="Kotanktieren Sie uns">
      <img id="ÜberUns" src="images/ImpressumT.png" border="0"  /></a><br />
        <h2>
          <center>
            <p>So finden und kontaktieren Sie uns.</p>
          </center>
        </h2>
      </div><!--end col3-->
    </div><!--end boxes-->
  </div><!--end bgboxes-->

Ich hoffe damit kann jemand etwas anfangen und mir evtl. sagen, wie ich das Problem lösen kann.
Danke nochmals

fox · #4 (**permalink**) 11.07.2012, 18:03

Du darfst eine ID nur ein mal im gesamten Dokument verwenden. Benutze stattdessen Klassen (class="...") die du mit dem Punkt ansprechen kannst:

a class="teaser"
$('.teaser').fancybox

Ladiesman217 · #5 (**permalink**) 07.08.2012, 17:39

Vielen Dank für die Hilfe Fox.
Das funktioniert nun.
Jetzt habe ich allerdings, unter Nutzung der Fancybox folgendes weiteres Problem:
Wenn ich in einem der aufpoppenden Fenster nach unten scrolle, dann stoppt er nicht am Ende von diesem Fenster, sondern scrollt direkt weiter in das zweite in der Seite eingearbeitete Fenster.
Das passiert bei Mac unter Chrome und Safari, bei Windows bei Chrome. Bei Forefox und IE tritt dieses Problem nicht auf.

Woran kann das liegen und gibt es einen Lösungsvorschlag? Google hat mir leider bisher nicht weitergeholfen

fox · #6 (**permalink**) 07.08.2012, 19:26

Ich zitiere:

Zitat:

Optional - Enable "mouse-wheel" to navigate throught gallery items

Code:

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

Also: Lass diese Zeile weg, wenn du diese Funktionalität nicht haben möchtest. (It's a feature, not a bug!

)
Alternativ kannst du auch das rel-Attribut weglassen, so bekommst du keine Galerie.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Auf anderes Fenster zugreifen	siliciumcarbid	Javascript & Ajax	2	27.08.2011 18:47
virtuelles Fenster erstellen	The Hit-Man	CSS	17	06.08.2009 14:18
Formular posten und gleichzeitg neues Fenster aufmachen	Ares	(X)HTML	0	17.11.2006 13:11
Input Image - Link im selben Fenster öffnen	Ares	(X)HTML	2	16.10.2006 09:12
Philosophie hinter Link im selben Fenster öffnen	methodfive	(X)HTML	39	27.05.2006 18:40