Hei,
Habe eine Frage zu nem Script den ich hier gefunden habe.
Er ist eigentlich genau das was ich brauche nur bräuchte ich noch in der linken spalte

1. Immer ein bischen Platz zwischen den jeweiligen Bildern
2. Sollte die gesammte linke Auflistung der kleinen Bilder scrollbar sein.

Am besten wäre es wenn mir jemand soetwas in Html basteln könnte, ist doch bestimmt auch möglich oder ?


Wär super wenn mir Jemand helfen könnte =)

(Habe ihn etwas bearbeitet und etwas rumexperimentiert, ist jedoch noch funktionstüchtig =P )




Hier der Java Script:


<br />
<script type="text/javascript">
<!--
var Anzeigebilder = new Array();
var Bildbeschriftungen = new Array();
var i = 0;
var lt = unescape("%3C");

/***** Hier die Adressen der Bilder + die Beschriftungen eintragen *****/
Anzeigebilder[i] = "www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
/***** Ab hier nichts mehr ändern *****/

document.write(lt+'table border="0" width="500" cellspacing="0" cellpadding="0" style="height: 350px; border: 0px solid #FFFFFF">');
document.write(lt+'tr>'+lt+'td width="152" align="center" bgcolor="#FFFFFF" style="border-right: 1px solid #FFFFFF">'+lt+'div style="width: 145px; height: 340; overflow: auto">');

for(var i=0;i<Anzeigebilder.length;i++)
document.write(lt+'img border="0" src="'+Anzeigebilder[i]+'" alt="" width="128" onclick="javascript:Bild_anzeigen('+i+')" style="cursor: hand">'+lt+'br>');

document.write(lt+'/div>'+lt+'/td>'+lt+'td width="348" align="center" bgcolor="#BBBBBB">');

for(var i=0;i<Anzeigebilder.length;i++)
document.write(lt+'form name="Anzeigebilder" action="" style="display: none">'+lt+'img border="0" src="'+Anzeigebilder[i]+'" alt="'+Bildbeschriftungen[i]+'" width="520" >'+lt+'br>'+Bildbeschriftungen[i]+lt+'/form>');

document.write(lt+'/td>'+lt+'/tr>'+lt+'/table>');

function Bild_anzeigen(Bildnummer)
{
for(var i=0;i<Anzeigebilder.length;i++)
document.Anzeigebilder[i].style.display = "none";
document.Anzeigebilder[Bildnummer].style.display = "";
}
//-->
</script><br />

Hallo,

ich hab dir das Javascript umgebaut

Hier ist der neue Code:
<script type="text/javascript">
<!--
var Anzeigebilder = new Array();
var Bildbeschriftungen = new Array();
var i = 0;
var lt = unescape("%3C");

/***** Hier die Adressen der Bilder + die Beschriftungen eintragen *****/
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
/***** Ab hier nichts mehr ändern *****/

document.write(lt+'table border="0" width="700" cellspacing="0" cellpadding="0" style="height: 350px; border: 0px solid #FFFFFF">');
document.write(lt+'tr>'+lt+'td width="152" align="center" bgcolor="#FFFFFF" style="border-right: 1px solid #FFFFFF">'+lt+'div style="width: 145px; height: 340; overflow: scroll; overflow-x: auto">');

for(var i=0;i<Anzeigebilder.length;i++)
document.write(lt+'img border="0" src="'+Anzeigebilder[i]+'" alt="" width="128" onclick="javascript:Bild_anzeigen('+i+')" style="cursor: hand">'+lt+'br>'+lt+'br>');

document.write(lt+'/div>'+lt+'/td>'+lt+'td width="548" align="center" bgcolor="#BBBBBB">');

for(var i=0;i<Anzeigebilder.length;i++)
document.write(lt+'form name="Anzeigebilder" action="" style="display: none">'+lt+'img border="0" src="'+Anzeigebilder[i]+'" alt="'+Bildbeschriftungen[i]+'" width="520">'+lt+'br>'+Bildbeschriftungen[i]+lt+'/form>');

document.write(lt+'/td>'+lt+'/tr>'+lt+'/table>');

function Bild_anzeigen(Bildnummer)
{
for(var i=0;i<Anzeigebilder.length;i++)
document.Anzeigebilder[i].style.display = "none";
document.Anzeigebilder[Bildnummer].style.display = "";
}
//-->
</script>
Die umgeänderten Stellen habe ich hier farbg markiert.

Scrollleisten gibt es bei den kleinen Bildern auf der linken Seite eigentlich schon, nur werden die in manchen Browsern nicht dargestellt, weil die dafür verantwortliche CSS-Eigenschaft overflow ziemlich unterschiedlich interpretiert wird. Ich hab overflow jetzt auf scroll umgeändert und mit overflow-x die vertikale Scrollleiste unterdrückt (im Code rot geschrieben). Hoffentlich funktioniert es jetzt richtig

Einen zusätzlichen Abstand zwischen den kleinen Bildern hab ich jetzt auch dazugegeben (grün markiert).

