angezeigtes DIV austauschen via Funktion

[3degrees]

Hallo,
ich bastle an einer kleinen Galerie und komme mit dem Javascript nicht zurecht. Die Idee ist folgende:

Auf der Seite gibt es Thumbnails, von denen bei Click darauf, das entsprechende Bild, nebst und Downloadlink geladen wird. Dazu lege ich für jede Großansicht ein DIV an und versehe es mit einer ID. Diese DIVs werden nun auf display:none gesetzt und mit Hilfe einer Funktion bei Klick auf den Thumbnail sichtbar gemacht. Wenn man nun auf einen anderen Thumb klickt, soll sich der Inhalt des DIVs der Großansicht ändern.

Mein Code sieht bisher so aus:

<script type="text/javascript">
        function zeigen(){
        document.getElementById('inhalt1').style.display='block';
        }
        </script>

<div id="container_gallery">
    <div class="thumbs">
<a class="gallery slide06" href="#" onclick="javascript:zeigen()"></a>
<a class="gallery slide01" href="#" onclick="javascript:zeigen(this.id,'inhalt2')"></a>
    </div>
<div id="inhalt1"><img src="bild1.jpg" /><br /><br />Bildbeschreibung1<br />Orignal herunterladen</div>
<div id="inhalt2"><img src="bild2.jpg" /><br /><br />Bildbeschreibung2<br />Orignal herunterladen</div>    
</div>

Hiermit: <a class="gallery slide01" href="#" onclick="javascript:zeigen(this.id,'inhalt2')"></a> dachte ich, könnte ich den INhalt des DIVs einfach austauschen, aber das funktioniert nicht. Hat jemand eine Idee wo der Haken in meinem Konstrukt ist? Benötige ich für das austauschen des Inhalts noch mal eine extra Funktion?:uhm:

 

[Black6Death12]

AW: angezeigtes DIV austauschen via Funktion

Ich möchte deinen Ansatz nicht kritisieren,
aber an deiner stelle würd ich mir mal
ansehen...
Funktionsweise(kurz): wenn man auf ein bild klickt wird die Seite etwas dunkler und die große Variante wird drüber angezeigt außerdem kann man noch ne beschreibung hinzufügen

zu deinem problem:
Deine Funktion hat keine parameter... daher wird zeigen(this.id,'inhalt2') das selbe machen wie zeigen()
Außerdem muss/darf man bei onclick="" kein "javascript:" nicht angeben
um das aktuelle auszublenden musst du die aktuelle id in einer variablen speichern.

 

[mrbuff76]

AW: angezeigtes DIV austauschen via Funktion

Hiermit: <a class="gallery slide01" href="#" onclick="javascript:zeigen(this.id,'inhalt2')"></a> dachte ich, könnte ich den INhalt des DIVs einfach austauschen, aber das funktioniert nicht. Hat jemand eine Idee wo der Haken in meinem Konstrukt ist? Benötige ich für das austauschen des Inhalts noch mal eine extra Funktion?:uhm:

Doch, dass funktioniert. Aber dazu musst du deine Funktion erweitern.

Du übergibst Variablen und dann? Du arbeitest nicht mit ihnen weiter...

 

[Doitsu]

AW: angezeigtes DIV austauschen via Funktion

<a class="gallery slide01" href="#" onclick="javascript:zeigen(this.id,'inhalt2')"></a>

das 'this.id' bringt dir nichts, wenn du dem a-Tag keine ID mitgibst, da aber jedes dockument nur eine ID haben sollte, bringt dir es in dem zusammenhang auch nichts, wenn du dem Link eine ID gibst.

& zu dem von meinem Vorposter:

<script type="text/javascript">
  function zeigen(id){
    document.getElementById(id).style.display='block';
  }
</script>
<a href="x" onclick="zeigen('divid')">xx</a>

.. simple toggle html element - JavaScript - Snipplr

 

[mrbuff76]

AW: angezeigtes DIV austauschen via Funktion

<a class="gallery slide01" href="#" onclick="javascript:zeigen(this.id,'inhalt2')"></a>

das 'this.id' bringt dir nichts, wenn du dem a-Tag keine ID mitgibst, da aber jedes dockument nur eine ID haben sollte, bringt dir es in dem zusammenhang auch nichts, wenn du dem Link eine ID gibst.

this.id bringt hier nichts, dass ist richtig. Aber das jedes Dokument nur eine ID haben sollte, ist falsch!
Richtig ist, dass jede ID nur einmal vorkommen darf. Wenn er jedem Element eine ID gibt und diese dann nur einmal vorkommt, ist das absolut okay.

<div id="container_gallery">
      <div class="thumbs">
         <a class="gallery slide06" href="#" onclick="document.getElementById['bild_gross'].src = 'bild1.jpg'"></a>
         <a class="gallery slide01" href="#" onclick="document.getElementById['bild_gross'].src = 'bild2.jpg'"></a>
.
.
.
usw.
.
.
.
    </div>
   <div id="inhalt1">
     <img id="bild_gross" src="platzhalter.jpg" /><br /><br />Bildbeschreibung1<br />Orignal herunterladen</div>    
</div>

 

[Doitsu]

AW: angezeigtes DIV austauschen via Funktion

ok, evtl etwas ungluecklich ausgedrueckt, ich meinte natuerlich, die gleiche ID sollte im Dokument nur einmal vorkommen ..

Dazu ist dein geposter Code nun nicht ganz richtig, da zu jedem Bild eine andere Beschreibung kommt & der Downloadlink auch veraendert wird, deswegen auch die divs, und nicht das simple veraendern des src..

 

