| Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
| Autor |
Nachricht |
Klaus
Gast
|
 Viele (gleichwertige) Funktionen durch Schleife ersetzen |
 |
|
Hallo Alle zusammen!
Ich bin gerade dabei eine Bildergallerie zu machen, die mit vielen Thumbs ausgestattet ist. Bei Klick auf ein Thumb wir dann das jeweilige Orginal mit Javascript in einen Container geladen.
Leider ist mein Code eher als "Dirty Code" zu bezeichnen...
| Code: |
function img1() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img1.jpg)";
}
function img2() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img2.jpg)";
}
function img3() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img3.jpg)";
}
function img4() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img4.jpg)";
}
function img5() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img5.jpg)";
}
function img6() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img6.jpg)";
}
function img7() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img7.jpg)";
}
function img8() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img8.jpg)";
}
function img9() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img9.jpg)";
}
function img10() {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img10.jpg)";
}
// usw.
|
Wie kann ich vermeiden für jedes Thumb eine eigene Funktion zu verwenden? Bei einigen hundert Bildern wird die js-Datei sonst nämlich ein wahres Monster!
Vielen Dank für Eure Mithilfe!
Klaus |
|
|
|
| 17 Mai 2010 20:56 |
|
  |
Werner
Homepage-Total.de
Moderator
|
|
|
|
| Code: | <script type="text/javascript">
function img(nr) {
document.getElementById('gallery_imagecontainer').style.backgroundImage = "url(../images/img" + nr + ".jpg)";
}
</script>
<img src="bild1.gif" onClick="img('1')">
<img src="bild2.gif" onClick="img('2')"> |
|
_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt |
|
|
| 18 Mai 2010 19:24 |
|
|
Klaus
Gast
|
| Vielen Dank! |
|
|
Hallo Werner!
Vielen Dank für Deine kompetente Antwort!
Bei Javascript muss man scheint's "um die Ecke" denken!
Irgendwie ist das wohl nicht mein Ding...
Vielleicht fehlt mir die Logik?
Ich hab jetzt versucht Deine Variante auf einen weiteren Baustein meines Scripts anzuwenden, bin aber kläglich gescheitert!
Ich habe zwar meine Thumbs via onclick="img('X')" (statt onclick="imgX()") mit Deiner Lösung verknüpft. Wie aber vermeide ich nun für jedes Thumb eine eigene Variable zu schreiben?
| Code: |
var thumb1 = '<li><a href="#" onclick="img(\'1\')" class="tab_1" accesskey="1" title="image 1"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>';
var thumb2 = '<li><a href="#" onclick="img(\'2\')" class="tab_2" accesskey="2" title="image 2"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>';
var thumb3 = '<li><a href="#" onclick="img(\'3\')" class="tab_3" accesskey="3" title="image 3"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>';
var thumb4 = '<li><a href="#" onclick="img(\'4\')" class="tab_4" accesskey="4" title="image 4"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>';
var thumb5 = '<li><a href="#" onclick="img(\'5\')" class="tab_5" accesskey="5" title="image 5"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>';
//usw.
|
Die "vars" der Zeile lassen sich ja nicht einfach um eins vergrössern:
| Code: |
//etwa
var thumb + i = ...
|
|
|
|
|
| 20 Mai 2010 08:04 |
|
|
Werner
Homepage-Total.de
Moderator
|
|
|
|
| Warum für jedes Bild eine eigene Variable, und wie soll das ganze dann ausgegeben werden? |
_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt |
|
|
| 20 Mai 2010 19:32 |
|
|
Klaus
Gast
|
|
|
|
Für jedes Bild eine Varible um einen Karussell-Effekt zu bekommen.
Es werden immer nur 5 Thumbs gezeigt, bei Klick auf den next-Button gibt's das sechste Thumb und Thumb 1 verschwindet. Bei Klick auf ein Thumb wird das Orginalbild in den Imagecontainer geladen. |
|
|
|
| 20 Mai 2010 19:54 |
|
|
Klaus
Gast
|
|
|
|
Ach du wolltest ja wissen wie es ausgegeben wird:
[code]
document.write('' + buttonprev0 + thumb1 + thumb2 + thumb3 + thumb4 + thumb5 + buttonnext2 + ''); |
|
|
|
| 20 Mai 2010 19:57 |
|
|
Werner
Homepage-Total.de
Moderator
|
|
|
|
| Zitat: | Wie aber vermeide ich nun für jedes Thumb eine eigene Variable zu schreiben?
...
Die "vars" der Zeile lassen sich ja nicht einfach um eins vergrössern |
Mit PHP geht das schon:
| PHP-Code: | 1
2
3
4
5
6
7
8
9
| <script type="text/javascript">
...
<?php
for ($zaehler = 1; $zaehler < 11; $zaehler++) {
echo "var thumb$zaehler = '<li><a href=\"#\" onclick=\"img(\'$zaehler\')\" class=\"tab_$zaehler\" accesskey=\"$zaehler\" title=\"image $zaehler\"><img class=\"gallery_tab\" alt=\"\" src=\"transparent.gif\"></a></li>';\n ";
}
?>
...
</script> |
|
_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt |
|
|
| 23 Mai 2010 14:25 |
|
|
Klaus
Gast
|
|
|
|
Hallo Werner!
Daran hab ich auch schon gedacht (allerdings in javascript). Hab' sogar erwogen deswegen auf die Vars zu verzichten und gleich so auszugeben:
| Code: |
var anzahl = "x"
for(i=1;i<anzahl;i++){
document.write('<li><a href="#" onclick="img(' + i + ')" class="tab_' + i + '" accesskey="' + i + '" title="image ' + i + '"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>');
}
|
Doch dabei ensteht (egal ob Javascript oder PHP) ein, bzw. gleich mehrere Probleme:
1. Wie zuvor beschrieben, möchte ich (s. Karusell-Effekt) nur fünf Thumbs auf einmal ausgeben. Der Zähler (hier: anzahl, bei Dir $zaehler) ist mir unbekannt (s.o. "var anzahl = x") und ergibt sich aus der Menge von Bilddateien in einem Verzeichnis "y" und geschieht in der Tat durch PHP. Also dynamisch, nicht statisch-manuell.
Natürlich könnte man da sicher was tricksen, etwa in der Art:
| Code: |
for(i=1;i<anzahl-anzahl+6;i++){
document.write('<li><a href="#" onclick="img(' + i + ')" class="tab_' + i + '" accesskey="' + i + '" title="image ' + i + '"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>');
}
|
Dies wäre aber nun wirklich alles andere als Dynamisch, dann könnte man besser alles gleich hinschreiben.
2. Die Thumbs sind natürlich css-formatiert und deswegen in einer Liste sortiert und Listenelemente. Diese Aufzählungsliste wird durch <ul> eingeleitet, der eine "id" (zum ansteuern mit "document.getElementById") zugeordnet ist. Meine fünf Thumbs (als Listenelemente) sollen nun innerhalb dieser geschlossenen unsortierten Liste stehen.
Wie Du natürlich weißt, muss man eine Liste auch "einmalig" schliessen bzw. öffnen, dies geht aber nicht innerhalb einer for()-Konstruktion.
Bei Ausgabe soll in jedem Fall (hier: Case 1 u. als HTML dargestellt) folgendes bei rauskommen:
| Code: |
<ul id="gallery_nav1">
<li><a href="#" class="prev_dis" title=""><img class="gallery_button" alt="" src="transparent.gif"></a></li>
<li><a href="#" onclick="img('1')" class="tab_1" accesskey="1" title="image 1"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>
<li><a href="#" onclick="img('2')" class="tab_2" accesskey="2" title="image 2"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>
<li><a href="#" onclick="img('3')" class="tab_3" accesskey="3" title="image 3"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>
<li><a href="#" onclick="img('4')" class="tab_4" accesskey="4" title="image 4"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>
<li><a href="#" onclick="img('5')" class="tab_5" accesskey="5" title="image 5"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>
<li><a href="#" onclick="flip('2')" class="next" title="next"><img class="gallery_button" alt="" src="transparent.gif"></a></li>
</ul>
|
Für jedes "var = x+1" immer alles ein Zähler nach oben!
Trotzdem halte ich Deinen Hinweis auf PHP für überlegenswert.
Da muss es doch sicher eine Lösung geben? |
|
|
|
| 23 Mai 2010 18:10 |
|
|
Werner
Homepage-Total.de
Moderator
|
|
|
|
| Zitat: | Wie Du natürlich weißt, muss man eine Liste auch "einmalig" schliessen bzw. öffnen, dies geht aber nicht innerhalb einer for()-Konstruktion.
|
| Code: | <ul>
<script type="text/javascript">
for (zaehler = 1; zaehler < 5; zaehler++) {
document.write("<li>" + zaehler + "</li>");
}
</script>
</ul> |
---
| Code: | var anzahl = "x"
for(i=1;i<anzahl;i++){
document.write('<li><a href="#" onclick="img(' + i + ')" class="tab_' + i + '" accesskey="' + i + '" title="image ' + i + '"><img class="gallery_tab" alt="" src="transparent.gif"></a></li>');
} |
| Zitat: | | Der Zähler (hier: anzahl, bei Dir $zaehler) ist mir unbekannt (s.o. "var anzahl = x") und ergibt sich aus der Menge von Bilddateien in einem Verzeichnis |
Anzahl der Bilder in einem Verzeichnis auslesen (PHP 5)
| PHP-Code: | 1
2
3
4
| <?php
$verzeichnis = scanDir("bilder/");
echo substr_count(implode("", $verzeichnis), ".jpg");
?> |
|
_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt |
|
|
| 03 Jun 2010 15:50 |
|
|
