Fertiger Bildergalerie-Script /Scroll einbringen

Willkommen, Gast

(1 Leser) (1) Gast

Bitte beachten, dass es hier nur um Javascripts geht, die sich in unserem Archiv befinden.

Auf Thema antworten

Neues Thema

Seite:
1

THEMA: Fertiger Bildergalerie-Script /Scroll einbringen

Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 9 Monate her #8943

Theone
OFFLINE
Fresh Boarder
Beiträge: 5
Karma: 0

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">

</script><br />

Letzte Änderung: 1 Jahr, 9 Monate her von Theone.

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 9 Monate her #8944

Super_Mario
OFFLINE
Platinum Boarder
Beiträge: 623
Karma: 35

Hallo,

ich hab dir das Javascript umgebaut

Hier ist der neue Code:

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).

liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!

Letzte Änderung: 1 Jahr, 9 Monate her von Super_Mario.

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 9 Monate her #8947

Theone
OFFLINE
Fresh Boarder
Beiträge: 5
Karma: 0

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">

</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> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </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 =)

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 8 Monate her #8962

Theone
OFFLINE
Fresh Boarder
Beiträge: 5
Karma: 0

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

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 8 Monate her #8963

Super_Mario
OFFLINE
Platinum Boarder
Beiträge: 623
Karma: 35

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:

Letzte Änderung: 1 Jahr, 8 Monate her von Super_Mario. Begründung: kleines Update

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 8 Monate her #8964

Theone
OFFLINE
Fresh Boarder
Beiträge: 5
Karma: 0

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 =)

Letzte Änderung: 1 Jahr, 8 Monate her von Theone.

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 8 Monate her #8966

Super_Mario
OFFLINE
Platinum Boarder
Beiträge: 623
Karma: 35

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:

<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+'iframe name="kleine_Bilder" width="100%" frameborder="0" style="height: '+Hoehe_der_Galerie+'px">Der Browser muss iframes unterstützen, um die Galerie anzeigen zu können'+lt+'/iframe>'+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>');

if(document.kleine_Bilder)
{
kleine_Bilder.document.write(lt+'html>'+lt+'head>'+lt+'title>'+document.title+lt+'/title>'+lt+'/head>'+lt+'body topmargin="0" leftmargin="0">'+lt+'center>');

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

kleine_Bilder.document.write(lt+'/center>'+lt+'/body>'+lt+'/html>');
}

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

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 8 Monate her #8967

Theone
OFFLINE
Fresh Boarder
Beiträge: 5
Karma: 0

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)

Antwort Zitieren

Aw: Fertiger Bildergalerie-Script /Scroll einbringen 1 Jahr, 8 Monate her #8973

Super_Mario
OFFLINE
Platinum Boarder
Beiträge: 623
Karma: 35

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:

<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+'iframe name="kleine_Bilder" width="100%" frameborder="0" style="height:   '+Hoehe_der_Galerie+'px">Der Browser muss iframes unterstützen, um die Galerie anzeigen zu können'+lt+'/iframe>'+lt+'/td>'+lt+'td width="'+Breite_rechte_Spalte+'" align="center" bgcolor="#BBBBBB">');

if(!window.kleine_Bilder)
document.write("Der Browser mus iframes unterstützen, um die Galerie anzeigen zu können.");
else
{
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>');

if(window.kleine_Bilder)
{
kleine_Bilder.document.write(lt+'html>'+lt+'head>'+lt+'title>'+document.title+lt+'/title>'+lt+'/head>'+lt+'body topmargin="0" leftmargin="0">'+lt+'center>');

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

kleine_Bilder.document.write(lt+'/center>'+lt+'/body>'+lt+'/html>');
}

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

Letzte Änderung: 1 Jahr, 8 Monate her von Super_Mario.

Antwort Zitieren