[mrbuff76]

AW: angezeigtes DIV austauschen via Funktion

Das Ändern der Beschreibung und des Links hatte ich mal aussen vor gelassen.
Ist aber dann einfach in der Funktion machbar.

 

[3degrees]

AW: angezeigtes DIV austauschen via Funktion

Narf, jetzt hat mich die Arbeit abgehalten... vielen Dank für die Denkanstösse! Ich werde mich mit dem Script noch mal eingraben, glaub ich, da ich auch gerade erst mit Javascript anfange
Das Problem mit Lightbox u. ä. ist, dass der Server, auf dem die Seite läuft, weder php unterstützt noch eine Datenbank hat, daher benötige ich eine möglichst schmal gestrickte Lösung. Da war mein erster Gedanke Javascript, weil rein mit css (und mouseover) gehts leider nicht, denn dann kann ich die Downloadlinks nicht mehr einbauen. Schwierig das, irgendwie.

 

[3degrees]

AW: angezeigtes DIV austauschen via Funktion

Ich glaube, ich habe jetzt einen Ansatz gefunden... und zwar sieht das Ganze nun so aus:

<style type="text/css">
.divHide{display:none;}
.divShow{display:block;}
</style>
<script type="text/javascript" language="javascript">
function showhide(obj) {
  var el=document.getElementById(obj);
  if (el.className == "divHide") {
    el.className = "divShow";
  } else {
    el.className = "divHide";
  }
}
</script>

...

<div id="container_gallery">
<p><a onclick="showhide('bild1');" href="#bild1">click here</a>.</p><a name="bild1"></a>
<div id="bild1" class="divHide"><img src="bild1.jpg" /><br /><br />Bildbeschreibung1<br /><a href="#">Orignal herunterladen</a></div>    
<p><a onclick="showhide('bild2');" href="#bild2">click here, too</a>.</p><a name="bild2"></a>
<div id="calendar2" class="divHide"><img src="bild2.jpg" /><br /><br />Bildbeschreibung2<br /><a href="#">Orignal herunterladen</a></div>
</div>

Problem: Wenn ich das zweite DIV einblende, wird das erste nicht automatisch ausgeblendet. Kann mir jemand sagen, wie ich das erreiche? Ich denke, dass ich in der Funktion irgendwie abfragen muss, ob schon ein DIV da ist, aber ich hab keine Ahnung, wie das geht

 

[Black6Death12]

AW: angezeigtes DIV austauschen via Funktion

Versuchs mal hiermit:

<style type="text/css">
.divHide{display:none;}
.divShow{display:block;}
</style>
<script type="text/javascript" language="javascript">
/* Speichert das aktuell sichtbare Div*/
var lastShown = null;

function showDiv(obj) {
  var el=document.getElementById(obj);
  if(lastShown != null) {
    lastShown.className = "divHide";
  }
  el.className = "divShow";
  lastShown = el;
}
</script>

...

<div id="container_gallery">
<p><a onclick="showDiv('bild1');" href="#bild1">click here</a>.</p><a name="bild1"></a>
<div id="bild1" class="divHide"><img src="bild1.jpg" /><br /><br />Bildbeschreibung1<br /><a href="#">Orignal herunterladen</a></div>    
<p><a onclick="showDiv('bild2');" href="#bild2">click here, too</a>.</p><a name="bild2"></a>
<div id="bild2" class="divHide"><img src="bild2.jpg" /><br /><br />Bildbeschreibung2<br /><a href="#">Orignal herunterladen</a></div>
</div>

das script speichert immer den aktuell sichtbaren div in einer globalen variablen so dass es beim nächsten klick das alte ausblenden kann.

Ich hoffe das hilft

 

[3degrees]

AW: angezeigtes DIV austauschen via Funktion

<-- ist ganz aus dem Häuschen!

Es funktioniert, vielen lieben Dank!

 

[Doitsu]

AW: angezeigtes DIV austauschen via Funktion

Wenn ich das so sagen darf, wuierde ich die Funktion so veraendern:

<script type="text/javascript" language="javascript">
/* Speichert das aktuell sichtbare Div*/
var lastShown = null;

function showDiv(obj) {
  var el=document.getElementById(obj);
  el.className = "divShow";
  if(lastShown != null) {
    lastShown.className = "divHide";
  }
  lastShown = el;
}
</script>

Also das 'el.className = "divShow";' an den Anfang, zweck: Wenn man nun 2 mal auf's gleiche Bild klickt, wird es wieder ausgeblendet ..

 

[harzteufel]

AW: angezeigtes DIV austauschen via Funktion

Leider wird das DIV beim (dritten) Anklicken nicht wieder angezeigt.

1. Klick = Anzeigen, 2. Klick = Schliessen, 3. Klick = Anzeigen, aber genau das passiert leider nicht! Wo muss ich hierfür was ändern, damit dies funktioniert?

 

[Doitsu]

AW: angezeigtes DIV austauschen via Funktion

<script type="text/javascript" language="javascript">
/* Speichert das aktuell sichtbare Div*/
var lastShown = null;

function showDiv(obj) {
  var el=document.getElementById(obj);
  el.className = "divShow";
  if(lastShown != null) {
    lastShown.className = "divHide";
  }if(lastShown==el) {
    lastShown = null;
  } else {
    lastShown = el;
  }
}
</script>

 

[harzteufel]

AW: angezeigtes DIV austauschen via Funktion

Besten Dank! Ich habe in der Zwischenzeit auch selbst probiert, hab es aber nicht hinbekommen... Jetzt funktioniert es, wie gewünscht!