✔ Galerienavigation funktioniert nach erneutem aufruf der Galerie nicht

parawaiter · 20. Oktober 2007

Durch Script erzeugte div`s ausblenden

Hallo,

Ich komme hier leider nicht ohne hilfe weiter

.

Mein Ziel ist, die von dem Script erzeugten Elemente durch einen klick
auf das ebenfalls erzeugte div-Element mit der ID overlay wieder
auszublenden.

Ist das außer durch die CSS Zuweisung "hidden" möglich, und wenn ja wie?

Würde mich sehr über Hilfe freuen

HTML:

<html>
<head>
<title></title>
<meta name="author" content="Juli">
<style type="text/css">
<!--
#overlay
{
width: 100%; height: 100%; top: 0px; left: 0px;
background-color: #090909; url(overlay.png); z-index: 1; position: absolute;
}

#container
{
width: 700px; height: 500px; top: 12%;
margin: 0 auto; z-index: 2; position: relative;
}

#top
{
width: 700px; height: 25px; left: 0px;
background-color: #aaaaaa; margin: 0 auto; z-index: 3; position: relative;
}

#body
{
width: 700px; height: 450px; left: 0px;
background-color: #bbbbbb; margin: 0 auto; z-index: 3; position: relative;
}

#bottom
{
width: 700px; height: 25px; left: 0px;
background-color: #cccccc; margin: 0 auto; z-index: 3; position: relative;
}

-->
</style>
<script type="text/javascript">
<!--



function einblenden()
{
var objBody = document.getElementsByTagName("body").item(0);

var objOverlay = document.createElement("div");
objOverlay.setAttribute('id','overlay');
objBody.appendChild(objOverlay);

var objContainer = document.createElement("div");
objContainer.setAttribute('id','container');
objOverlay.appendChild(objContainer);

var objTop = document.createElement("div");
objTop.setAttribute('id','top');
objContainer.appendChild(objTop);

var objBody2 = document.createElement("div");
objBody2.setAttribute('id','body');
objContainer.appendChild(objBody2);

var objBottom = document.createElement("div");
objBottom.setAttribute('id','bottom');
objContainer.appendChild(objBottom);
}

-->
</script>
</head>
<body style="width: 100%" background="9.jpg">

<div style="z-index: 0;">
  <a href="#" onclick="einblenden()" title="">test</a>
</div>


</body>
</html>

Schrödi · 20. Oktober 2007

Hi,

das ist möglich, indem du die style-Eigenschaft ansprichst, wie du es selber gesagt hast.

Code:

window.document.getElementByID(IDdesDIV).style.visibility='hidden';

oder

Code:

window.document.getElementByID(IDdesDIV).style.display='none';

Das erstere macht es nur unsichtbar, es ist aber noch da und behält auch den Platz in Anspruch, wenn es nicht absolut positioniert ist.
Das Zweite wird komplett ausgeblendet und benötigt auch kein Platz mehr.

Gruß Schrodi

parawaiter · 20. Oktober 2007

Hi Schrodi,

erstmal danke für deine Antwort

Ich muß gestehen, dass ich noch ziemlich am Anfang stehe, deswegen
leuchtet mir das zwar ein, nur umsetzen kann ich es nicht.

Ich habe folgendes probiert (steht über der funktion "einblenden"):

HTML:

function ausblenden(overlay)
{
window.document.getElementByID(overlay).style.display='none';
}

Um auf die function "ausblenden" zugreifen zu können, habe ich in die function
"einblenden" folgendes dazugeschrieben.

HTML:

var objLinkClose = document.createElement("a");
objLinkClose.setAttribute('href','#');
objLinkClose.setAttribute('id','linkclose');
objLinkClose.setAttribute('onClick','hide(overlay)');
objBody2.appendChild(objLinkClose);

Der erstellte Link wird angezeigt wie gewünscht, nur beim draufclicken passiert nichts

Könntest du mir nochmal helfen?

LG parawaiter

Schrödi · 20. Oktober 2007

Hi,

warum erstellst du das DIV nicht mit HTML, sonder mit Javascript?

Du kannst es och schon mit HTML vordefinieren und einfach ausblenden.
Oder reden wir hier von ein paar mehr DIVs als nur einem?
Aus meine Weise könntest du folgenden Code nehmen

Code:

<html>
<body>
<script type="text/javascript">

function hide_show(id) {
 if(document.getElementById(id).style.display == 'none')
	document.getElementById(id).style.display = 'block';
 else
	document.getElementById(id).style.display = 'none';
}
</script>

<div id="mein_div" style="display:none;">
	bla
</div>

<button onClick="hide_show('mein_div');">Verstecken / Zeigen</button>


</body>
</html>

Gruß

parawaiter · 20. Oktober 2007

Hi Schrodi,

das ganze soll (in ferner Zeit) mal eine Galerie wie z.B. Lightbox 2 werden bei der sich
durch einen klick auf ein Thumpnail die eigentliche Galerie öffnet.

Bei Lightbox 2 ist es so, dass man die Galerie durch einen klick auf das <div> "overlay"
(weches die größe 100% x 100% hat)
oder durch einen Link wieder schließen kann.
Die komplette Galerie wird ebenfalls durch ein Skript erzeugt.

In meinem Beispiel ist das <div> "overlay" der rote Hintergrund
und der Link das weiße Kässtchen. Öffnen kann man das ganze mit einem klick auf "einblenden".

Ich wäre sehr dankbar, wenn Du das kurz mal anschauen könntest.

http://www.glide-and-ride.de/test/show_hide/index.html

p.s. funktioniert nur mit Opera, IE7 und Firefox

Schrödi · 21. Oktober 2007

Hi,

habe soweit auch keinen Fehler gesehen. Versuche aber mal deine Namensgebung zu ändern.

Begriffe, die im HTML schon vorkommen sollten als Namen für Variablen, ID's, und CSS Klassen tabu sein. Könnte auch sein, dass er es deshalb nicht ausführt.

Aber vielleicht sieht hier ja noch ein anderer einen Fehler oder hat ein Idee.

Gruß Schrodi.

Quaese · 22. Oktober 2007

Hi,

ein paar Fehler sind doch enthalten. Die Methode zum Ermitteln eine Objekts anhand seiner ID heisst
getElementById, die ID des DIVs (overlay) muss als String übergeben werden. Ausserdem wird das
Event onclick mit kleinem c geschrieben.

Weiterhin muss beachtet werden, dass die Links im onclick-Event false zurückliefern. Damit wird
verhindert, dass der eigentliche Link ausgeführt wird.

Im Script selbst würde ich noch überprüfen, ob das DIV mit der ID overlay bereits existiert, da es sonst
erneut angelegt werden würde. Das hätte zur Folge, dass die IDs nicht mehr eindeutig sind.

Code:

<html>
<head>
<title></title>
<meta name="author" content="Juli">
<style type="text/css">
<!--
#overlay
{
width: 100%; height: 100%; top: 0px; left: 0px;
background-image: url(overlay.gif); z-index: 1; position: absolute;
}

#container
{
width: 700px; height: 500px; top: 12%;
background-color: #; margin: 0 auto; z-index: 2; position: relative;
}

#top
{
width: 700px; height: 25px; left: 0px;
background-color: #cccccc; margin: 0 auto; z-index: 3; position: relative;
}

#body
{
width: 700px; height: 450px; left: 0px;
background-color: #000000; margin: 0 auto; z-index: 3; position: relative;
}

#bottom
{
width: 700px; height: 25px; left: 0px;
background-color: #cccccc; margin: 0 auto; z-index: 3; position: relative;
}

#linkclose
{
display: block; width: 50px; height: 50px; background-color: #ffffff; position: relative; z-index: 4;
}
-->
</style>
<script type="text/javascript">
<!--
function div(){
  // Falls das overlay-DIV schon existiert
  if(document.getElementById("overlay")){
    document.getElementById("overlay").style.display = (document.getElementById("overlay").style.display=='block')?"none":"block";
  }else{
    var objBody = document.getElementsByTagName("body").item(0);

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute('id','overlay');
    objOverlay.onclick = function() {document.getElementById("overlay").style.display='none';}
    objBody.appendChild(objOverlay);

    var objContainer = document.createElement("div");
    objContainer.setAttribute('id','container');
    objOverlay.appendChild(objContainer);

    var objTop = document.createElement("div");
    objTop.setAttribute('id','top');
    objContainer.appendChild(objTop);

    var objBody2 = document.createElement("div");
    objBody2.setAttribute('id','body');
    objContainer.appendChild(objBody2);

    var objLinkClose = document.createElement("a");
    objLinkClose.setAttribute('href','#');
    objLinkClose.setAttribute('id','linkclose');
    objLinkClose.onclick = function() {document.getElementById("overlay").style.display='none'; return false;}
    objBody2.appendChild(objLinkClose);

    var objBottom = document.createElement("div");
    objBottom.setAttribute('id','bottom');
    objContainer.appendChild(objBottom);
  }
}
-->
</script>
</head>
<body style="width: 100%" background="9.jpg">
<div style="z-index: 0;">
  <a href="#" onclick="div(); return false;" title="">einblenden</a>
</div>
</body>
</html>

Ciao
Quaese

parawaiter · 24. Oktober 2007

Hi,

danke für Eure Hilfe, habs hinbekommen

Gruß

parawaiter

parawaiter · 24. Oktober 2007

Hallo allerseits,

Ich habe eine einfache JavaScript Galerie geschrieben die an sich sehr gut arbeitet.
Durch einen klick auf ein Bild wird eine Funktion aufgefufen, die die
Galerie erstellt und über die eigentliche Seite legt.
Neben den Prev und Next-Links wird auch ein Close-Link erstellt, der die Galerie durch

HTML:

 onclick = function() {document.getElementById('overlay_x').style.display='none';}

wieder schließt.

Mein Problem ist jetzt, dass die Funktionen "liste.prev, liste.next und schließen" nicht mehr ausgeführ werden, wenn ich die Galerie ein zweites mal öffne

Ich hoffe, dass mir da jemand helfen kann.

Hier kann man die Galerie anschauen: (wird nur im Firefox, IE7 und Opera korrekt angezeigt)
http://www.glide-and-ride.de/test/galerie/index.html

Das Problem tritt nur im IE7 und Opera auf, Firefox ignoriert das irgendwie.

Das ist der Code:

HTML:

<html>
<head>
<title></title>
<meta name="author" content="Juli">
<style type="text/css">
<!--

#overlay_x
{
width: 100%; height: 100%; top: 0px; left: 0px; right: 0px; display: block;
background-image: url(overlay.png); z-index: 1; position: absolute;
}

#image_container_x
{
width: 700px; height: 527px; top: 80px; left: 0px; right: 0px; display: block;
background-color: #ffffff; margin: 0 auto; z-index: 2; position: relative;
}

#frame_container_x
{
width: 100%; height: 700px; top: 0px; left: 0px; display: block;
background-color: #; border: 0 solid #000099; margin: 0 auto; z-index: 50; position: absolute;
}

#nav_frame_x
{
width: 200px; height: 25px; top: 82px; display: block;
background-color: #; border: 0 solid #000099; margin: 0 auto; z-index: 50; position: relative;
}

#div_prev_x
{
width: 80px; height: 25px; background-color: #; float: left; left: 0px; top:  0px;  position: relative;
}

#div_next_x
{
width: 80px; height: 25px; background-color: #; float: right; right: 0px; top: 0px; position: relative;
}

#close_container_x
{
width: 40px; height: 25px; background-color: #; float: left; right: 0px; top: 0px; position: relative; background-repeat: no-repeat;
}

#galerie_image
{
margin-top: 2px; width: 696px; height: 523px;
}


#link_pref
{
display: block; float: left; width: 80px; height: 25px; background-image: url(arrow-pref_n.png); position: relative; z-index: 4;
}

#link_pref:hover
{
background-image: url(arrow-pref_h.png);
}

#link_close
{
display: block; float: left; width: 40px;  height: 25px; background-image: url(close_n.png); position: relative; z-index: 4;
}

#link_close:hover
{
background-image: url(close_h.png);
}

#link_next
{
display: block; float: left; width: 80px; height: 25px; background-image: url(arrow-next_n.png); position: relative; z-index: 4;
}

#link_next:hover
{
background-image: url(arrow-next_h.png);
}


-->
</style>
<script type="text/javascript">
<!--

function galerie_open()
{
var objBody = document.getElementsByTagName("body").item(0);


// Erzeugt Transparenten Hintergrund
var objOverlay = document.createElement("div");
objOverlay.setAttribute('id','overlay_x');
objOverlay.setAttribute('align','center');
objBody.appendChild(objOverlay);


// Erzeugt weißen Hintergrund für das Bild
var objImageContainer = document.createElement("div");
objImageContainer.setAttribute('id','image_container_x');
objOverlay.appendChild(objImageContainer);


// Erzeugt das Bild
var objImage = document.createElement("img");
objImage.setAttribute('id','galerie_image');
objImage.setAttribute('src','bild1.jpg');
objImageContainer.appendChild(objImage);


// Erzeugt absolut positioniertes Div-Element um weitere Elemente über (nicht in) das Bild legen zu können
var objFrameContainer = document.createElement("div");
objFrameContainer.setAttribute('id','frame_container_x');
objFrameContainer.setAttribute('align','center');
objOverlay.appendChild(objFrameContainer);


// Erzeugt Div-Element zum verschachteln der Div-Navigations-Elemente
var objNavFrame = document.createElement("div");
objNavFrame.setAttribute('id','nav_frame_x');
objFrameContainer.appendChild(objNavFrame);


// Erzeugt Div-Element zum verschachteln des PrevLinks
var objDivPrev = document.createElement("div");
objDivPrev.setAttribute('id','div_prev_x');
objNavFrame.appendChild(objDivPrev);


// Erzeugt Div-Element zum verschachteln des CloseLinks
var objCloseContainer = document.createElement("div");
objCloseContainer.setAttribute('id','close_container_x');
objNavFrame.appendChild(objCloseContainer);


// Erzeugt Div-Element zum verschachteln des NextLinks
var objDivNext = document.createElement("div");
objDivNext.setAttribute('id','div_next_x');
objNavFrame.appendChild(objDivNext);


// Erzeugt A-Element um zum vorherigen Bild zu Navigieren
var objLinkpref = document.createElement("a");
objLinkpref.setAttribute('id','link_pref');
objLinkpref.setAttribute('href','javascript:  liste.prev()');
objLinkpref.onfocus=function() {if (this.blur) this.blur();}
objDivPrev.appendChild(objLinkpref);


// Erzeugt A-Element um zum nächsten Bild zu Navigieren
var objLinknext = document.createElement("a");
objLinknext.setAttribute('id','link_next');
objLinknext.setAttribute('href','javascript: liste.next()');
objLinknext.onfocus=function() {if (this.blur) this.blur();}
objDivNext.appendChild(objLinknext);


// Erzeugt A-Element um die Galerie zu schließen
var objLinkClose = document.createElement("a");
objLinkClose.setAttribute('id','link_close');
objLinkClose.setAttribute('href','#');
objLinkClose.onclick = function() {document.getElementById('overlay_x').style.display='none';}
objLinkClose.onfocus=function() {if (this.blur) this.blur();}
objCloseContainer.appendChild(objLinkClose);

}


function Gallery( element, imagelist ) {

var id = element;
var images = imagelist;
var current = 0;

function show()
{
document.getElementById( id ).src = images[ current ];
}

this.next = function()
{
if( current++ >= images.length - 1 )
current = images.length - 1;
show();
}

this.prev = function()
{
if( current-- <= 0 )
current = 0;
show();
}
}

liste = new Gallery(
"galerie_image",
new Array( "bild1.jpg", "bild2.jpg", "bild3.jpg", "bild4.jpg", "bild5.jpg", "bild6.jpg" )
);


function galerie_close()
{
document.getElementById('overlay_x').style.display='none';
}



-->
</script>
</head>
<body style="width: 100%" background="body_bg.jpg" leftmargin="0" topmargin="0" rightmargin="0">

<div style="z-index: 0;">
  <a href="javascript: galerie_open()" title=""><img src="bild1.jpg" width="150px" height="113px" alt=""></a>
  <a href="javascript: galerie_open()" title=""><img src="bild2.jpg" width="150px" height="113px" alt=""></a>

  <a href="javascript: galerie_open()" title=""><img src="bild3.jpg" width="150px" height="113px" alt=""></a>
  <a href="javascript: galerie_open()" title=""><img src="bild4.jpg" width="150px" height="113px" alt=""></a>
  <a href="javascript: galerie_open()" title=""><img src="bild5.jpg" width="150px" height="113px" alt=""></a>
  <a href="javascript: galerie_open()" title=""><img src="bild6.jpg" width="150px" height="113px" alt=""></a>
</div>


</body>
</html>

Schrödi · 24. Oktober 2007

Hi,

also bei mir (Firefox) funktioniert es einwandfrei. D.h. auch nach mehrmaligem Öffnen und Schließen.

Gruß Schrodi

✔ Galerienavigation funktioniert nach erneutem aufruf der Galerie nicht

parawaiter

Mitglied

Schrödi

Mitglied

parawaiter

Mitglied

Schrödi

Mitglied

parawaiter

Mitglied

Schrödi

Mitglied

Quaese

Moderator

parawaiter

Mitglied

parawaiter

Mitglied

Schrödi

Mitglied

Neue Beiträge