Danke für deine schnelle Antwort =)

Hob jedoch noch ein Problem...

Das ganze Ding sollte nur so lang sein wie ein Bild.
Ich hab gestern auch mal etwas rumgescriptet und es ist eigentlich ziemlich gut so und auf Firefox tut es auch aber auf dem Explorer nicht

Wär mega wenn du mir nochmals helfen könntest =)

So sollte es ca ausschauen: (Nur auf Firefox sichtbar)

photomera.de.tl/xxx.htm

Hier der Code dazu:

<style type="text/css">
<!--
.Hintergrund {
padding: 15px;
width: 680px;
background-color: #FFFFFF; background-image: url(oder Bild-URL);
background-repeat: repeat-x;
border: 2px solid #565656;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
overflow: hidden; }

/* Feld für Links */
.Menu {
color: #FFFFB2;
float: left;
width: 110px;
text-align: left; }

/* Auflistung der Links */
li{
margin-left: 0px!important;
list-style-type: none!important; }

/* Linkfarbe - Linkgröße */
.Menu li a {
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
font-family: arial; }

/* Linkfarbe für Hover-Effekt */
.Menu li a:hover {
color: #74B9FE;
font-weight: bold; }

/* Feld für Bilder */
.Bilder {
float: right;
width: 400px;
border: 0px solid #C4D0EA; }
-->
</style>


<div class="Hintergrund">
<div class="Menu">Natur:
<div style="width: 210px; height: 300px; overflow: auto;">
<table border="1">
</table>
<table height="1015" cellspacing="1" cellpadding="1" border="0" width="184" style="">
<tbody>
<tr>
<td><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh....nbsp;</a><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh.jpg"><img src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" alt="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" style="cursor: -moz-zoom-in; width: 167px;" /></a></td>
</tr>
<tr>
<td><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh....nbsp;</a><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh.jpg"><img src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" alt="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" style="cursor: -moz-zoom-in; width: 167px;" /></a></td>
</tr>
<tr>
<td><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh....nbsp;</a><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh.jpg"><img src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" alt="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" style="cursor: -moz-zoom-in; width: 167px;" /></a></td>
</tr>
<tr>
<td><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh....nbsp;</a><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh.jpg"><img src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" alt="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" style="cursor: -moz-zoom-in; width: 167px;" /></a></td>
</tr>
<tr>
<td><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh....nbsp;</a><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh.jpg"><img src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" alt="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" style="cursor: -moz-zoom-in; width: 167px;" /></a></td>
</tr>
<tr>
<td><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh....nbsp;</a><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh.jpg"><img src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" alt="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" style="cursor: -moz-zoom-in; width: 167px;" /></a></td>
</tr>
<tr>
<td><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh....nbsp;</a><a target="inline" href="www.fotos-hochladen.net/1000aufsgvn94uh.jpg"><img src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" alt="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" style="cursor: -moz-zoom-in; width: 167px;" /></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="Bilder"><iframe scrolling="no" frameborder="0" style="width: 400px; height: 300px;" name="inline" src="www.fotos-hochladen.net/1000aufsgvn94uh.jpg" marginheight="0" marginwidth="0"></iframe></div>
</div>
<br />


Kann sein das da ein Fehler drin ist oder muss man das ganz anderst machen? Bin nicht so der Profi, hab so ne änliche Tabelle wo gefunden und solange Sachen verändert und geschaut was pasiert bis es gepasst hat^^... Hab auch schon öfters gelesen das der Explorer oft wegen kleinen Fehlern garnichtsmehr anzeigt wobei Firefox hingegen oft "Ein Auge zukneift"... Greez Sascha =)

Ok, deins is i wie übersichtlicher^^

Ich versuchs nun schon echt lang aber ich raffs einfach ned wie ich das gesammte ding in der höhe kleiner machen kann.
Sie sollte nur etwa so (hoch) sein wie das Bild das rechts angezeigt wird.

Weil links so natürlich nicht alle hinpassen soll die linke spalte Scrollbar sein.
( Ist ja eigentlich schon nur tut sie es irgendwie nicht. umsomehr bilder ich reinmach um so höher wird sie )

Kannst mir bitte nochmals helfen *Fleh ^^

Greez Sascha

Hallo,

ich hab dir die Bildergalerie jetzt an die Abmessungen von den Bild rechts angepasst. Außerdem hab ich das Script jetzt so umgeändert, dass du die Abmessungen der Galerie und der Bilder über den Bildern einstellen kannst, wenn du die Galerie nocheinmal anpassen möchtest (hier rot markiert)

Hier der Code:
<script type="text/javascript">
<!--
var Anzeigebilder = new Array();
var Bildbeschriftungen = new Array();
var i = 0;
var lt = unescape("%3C");

/***** Hier die Angaben für die Abmessungen der Galerie und der Bilder eintragen *****/

