Índice
Portal
Buscar
Últimas imágenes
Registrarse
Conectarse
![[Codigo HTML] Super Galeria Empty](https://2img.net/i/empty.gif)
Hola
Miren este es el codigo para crear una gran galeria para tu web........
Miren este es el codigo para crear una gran galeria para tu web........
- Código:
<!-- // (C) 2008 Marvbec Zero // --> <- / / (C) 2008 Marvbec Zero / / -> <!-- // CSS-Formatierung der Tabellen, Grafiken und Buttons // --> <- / / CSS formato de tablas, gráficos y botones / / -> <style type="text/css"><!-- <style type="text/css"> <--
table.Gallerietabelle {border:2px solid #000000; width:550px; background-color:#ffffff} table.Gallerietabelle (frontera: 2px solid # 000000; width: 550px; fondo-color: # FFFFFF)
table.Gallerietabelle span,input {font-weight:bold; font-family:Trebuchet MS, Arial; font-size:14px; text-align:center} table.Gallerietabelle span, de entrada (font-weight: bold; font-family: Trebuchet MS, Arial; font-size: 14px; texto-se suman: el centro)
td.Gallerienavigation {height:35px} td.Gallerienavigation (altura: 35px)
span.Galleriebutton {margin:0px; display:block; border:1px solid #000000; cursor:pointer; height:20px; width:200px} span.Galleriebutton (margin: 0px; pantalla: bloque; border: 1px solid # 000000; cursor: pointer; altura: 20px; width: 200px)
form.Statusfeld {margin:0px} form.Statusfeld (margin: 0px)
input.Zaehlerfeld {text-align:center; height:24px; padding:0; width:100px; border:0} input.Zaehlerfeld (texto-se suman: centro; altura: 24px; padding: 0; width: 100px; frontera: 0)
td.Hauptfeld {border:1px solid #000000} td.Hauptfeld (border: 1px solid # 000000)
div.Hauptbildchen {width:525px; overflow:auto; text-align:center} div.Hauptbildchen (ancho: 525px; overflow: auto; texto-se suman: el centro)
div.Hauptbildchen img {border:1px solid #000000; max-width:500px} div.Hauptbildchen (img border: 1px solid # 000000; max-width: 500px)
td.Vorschaufeld {border:1px solid #000000; max-height:125px; height:expression(this.scrollHeight>125?125:auto)} td.Vorschaufeld (border: 1px solid # 000000; max-altura: 125px; altura: expresión (this.scrollHeight> 125? 125: auto))
div.Vorschaubildchen {overflow:auto; max-height:125px; height:expression(this.scrollHeight>125?125:auto)} div.Vorschaubildchen (overflow: auto, max-altura: 125px; altura: expresión (this.scrollHeight> 125? 125: auto))
div.Vorschaubildchen img {margin:2px; max-height:50px; height:expression(this.scrollHeight>50?50:auto); border:1px solid #000000; cursor:pointer} div.Vorschaubildchen img (margin: 2px; max-altura: 50px; altura: expresión (this.scrollHeight> 50? 50: auto); border: 1px solid # 000000; cursor: pointer)
--></style> --></ Estilo> <script language="Javascript"><!-- <script language="Javascript"> <--
// (C) 2008 Marvbec Zero // / / (C) 2008 Marvbec Zero / /
var Bildnummer=1; Moduswechsel=0 número de imagen var = 1; intercambio mode = 0
function Bildwechsel(Moduswechsel){ pantallas de función (modo de cambio) (
if (Moduswechsel==1){ if (cambiando el modo == 1) (
Bildnummer-- Número de imagen --
if (Bildnummer<=0){Bildnummer=1} if (foto número <= 0) (imagen) = 1 punto
Moduswechsel=0} Cambiar el modo = 0)
if (Moduswechsel==2){ if (cambiando el modo == 2) (
Bildnummer++ Imagen número + +
// Die Position der 9 beschreibt die Gesamtanzahl(!) aller Bilder. / / La posición de las 9 describe el número total (!) De todas las imágenes. Dies muss ggf. angepasst werden. Este debe ser adaptado en caso necesario. // / /
if (Bildnummer> 9 ){Bildnummer=Bildnummer-1} if (foto número> 9) (número de imagen = Número-1)
Moduswechsel=0} Cambiar el modo = 0)
// Die Position der 9 beschreibt die Gesamtanzahl(!) aller Bilder. / / La posición de las 9 describe el número total (!) De todas las imágenes. Dies muss ggf. angepasst werden. Este debe ser adaptado en caso necesario. // / /
document.Statusanzeige.Zaehleranzeige.value=Bildnummer+"/ 9 " document.Statusanzeige.Zaehleranzeige.value = nombre + "/ 9"
switch (Bildnummer){ switch (nombre) (
// Beim Hinzufügen weiterer case-Befehle muss man die Ziffer um je 1 erhöhen! / / Al añadir otro caso comandos debe ser la de aumentar el número por 1! // / /
// Anstelle der Bild-URL sollten jeweils verschiedene gültige Bildadressen eingetragen werden. / / En lugar de la URL de imagen debe cada imagen válida se introducen las direcciones. // / /
case 1 :document.Galleriebild.src=" BILD-URL 1 " caso 1: document.Galleriebild.src = "URL IMAGEN 1"
break Romper
case 2 :document.Galleriebild.src=" BILD-URL 2 " caso 2: document.Galleriebild.src = "URL IMAGEN 2"
break Romper
case 3 :document.Galleriebild.src=" BILD-URL 3 " caso 3: document.Galleriebild.src = "URL IMAGEN 3"
break Romper
case 4 :document.Galleriebild.src=" BILD-URL 4 " Caso 4: document.Galleriebild.src = "URL de la imagen 4"
break Romper
case 5 :document.Galleriebild.src=" BILD-URL 5 " Caso 5: document.Galleriebild.src = "URL de imagen 5"
break Romper
case 6 :document.Galleriebild.src=" BILD-URL 6 " Caso 6: document.Galleriebild.src = "URL IMAGEN 6"
break Romper
case 7 :document.Galleriebild.src=" BILD-URL 7 " caso 7: document.Galleriebild.src = "URL IMAGEN 7"
break Romper
case 8 :document.Galleriebild.src=" BILD-URL 8 " caso 8: document.Galleriebild.src = "URL IMAGEN 8"
break Romper
case 9 :document.Galleriebild.src=" BILD-URL 9 " caso 9: document.Galleriebild.src = "URL IMAGEN 9"
break Romper
// usw. // / / Etc / /
// Der letzte case-Befehl sollte die Gesamtanzahl(!) aller Bilder sein. / / El último caso debe contar con el número total (!) De todas las imágenes. // / /
}} ))
--></script> --></ script> <table cellspacing="5" class="Gallerietabelle"><tr><td class="Gallerienavigation"><table width="100%"><tr><td align="right"> <table cellspacing="5" class="Gallerietabelle"> <tr> <td class="Gallerienavigation"> <table width="100%"> <tr> <td align="right"> <span class="Galleriebutton" onclick_fckprotectedatt=" onclick="Bildwechsel(1)""> <span class="Galleriebutton" onclick_fckprotectedatt=" onclick="Bildwechsel(1)""> <!-- // Dies ist der Text auf dem "Zurückbutton". <- / / Este es el texto sobre el "Back Button". Diesen kann man ggf. noch nach eigenen Wünschen anpassen. Esto puede tener, según su propio deseo. // --> / / -> Zurück Espalda </span> </ Span> </td><td width="100px"> </ Td> <td width="100px"> <form class="Statusfeld" name="Statusanzeige"> <form class="Statusfeld" name="Statusanzeige"> <!-- // Die Position der 9 bei value beschreibt die Gesamtanzahl(!) aller Bilder. <- / / La posición de 9 para el valor describe el número total (!) De todas las imágenes. Dies muss ggf. angepasst werden. Este debe ser adaptado en caso necesario. // --> / / -> <input class="Zaehlerfeld" type="text" name="Zaehleranzeige" value="1/ 9 " readonly> class = "Zaehlerfeld" <input type="text" name="Zaehleranzeige" value="1/ 9 "readonly> </form></td><td> </ Form> </ td> <TD> <span class="Galleriebutton" onclick_fckprotectedatt=" onclick="Bildwechsel(2)""> <span class="Galleriebutton" onclick_fckprotectedatt=" onclick="Bildwechsel(2)""> <!-- // Dies ist der Text auf dem "Weiterbutton". <- / / Este es el texto en el botón Siguiente. Diesen kann man ggf. noch nach eigenen Wünschen anpassen. Esto puede tener, según su propio deseo. // --> / / -> Weiter Más lejos </span> </ Span> </td></tr></table></td></tr><tr><td class="Vorschaufeld"> </ Td> </ tr> </ table> </ td> </ tr> <td <tr> class = "Vorschaufeld"> <div class="Vorschaubildchen" align="center"> <div align="center"> class = "Vorschaubildchen" <span onclick_fckprotectedatt=" onclick="Bildwechsel()""> <span onclick_fckprotectedatt=" onclick="Bildwechsel()""> <!-- // Dies ist die Vorschaubildliste. <- / / Esta es la lista en miniatura. Beim Hinzufügen weiterer Grafiken muss man die Bildnummer um je 1 erhöhen! Al añadir otros gráficos debe ser la imagen para aumentar el número por 1! // --> / / -> <!-- // Der Bildnummern müssen die selben Bild-URLs zugeordnet sein, wie in den case-Befehlen im Javascript! <- / / Los números de imagen tienen la misma imagen URL asignado, como en el caso de comandos Javascript! // --> / / -> <img onclick_fckprotectedatt=" onclick="Bildnummer= 1 "" src=" BILD-URL 1 " _fcksavedurl=" BILD-URL 1 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 1 ""src=" BILD-URL 1 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 2 "" src=" BILD-URL 2 " _fcksavedurl=" BILD-URL 2 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 2 ""src=" BILD-URL 2 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 3 "" src=" BILD-URL 3 " _fcksavedurl=" BILD-URL 3 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 3 ""src=" BILD-URL 3 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 4 "" src=" BILD-URL 4 " _fcksavedurl=" BILD-URL 4 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 4 ""src=" BILD-URL 4 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 5 "" src=" BILD-URL 5 " _fcksavedurl=" BILD-URL 5 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 5 ""src=" BILD-URL 5 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 6 "" src=" BILD-URL 6 " _fcksavedurl=" BILD-URL 6 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 6 ""src=" BILD-URL 6 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 7 "" src=" BILD-URL 7 " _fcksavedurl=" BILD-URL 7 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 7 ""src=" BILD-URL 7 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 8 "" src=" BILD-URL 8 " _fcksavedurl=" BILD-URL 8 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 8 ""src=" BILD-URL 8 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 9 "" src=" BILD-URL 9 " _fcksavedurl=" BILD-URL 9 "> <img onclick_fckprotectedatt=" onclick="Bildnummer= 9 ""src=" BILD-URL 9 "> </span></div></td></tr><tr><td class="Hauptfeld"> </ Span> </ div> </ td> </ tr> <td <tr> class = "Hauptfeld"> <div class="Hauptbildchen"> <div class="Hauptbildchen"> <!-- // Hier muss die Bild-URL hinein, dessen Bild als erstes angezeigt werden soll. <- / / En este caso, la URL de imagen en cuya imagen fue el primero en aparecer. // --> / / -> <img name="Galleriebild" src=" BILD-URL 1 " _fcksavedurl=" BILD-URL 1 "> name="Galleriebild" <img src=" " _fcksavedurl=" "> BILD-URL 1 </div></td></tr></table> </ Div> </ td> </ tr> </ table>
