• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildergalerie mit Vorschaubildern

So wie es aussieht verwendest du hier zwei Bildergalerien? Photoslider und gallerific. Welche möchtest du denn schlussendlich verwenden?
Ich würde mal blind gallerific empfehlen, da Photoslider auf den ersten Blick absolut unprofessionell aussieht.
 
Und das wars schon ;) :

Code: 
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="http://opiefoto.com/articles/assets/slider/photoslider.js"></script>
<link rel="stylesheet" href="http://opiefoto.com/articles/assets/slider/photoslider.css">
</head>


<body>


    <div class="photoslider" id="default"></div>


    <script type="text/javascript">
    $(document).ready(function(){
        //change the 'baseURL' to reflect the host and or path to your images
        FOTO.Slider.baseURL = 'http://dummyimage.com/';
    
        //set images by filling our bucket directly
        FOTO.Slider.bucket = {
            'default': {
                0: {'thumb': '50x50/f00/fff.jpg', 'main': '600x400/f00/fff.jpg', 'caption': 'Opie'},
                1: {'thumb': '50x50/f22/fff.jpg', 'main': '600x400/f22/fff.jpg'},
                2: {'thumb': '50x50/f44/fff.jpg', 'main': '600x400/f44/fff.jpg', 'caption': 'Trash the Dress'},
                3: {'thumb': '50x50/f66/fff.jpg', 'main': '600x400/f66/fff.jpg'}
            }
        };
        
        //reload
        FOTO.Slider.reload('default');  
    });
    </script>


</body>
</html>

Nimm am besten mein Script, siehs dir mal an (was ich anders gemacht habe) und pass es dann an wie du es benötigst.
 
Ich meine damit es ist leichter den oberen Code anzupassen, als deinen zu korrigieren (nicht böse gemeint)
 
nein nein...bin ja froh wenn du dich drum kümmerst....leider sieht es jetzt nicht viel besser aus :-( siehe Link!
 
Vielleicht liegt es an der Zeile:

Code: 
[COLOR=#000000][FONT=monospace]FOTO.Slider.baseURL = 'http://dummyimage.com/';[/FONT][/COLOR]

Entweder du kannst sie leer lassen, oder du musst den "Haupt-Teil" deiner Domain eingeben. zB: web273.webspace-hh.de
 
Die Bilder sollen z.B. von

HTML: 
http://web273.webspace-hh.de/ bild3_kl.jpg

geladen werden.

Problem 1: das Leerzeichen gehört da nicht hin.
Problem 2: Selbst ohne das Leerzeichen gibt es das Bild unter diesem Pfad nicht.

Problem 1 kannst Du dadurch korrigieren, dass Du statt

Code: 
FOTO.Slider.baseURL = 'http://web273.webspace-hh.de /';

schreibst:

Code: 
FOTO.Slider.baseURL = 'http://web273.webspace-hh.de/';

Problem 2 kannst Du dadurch lösen, dass Du nochmal genau nachschaust in welchem Unterverzeichnis die Bilder liegen und dieses Verzeichnis bei den Bildern oder bei o.g. baseURL mit angibst. An welcher Stelle hängt davon ab in welchen Verzeichnissen die kleinen und die großen Bilder jeweils liegen.
 
Es funktioniert !!!! ;Jump . Vielen, vielen Dank!!!!!!! Wenn ich jetzt alles noch ein bisschen formatieren möchte, z. B. Schriftart oder die Vorschaubilder hintereinander oder neben das große Bild. Wie mach ich das. Ändere ich dass in der .css - Datei??
 
Ja, wenn Du am Style etwas ändern willst, musst Du (meist) die Styledaten der Seite bearbeiten, also die CSS-Datei. Da Du ein Galeriescript nutzt könnten Darstellungsunterschiede ggfs. auch eine Konfiguration von diesem verursacht werden, d.h. ggfs. müsstest Du auch die Konfiguration des Scriptes deinen Wünschen anpassen.

Wie sollte das denn eigentlich aussehen?
 
...vom aussehen wollte ich nur noch die Randbreite ändern und vielleicht ein paar Kleinigkeiten. Leider lässt sich die css-Datei nicht ändern weil es eine Remote-Datei ist. Kann man das ändern???
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben