Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Duddle" data-source="post: 1402501" data-attributes="member: 17775">AW: Javascript &quot;onClick&quot;: aufrufende Funktion je nach sichtbarem DIV ändernMal eine &quot;wenn ich unbedingt auf fertige und viel, viel, viel bessere Plugins verzichten will, die kostenlos und innerhalb von Minuten find- und einsetzbar sind&quot;-Lösung:[HTML]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Mehrere Galerien mit jQuery&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &lt;script src=&quot;js/jquery.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; charset=&quot;utf-8&quot;&gt;&nbsp; &nbsp; //&lt;![CDATA[&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;.galerie&#039;).each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).children(&#039;img&#039;).not(&#039;:first&#039;).hide(); //jedes Bild ausser das erste je Galerie verstecken&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).not(&#039;:first&#039;).hide(); //dann jede Galerie ausser der ersten verstecken&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //menu-Link-Klick: alle Galerien verstecken, dann nur die per href identifizierte zeigen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#menu a&#039;).click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;.galerie&#039;).hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;.galerie&#039;).filter(this.hash).show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //voriges Bild-Link:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //suche ein Bild vor dem derzeit in dieser Galerie sichtbaren Bild, zeige es an,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //verstecke den Nachfolger (bisher sichtbares Bild)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;a.previous&#039;).click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent(&#039;div&#039;).find(&#039;img:visible&#039;).prev(&#039;img&#039;).fadeIn().next(&#039;img&#039;).hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //naechstes Bild-Link:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //suche ein Bild nach dem derzeit in dieser Galerie sichtbaren Bild, zeige es an,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //verstecke den Vorgaenger (bisher sichtbares Bild)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;a.next&#039;).click(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent(&#039;div&#039;).find(&#039;img:visible&#039;).next(&#039;img&#039;).fadeIn().prev(&#039;img&#039;).hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; //]]&gt;&nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;menu&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#galerie1&quot;&gt;Galerie 1 zeigen&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#galerie2&quot;&gt;Galerie 2 zeigen&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#galerie3&quot;&gt;Galerie 3 zeigen&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;galerie&quot; id=&quot;galerie1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Galerie 1&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm5.static.flickr.com/4035/4456981826_5171755039_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm3.static.flickr.com/2708/4453685306_e0f7f24579_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm3.static.flickr.com/2680/4457285969_d8cc785180_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;hr /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; class=&quot;previous&quot;&gt;Voriges Bild&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; class=&quot;next&quot;&gt;Nächstes Bild&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;galerie&quot; id=&quot;galerie2&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Galerie 2&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm3.static.flickr.com/2747/4453698773_186aa981db_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm3.static.flickr.com/2762/4453900930_0ae5683748_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;hr /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; class=&quot;previous&quot;&gt;Voriges Bild&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; class=&quot;next&quot;&gt;Nächstes Bild&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;galerie&quot; id=&quot;galerie3&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Galerie 3&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm5.static.flickr.com/4046/4453967121_5e4cd3e731_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm3.static.flickr.com/2799/4445667006_43ea334483_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://farm5.static.flickr.com/4027/4456767021_4cbf6a9399_m.jpg&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;hr /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; class=&quot;previous&quot;&gt;Voriges Bild&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; class=&quot;next&quot;&gt;Nächstes Bild&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]Anleitung: neue HTML-Datei erstellen, Quellcode reinkopieren, <a href="http://code.jquery.com/jquery-1.4.2.min.js" target="_blank">diese Datei</a> in einem Unterverzeichnis &quot;js&quot; als &quot;jquery.js&quot; speichern, die HTML-Datei öffnen, sich des Lebens erfreuen.Der gezeigte ist sicherlich nicht der beste Ansatz, aber er funktioniert.Und wenn du jetzt sagst, dass du auch kein jQuery benutzen willst, dann werfe ich meine Hände in die Luft und gebe auf.Duddle</blockquote>

[QUOTE="Duddle, post: 1402501, member: 17775"] [b]AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern[/b] Mal eine "wenn ich unbedingt auf fertige und viel, viel, viel bessere Plugins verzichten will, die kostenlos und innerhalb von Minuten find- und einsetzbar sind"-Lösung: [HTML] <!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> <title>Mehrere Galerien mit jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" language="javascript" charset="utf-8"> //<![CDATA[ $(document).ready(function() { $('.galerie').each(function() { $(this).children('img').not(':first').hide(); //jedes Bild ausser das erste je Galerie verstecken }).not(':first').hide(); //dann jede Galerie ausser der ersten verstecken //menu-Link-Klick: alle Galerien verstecken, dann nur die per href identifizierte zeigen $('#menu a').click(function() { $('.galerie').hide(); $('.galerie').filter(this.hash).show(); return false; }); //voriges Bild-Link: //suche ein Bild vor dem derzeit in dieser Galerie sichtbaren Bild, zeige es an, //verstecke den Nachfolger (bisher sichtbares Bild) $('a.previous').click(function() { $(this).parent('div').find('img:visible').prev('img').fadeIn().next('img').hide(); return false; }); //naechstes Bild-Link: //suche ein Bild nach dem derzeit in dieser Galerie sichtbaren Bild, zeige es an, //verstecke den Vorgaenger (bisher sichtbares Bild) $('a.next').click(function() { $(this).parent('div').find('img:visible').next('img').fadeIn().prev('img').hide(); return false; }); }); //]]> </script> <body> <div id="menu"> <a href="#galerie1">Galerie 1 zeigen</a> <a href="#galerie2">Galerie 2 zeigen</a> <a href="#galerie3">Galerie 3 zeigen</a> </div> <div class="galerie" id="galerie1"> <h1>Galerie 1</h1> <img src="http://farm5.static.flickr.com/4035/4456981826_5171755039_m.jpg" /> <img src="http://farm3.static.flickr.com/2708/4453685306_e0f7f24579_m.jpg" /> <img src="http://farm3.static.flickr.com/2680/4457285969_d8cc785180_m.jpg" /> <hr /> <a href="#" class="previous">Voriges Bild</a> <a href="#" class="next">Nächstes Bild</a> </div> <div class="galerie" id="galerie2"> <h1>Galerie 2</h1> <img src="http://farm3.static.flickr.com/2747/4453698773_186aa981db_m.jpg" /> <img src="http://farm3.static.flickr.com/2762/4453900930_0ae5683748_m.jpg" /> <hr /> <a href="#" class="previous">Voriges Bild</a> <a href="#" class="next">Nächstes Bild</a> </div> <div class="galerie" id="galerie3"> <h1>Galerie 3</h1> <img src="http://farm5.static.flickr.com/4046/4453967121_5e4cd3e731_m.jpg" /> <img src="http://farm3.static.flickr.com/2799/4445667006_43ea334483_m.jpg" /> <img src="http://farm5.static.flickr.com/4027/4456767021_4cbf6a9399_m.jpg" /> <hr /> <a href="#" class="previous">Voriges Bild</a> <a href="#" class="next">Nächstes Bild</a> </div> </body> </html> [/HTML] Anleitung: neue HTML-Datei erstellen, Quellcode reinkopieren, [URL="http://code.jquery.com/jquery-1.4.2.min.js"]diese Datei[/URL] in einem Unterverzeichnis "js" als "jquery.js" speichern, die HTML-Datei öffnen, sich des Lebens erfreuen. Der gezeigte ist sicherlich nicht der beste Ansatz, aber er funktioniert. Und wenn du jetzt sagst, dass du auch kein jQuery benutzen willst, dann werfe ich meine Hände in die Luft und gebe auf. Duddle [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?