var Breite_linke_Spalte = 152;
var Breite_rechte_Spalte = 520;
var Hoehe_der_Galerie = 386;
var Breite_der_kleinen_Bilder = 128;
var Breite_der_grossen_Bilder = 520;

/***** Hier die Adressen der Bilder + die Beschriftungen eintragen *****/

Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";
Anzeigebilder[i] = "http://www.fotos-hochladen.net/1000aufsgvn94uh.jpg";
Bildbeschriftungen[i++] = "Bild 1";

/***** Ab hier nichts mehr ändern *****/

document.write(lt+'table border="0" width="'+(Breite_linke_Spalte+Breite_rechte_Spalte)+'" cellspacing="0" cellpadding="0" style="height: '+Hoehe_der_Galerie+'px; border: 0px solid #FFFFFF">');
document.write(lt+'tr>'+lt+'td width="'+Breite_linke_Spalte+'" align="center" bgcolor="#FFFFFF" style="border-right: 1px solid #FFFFFF">'+lt+'div style="width: 100%; height: 100%; overflow: scroll; overflow-x: auto">');

for(var i=0;i<Anzeigebilder.length;i++)
document.write(lt+'img border="0" src="'+Anzeigebilder[i]+'" alt="" width="'+Breite_der_kleinen_Bilder+'" onclick="javascript:Bild_anzeigen('+i+')" style="cursor: hand">'+lt+'br>'+lt+'br>');

document.write(lt+'/div>'+lt+'/td>'+lt+'td width="'+Breite_rechte_Spalte+'" align="center" bgcolor="#BBBBBB">');

for(var i=0;i<Anzeigebilder.length;i++)
document.write(lt+'form name="Anzeigebilder" action="" style="display: none">'+lt+'img border="0" src="'+Anzeigebilder[i]+'" alt="'+Bildbeschriftungen[i]+'" width="'+Breite_der_grossen_Bilder+'">'+lt+'br>'+Bildbeschriftungen[i]+lt+'/form>');

document.write(lt+'/td>'+lt+'/tr>'+lt+'/table>');

function Bild_anzeigen(Bildnummer)
{
for(var i=0;i<Anzeigebilder.length;i++)
document.Anzeigebilder[i].style.display = "none";
document.Anzeigebilder[Bildnummer].style.display = "";
}
//-->
</script>

Danke Mario, immerwieder schnell, immerwieder genial

Ich will deine Nerven echt nicht überstrapazieren aber...
AAAaaaaa, irgendwie läuft immernoch was schief

Schaus dir mal an:
photomera.de.tl/NEU1.htm

Die Tabelle wird immernoch genausolang / jenachdem wie viel Bilder ich links einfüg...

Weiß nicht ob ich einfach nur zu blöd bin mich richtig auszudrücken oder worans liegt^^

Wär dir echt sehr dankbar wenn du dirs nochmal anschauen würdest.

Wenns ok ist würd ich mich einfach einmal mit dir darüber unterhalten, Icq, Skype - Was du eben hast.
wenns ok ist schick mir pls deine Nummer/ Name an meine e mail:

Cyrksemail@gmx.de

Vielen vielen Dank schonmal im Voraus, Sascha =)

Hallo,

hab schon rausgefunden, was Probleme macht. Das Problem liegt nicht bei dir, sondern an der CSS-Eigenschaft overflow. Die wird anscheinend nicht nur in den Browsern unterschiedlich dargestellt, sondern verträgt sich auch nicht mit dem Document-Typ von deiner Seite

Ich hab dir den Code nochmal umgeschrieben. Jetzt werden die kleinen Bilder in einer iframe angezeigt. Das sieht genauso aus, wie bei overflow, nur wird es von allen Browsern gleich dargestellt und kommt mit allen Document-Typen zurecht. Hätt' ich eigentlich schon früher so machen sollen

Hier ist der neue Code:

Duuuhuu... Mario...

--> photomera.de.tl/NEU2.htm

Jetzt wird garnichtsmehr angezeigt
Dachte erst muss dann wohl an dem Baukasten liegen, habs dann auch mit einem Firefox dokument geöffet, wurde aber auch nichts angezeigt...

Kann das sein das ein Fehler im Code ist ?

Trotzdem malwieder ein fettes Danke für deine Mühe, ich hoff du kannst mir bald neues berichten =)

/ Achja, wär übrigens immernoch sehr erfreut über deine ICQ Nummer, Skype Name, etc...


Greez Sascha =)
(Cyrksemail@gmx.de)

Bei Skype kannst du mich unter Valentin Hammer erreichen

Wegen dem Code: wenn ich deine Seite mit IE, Safari oder Google Chrome öffne, funktioniert die Galerie so, wie gedacht. Wird sie bei dir in diesen Browsern auch angezeigt?

Ich hab den Code nochmal umgeschrieben. Der Zugriff auf die iframe funktioniert jetzt über das window-Objekt. Außerdem erscheint eine Fehlermeldung in der grauen Spalte, wenn der Browser die Galerie nicht ausführen kann. Vielleicht funktioniert's ja jetzt: