jquery - slider.js erweitern

[gmf2]

Hallo Forengemeinde,

ich versuche nun schon seit Stunden ein Sliderscript zu erweitern. Ich möchte, dass das derzeit aktive Panel die zugehörige div-class sichtbar macht, also Quasi einen Textbereich unter dem Slider, der bei jeder Grafik eben verschieden ist und einen festen Bezug zur "aktiven" Grafik darstellt.

Der HTML Code eines Panels sieht so aus:

<div class="panel" id="panel_1">
   <div class="inside">
   <img src="inc/rota/images/01.jpg" alt="" />
   <h2>Überschrift</h2>
   <p> <a href="example.php">... verlinkte Unterschrift ...</a></p>
   </div>
  </div>

Jetzt würde ich gerne noch sowas wie

<div class="detail" id="panel_1"><?php include "detailtext1.php" ?>
<div class="detail" id="panel_2"><?php include "detailtext2.php" ?>
<div class="detail" id="panel_3"><?php include "detailtext3.php" ?>
 usw.

einfügen, aber immer nur den Detailtext includen, dessen Panel gerade "aktiv" ist.

Und genau hier bin ich mit meinem Latein am Ende, wie kann die Panel-ID o.ä. abfragen?, bzw. nur das detail_panel_x sichtbar machen?

Mein slider.js hab ich noch angehängt.

Grüße gmf2

[Kropff]

Du denkst falsch herum. Zuerst wird PHP ausgeführt und dann JavaScript. Da ist also nichts mit includen. Warum arbeitest du nicht einfach mit display:none?

Peter

[gmf2]

Danke für die Antwort!,
das hab ich mir mittlerweile fast auch so zusammengereimt, allerdings fehlt mir ein Ansatz, wie ich im display:none das Aktive, und nur das aktive Panel einblenden lassen kann.

Die anderen Panel sind ja auch noch sichtbar, allerdings durch das slide.js verkleinert, mein Ansatz war daher soetwas in dieser Art im slider.js:

...
    function growBigger(element) {
        $(element)
            .animate({ width: curWidth })
            .find("img")
            .animate({ width: curImgWidth })
            .end()
            .find("h2")
            .animate({ fontSize: curTitleSize })
            .end()
            .find("p")
            .animate({ fontSize: curParSize });
            $("div.detail").show(); // Wie kann ich hier nach der Pannelnummer unterscheiden, 
            // bzw. nur den Detailbereich anzeigen lassen, der gerade "growBigger" ist?
}
... 

Die geammte slider.js hatte ich ja schon angehängt, wäre für einen Denkanstoß sehr dankbar, da jquery neu für mich ist und ich es gerne verstehen würde - arbeite mich quasi gerade ein.

Grüße

[Kropff]

Also mit jQuery kenne ich mich kaum aus. Ich programmier so was per Hand. Wie wird denn das aktive Panel überhaupt definiert?

Peter

[gmf2]

Schade, da sind wir dann wohl schon zwei, wobei ich grundsätzlich erst beginne, mich mit Javascripten auseinander zu setzen; hab vorher "nur" PHP, SQL, HTML und bash geschrieben,

Das Startpannel welches standartmäßig aufgerufen wird steht in Zeile 113

    growBigger("#panel_3");    
    var curPanel = 3; 

Und dann werden die "Nachbarpannels" per Addition/Subtraktion bestimmt:

    $("#panel_"+(curPanel+1)).click(function(){ change(true); });
    $("#panel_"+(curPanel-1)).click(function(){ change(false); });
    
    //when the left/right arrows are clicked
    $(".right").click(function(){ change(true); });    
    $(".left").click(function(){ change(false); }); 

Gerade weil ich mich damit noch nicht wirklich auskenne, kommen mir dabei immer solche Gedanken wie, einfach die aktive Panel ID irgendwie abzufragen und später den Zusatz drunter zu hängen, dass die aktive ID eben ein "show" ist und alles andere auf "hide" bleibt.

Ob dieser Ansatz mit jquery überhaupt so machbar ist, hab ich noch nicht rausgefunden.

[Kropff]

Dann hast du also die Variable curPanel, in der die Nummer des aktiven Panels gespeichert ist. Also musst du vom Prinzip her so vorgehen.

<div class="detail" id="panel_1" style="display: none;">...</div>
<div class="detail" id="panel_2" style="display: none;">...</div>
<div class="detail" id="panel_3" style="display: none;">...</div>
...
document.getElementById('panel_' + curPanel).style.display = 'block'; 

Allerdings kann ich dir an dieser Stelle nicht weiter helfen, da wie schon gesagt, meine jQuery-Kenntnisse äußerst bescheiden sind.

Peter

[gmf2]

Hm, okay - erstmal danke für den Ansatz!

Ich werds versuchen und dann berichten.

[gmf2]

Noch eine kurze Frage,
geh ich richtig in die Anahme, deine[COLOR=#000000][COLOR=#006600] [COLOR=Black]"document.getElementById - Zeile" mit in die growBigger Funktion packen zu können, da diese ja beim wechsel durchlaufen wird?, wenn ja wie müsste da die Zeile aussehen?

EDIT:
Vielen Dank!, [/COLOR][/COLOR][/COLOR][COLOR=#000000][COLOR=#006600][COLOR=Black]Dein Ansatz funktioniert! [/COLOR][/COLOR][/COLOR][COLOR=#000000][COLOR=#006600][COLOR=Black]habs hinbekommen.

[/COLOR] [/COLOR][/COLOR]

[wono]

Wenn ich dich richtig verstanden habe dann kannst du allem div einen display:none geben dann mit jquery arbeiten und das anzeigen lassen was aktiv ist.

Wenn das irgenwie ein link oder button ist der aktiv wird kannst dir ja ne Variable setzten die du einfach abfrägst und wenn die Variable z.B == 1 ist änderst du über jquery das display:none des ersten divs.

Weiß allerdings nicht ob das zu 100% mit deinem Problem übereinstimmt.