Slider für unterschiedliche Seiten

Müßten viele Slider können. - Ich habe einen ganz einfachen JJ NextGen JQuery Slider. Der hat aber keine 3D-Slideeffekte.
Das Blöde an dem Slider ist, dass die Syntax beschissen dokumentiert ist.
Der Slider bedient sich der Nextgen Gallerie, das heißt die Bilder müssen in Galerien in der NextGen Gallerie sortiert sein was wiederrum bedeutet, dass du auch NextGen Gallerie installiert haben musst, um deine Bilder darin zu verwalten.

Anbei eine Beispielsyntax, die ich benutze:
[jj-ngg-jquery-slider gallery="63" order="sortorder" effect="random" pausetime="20000" animspeed="1000" html_id="1" width="600" height="600" controlnav="false"]

Willst du mehrere Slider auf einer Seite verwenden, dann musst du die durchnumerieren.
Das machst du, indem du jedem Slider eine eigene HTML-ID vergibst.
Also, beim Slider 1 schreibst du html_id="1", beim Slider 2 schreibst du html_id="2" usw.

Hier eine Seite von mir, wo ich zwei Slider auf einer Seite verwende.

Und summa summarum eine Anleitung die ich mir selbst erstellt habe, wo ich einige (nicht alle) Funktionen nach langer Internetrecherche und ausprobieren herausgefunden habe. Was ich (noch) nicht herausgefunden habe, habe ich englisch gelassen.

Blödes Teil, zu viel Text musste es auf zwei Antworten aufteilen

--- cut on ---
JJ NextGen JQuery Slider

Beispielcode:

[jj-ngg-jquery-slider title="My Slider" gallery="42" order="sortorder" effect="random" pausetime="20000" animspeed="1000" html_id="about-slider" width="600" height="600" center="1"]
[jj-ngg-jquery-slider html_id="about-slider" directionnav="false" controlnav="false"]
---
Wenn man in NextGen Gallery eine URL als Titel des Bildes einträgt, dann wird man in der Slideshow bei einem Klick
auf das Bild zur entsprechenden URL weitergeleitet.
---
title="My Slider"

Zeigt den Galerienamen links oben an
---
gallery="42"

Der Slider verwendet die Gallerie Nummer 42 von "NextGEN Gallery". Die Nummer wird von "NextGEN Gallery" selbst vergeben.
---
order="sortorder"

Es sind die Optionen "random", "asc", "desc" und "sortorder" möglich

= "sortorder" Verwendet die Reihenfolge der Bilder so, wie sie in "NextGEN Gallery" sortiert wurden.
= "asc" Zeigt die Bilder in aufsteigender Reihenfolge an
= "desc" Zeigt die Bilder in absteigender Reihenfolge an.
= "random" Zeigt die Bilder in Zufallsauswahl an (funktioniert nur, wenn die Seite gecached wird)
---
effect="random"

Es wird mit einem bestimmten Überblendeffekt von einem Bild zum anderen gewechselt.
Random ist die Zufallsauswahl für alle Effekte.

Es stehen 16 unterschiedliche Effekte zur Verfügung

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
---
pausetime="20000"
Es wird eine Pause zwischen dem Wechsel zweier Bilder in Millisekunden eingebaut.
Im vorliegenden Fall wird 20 Sekunden gewartet, bis zum nächsten Bild gewechselt wird.
---
animspeed="10000"
Hier wird die Geschindigkeit vorgegeben, mit der die Überblendeffekte zum nächsten Bild überblenden sollen.
Höherer Wert = schneller
Niedrigerer Wert = langsamer

Animspeed macht bei mir zeitweise Probleme in Zusammenhang mit "pausetime" und wenn ich auf die Pfeile
zum manuellen Weiterschalten klicke.
Als Lösung hatte ich animspeed weggelassen. Dann nimmt er die Defaultgeschwindigkeit für die Animation.
---
startslide="setting"
Fehlt dieser Eintrag im Code, ist der Index Null gesetzt und die Slideshow startet immer mit dem ersten Bild.
startslide="1" Bewirkt, dass die Slideshow mit dem zweiten Bild startet.
startslide="2" Bewirkt, dass die Slideshow mit dem dritten Bild startet, usw.
Eine Kombination mit max_pictures scheint nicht möglich zu sein.
---
html_id="slider"

Diese Funktion wird benötigt, wenn mehrere Slider auf einer Seite eingesetzt werden.

Grundeinstellung ist: html_id="about-slider"

Bei mehreren Slidern auf einer Seite muß jeder Slider eine separate Nummer bekommen.
Beispiel Slider 1: html_id="1"
Beispiel Slider 2: html_id="2"
---
width="600"
Die Breite des Sliders beträgt 600 Pixel
Bei mir entspricht diese Breite auch der originalen Breite der Bilder.
Wenn man Bilder mit unterschiedlichen Formaten (Hochformat und Querformat) verwendet, kann es vorkommen dass mancher
Überblendeffekt nicht alles des vorherigen Bildes überdeckt. Ich habe das Problem so gelöst, dass ich alle meine Bilder
in ein Format von 600 x 600 Pixeln einpasse und das, was weiß ist mit der beigen Hintergrundfarbe meiner Homepage
auffülle.
Eine andere Möglichkeit wäre noch, innerhalb einer Slideshow nur ein einziges Format (z.B. nur Querformat) zu verwenden.
---
height="600"
Die Höhe des Sliders beträgt 600 Pixel
Bei mir entspricht diese Höhe auch der originalen Höhe der Bilder.
---
center="1"
Zentriert den Slider Bildmittig. Meine Versuche den Slider rechtsbündig zu positionieren sind fehlgeschlagen.
---
directionnav="false"
Schaltet die Navigation über die Pfeile aus, wenn man die Maus auf das Bild bewegt.
Standartmäßig ist diese Navigation eingeschaltet
---
directionnavhide="false"
Schaltet die Navigationspfeile dauerhaft ein, so dass sie ständig zu sehen sind.
Fehlt dieser Eintrag, ist directionnavhide standartmässig auf true gesetzt was bewirkt, dass die Navigationspfeile
nur sichtbar sind, wenn die Maus sich auf dem Bild befindet.
---
controlnav="false"
Schaltet die Navigation am unteren Rand des Bildes aus. Sinnvoll wenn die Galerie so viele Bilder enthält, dass die
Aufzählung aus dem Seitenrahmen läuft.
Fehlt dieser Eintrag, ist controlnav standartmässig auf true gesetzt.
---
controlnavthumbs="nextgen_thumbs"
Es stehen noch die Optionen "true", "false", "nextgen_thumbs", "nextgen_original" zur Verfügung.
Lässt anstelle der numerischen Auflistung am unteren Rand der Show die Bilder als Thumbnails erscheinen.
Zur Positionierung dieser Leiste muß noch der Befehl thumbscontainerheight eingegeben werden.
---
keyboardnav="false"
Schaltet das Weiterblättern der Slideshow über die Tastaturpfeile aus.
Fehlt dieser Eintrag, ist keyboardnav standartmässig auf true gesetzt was bewirkt, dass die Slideshow auch über
die Tastaturpfeile weitergeschaltet werden können.
---
pauseonhover="false"
Schaltet das Stoppen des automatischen Weiterblätterns aus, wenn sich die Maus auf dem Bild befindet.
Anders ausgedrückt, die Slideshow läuft weiter, auch wenn sich die Maus auf dem Bild befindet.
Fehlt dieser Eintrag, ist pauseonhover standartmässig auf true gesetzt, was bewirkt dass die Slideshow so lange
angehalten wird, so lange sich die Maus auf dem Bild befindet.
---
manualadvance="true"
Schaltet das automatische Weiterblättern aus. Es wird nur weitergeblättert, wenn man auf die entsprechenden
Weiter-Pfeile auf dem Bild, oder auf die Thumbnails klickt, oder mit den Tastaturpfeiltasten weiterblättert.
Es ist also nur ein manuelles Weiterblättern möglich.
---
Wenn man in NextGen Gallery einen Text in die Bildbeschreibung eingibt, erscheint diese im Fußbereich des Bildes.
---
disablecaptions="1"
Entfernt alle Texte im Fußbereich eines Bildes temporär, die in NextGen Gallery als Bildbeschreibung
gemacht worden sind. Das hat den Vorteil, dass man diese Bildbeschreibungen in NextGen Gallery nicht löschen muß,
und man somt dieselben Bilder mit Bildbeschreibung in einer anderen Slideshow wieder verwenden kann.
---
thumbscontainerheight="230"
Gibt die Höhe des Thumbnailcontainers an. Die Berechnung der Höhe sollte sein
Anzahl der Thumbnail Reihen multipliziert mit der Thumbnailhöhe.
Beispiel:
Bei einer Bldgröße von 600x600 Pixeln und drei Thumbnailreihen musste ich den Wert auf 230 setzen, damit die
Thumbnails am unteren Rand der Slideshow erscheinen, ohne die eigentlichen Bilder zu verdecken.
Bei vier Thumbnailreihen musste ich den Wert auf 310 setzen.
---
thumbsgap="5"
Setzt einen senkrechten Zwischenraum zwischen die Thumbnails
---
Tags: comma separated list of tags to filter results by. (sc: tags="tag1, tag2")
---
Shuffle: If order is random and this is true will shuffle images with javascript. Useful if your are caching your pages. (sc: shuffle="true"|"false")
---
max_pictures="6"

Die maximale Anzahl von Bildern, die verwendet werden sollen.
Es wird immer vom ersten Bild an gezählt. Eine Kombination mit startslide scheint nicht möglich zu sein.
---
Nivo Slider Einstellungen

slices: (sc: slices="setting")

boxCols: (sc: boxcols="setting")

boxRows: (sc: boxrows="setting")

pauseTime: (sc: pausetime="setting")

startSlide: Set starting Slide (0 index). (sc: startslide="setting")

directionNav: Next & Prev. (sc: directionnav="setting")

directionNavHide: Only show on hover. (sc: directionnavhide="setting")

controlNav: 1,2,3... (sc: controlnav="setting")

controlNavThumbs: Use thumbnails for Control Nav. You can choose 'nextgen thumbs''
that will automatically use the image's thumbnail from nextgen gallery or 'nextgen original'
that will use the current image. (sc: controlnavthumbs="true"|"false"|"nextgen_thumbs"|"nextgen_original")

thumbsWidth: Resize thumbnail to this width. Recommended to set if using thumbnails. (sc: thumbswidth="20")

thumbsHeight: Resize thumbnail to this height. Recommended to set if using thumbnails. (sc: thumbsheight="20")

thumbsContainerHeight: Height for thumbnails container. Calculation should be 'number of
thumbnail image rows' x 'thumbsheight'. (sc: thumbscontainerheight="20")

thumbsGap: Gap between thumbnails. (sc: thumbsgap="5")

controlNavThumbsFromRel: Use image rel for thumbs. (sc: controlnavthumbsfromrel="setting")

controlNavThumbsSearch: Replace this with... (sc: controlnavthumbssearch="setting")

controlNavThumbsReplace: ...this in thumb Image src. (sc: controlnavthumbsreplace="setting")

keyboardNav: Use left & right arrows. (sc: keyboardnav="setting")

pauseOnHover: Stop animation while hovering. (sc: pauseonhover="setting")

manualAdvanc: Force manual transitions. (sc: manualadvance="setting")

captionOpacity: Universal caption opacity. (sc: captionopacity="setting")

disable captions: (sc: disablecaptions="1")

beforeChange: (sc: beforechange="setting")

afterChange: (sc: afterchange="setting")

slideshowEnd: Triggers after all slides have been shown. (sc: slideshowend="setting")

lastSlide: Triggers when last slide is shown. (sc: lastslide="setting")

afterLoad: Triggers when slider has loaded. (sc: afterload="setting")

--- cut off ---

Gruß Frank

Hallo Ingo!

Eine elegante Lösung habe ich dafür bisher auch nicht gefunden - nur eine Unelegante.
Alle Bilder haben bei mir das gleiche Format von 600x600 Pixeln, in die ich die Hochformat- und Querformatbilder einfüge. Der Teil, der rechts und links oder oben und unten weiß bleiben würde, habe ich (mit Photoshop Elements) in der selben Farbe eingefärbt, wie der Hintergrundfarbe meiner Homepage.
Beispiel kannst du hier sehen.
Eine andere Möglichkeit ist noch, gleich zum Nachfolger (dem Nivo Slider) zu wechseln.
Den gibt es als Kaufversion für 19 US Dollar. Hier haben sie das Problem gelöst, indem sich die Fenster dynamisch an das Bild anpassen.
Hier der Link zur Demoseite.
Ich selber trage mich auch mit dem Gedanken zum Nivo Slider zu wechseln, mir konnte aber bisher niemand meine Frage beantworten, ob die Kaufversion auch auf "NextGen Gallery" als Bilderdatenbank zugreift.
Ich habe nämlich sehr viele Bilder dadrin, und keine Lust umständlich Bilder von einer Datenbank zur anderen transferieren zu müssen.

Ansonsten setze ich bei manchen Slideshows auch die von dir beschriebene Methode ein, nur Bilder gleichen Formats in einer Slideshow zu verwenden (aber recht selten).
90% meiner Bilder haben das Format 600x600 mit einem beigen Anteil entweder oben und unten, oder rechts und links.

Gruß Frank

Nachtrag!
Ich habe mir jetzt die Kaufversion des Nivo Sliders geholt.
Die automatische Anpassung der Bildgrößen beschränkt sich auf ein Theme des Sliders nur in der Höhe, aber nicht in der Breite.
Also bleibt diesbezüglich nur meine oben erwähnte unelegante Lösung.

Gruß Frank