Druckbare Version
Ich versuche verzweifelt eine Slideshow mit hoch- und querformatigen Bildern anzulegen. Ziel soll es sein, dass alle gleich hoch und dementsprechend breit oder schmal dargestellt werden. Nur gelingt mir das nicht. Die Bilder werden alle gleich breit dargestellt und in der Höhe beschnitten.
Für Hilfe wäre ich sehr dankbar.
Viele Grüße
Hallo!
Im englische Forum hat jemand eine Lösung gepostet die du mal probieren kannst.
Die Werte im JS-Template wie folgt ändern:
resize:'false' - auf 'length' ändern.
center: true
overlap: false - kann auch bei den Übergängen helfen
Falls das hilft sag bitte Bescheid.
Grüße Sabri
Besten Dank! Das war die Lösung! Ich hatte statt resize:'length' resize:'height' eingetragen. Das war wohl der späten Stunde geschuldet. Man schaut 100mal drüber und eigentlich ist alles schick.
Jetzt versuche ich noch die Thumbnails entsprechend anzupassen.
Vielen Dank!
Hallo Sabri,
weißt Du zufällig ob es möglich ist den Thumbnails zwar eine definierte Höhe mitzugeben. Die Breite sich dann aber entsprechend der Skalierung ergibt? Mein Problem ist, dass z.B. hochformatige Bilder oben und unten und querformatige links und rechts beschnitten werden. Das Resultat sind dann gleich hohe und gleich breite Thumbs. Das will ich aber nicht. Gleich hoch ja - aber nicht gleich breit.
Geht das?
Viele Grüße
Mirco
Hallo,Zitat:
Zitat von Schlauchbeutelmaschine
ich bin auch gerade dabei mir die slideshow2 anzupassen. Diesen Hinweis habe ich nicht recht verstanden: ist mit "JS-Template" die "slideshow.js" gemeint? Dort habe ich den Wert "resize" so wie beschrieben angepasst - aber es ändert sich an der Darstellung nichts.
Alles zu positionieren habe ich geschafft und habe hier dazu viele Hinweise gefunden. Was mir aber noch rätselhaft bleibt: wo kann ich diese Rahmen um die Thumbs und deren (mouseover und active) Farben ändern? Sowie auch die Farbe des Caption-Feldes?
Wäre schön, wenn mir da jemand helfen könnte. Leider reicht mein Englisch nicht, um im (engl.) Wiki fündig zu werden...
Schönes WE
hok
Moin Moin Community,
ich habe grade ein ähnliches Problem wie Pandoran...
Nun war ich schon begeistert, den Hinweis auf das js-Template zu sehen, aber im Template slideshow2_js_standard.tpl gibt es diese Einstellmöglichkeiten nicht...
Und da waren wieder meine 3 Probleme:
Contao-Anfänger, Slideshow beschneidet die Bilder und ich weiss nicht wo ich noch suchen soll :o
Kann einer von den Cracks diesen Thread wieder ein wenig aufleben lassen und weiterhelfen?
Hallo,
poste doch mal was du bisher in deinem Template stehen hast und dann schauen wir weiter.
Hallo,
ich bin recht neu hier, und ich denke, ich stehe auf dem Schlauch.
Wo finde ich denn in der deutschen Version dieses JS-Template zum modifizieren?
MfG
MSchmidgall
Hallo MSchmidgall,
Öffne dazu das Backend-Modul "Templates" und erstell' Dir über den Link "Neues Template" ein Duplikat des gewünschten Templates der Slideshow2, das Du im Auswahlfeld "Originaltemplate" (Bereich "slideshow2") auswählen kannst. Deine Änderungen/Anpassungen machst Du dann (updatesicher) ausschließlich in dieser duplizierten Template-Kopie!Zitat:
Zitat von MSchmidgall
Danke für die sehr schnelle Antwort, habe die Datei dupliziert.
Nun zu meinem weiteren problem,
haben sich die Bezeichnungen geändert, denn ich kann die folgenden Begriffe nicht finden:
das einzige, das sehr ähnlich ist, ist "overlay"Zitat:
Zitat von Schlauchbeutelmaschine
Danke für die weitere Hilfe
MFG
MSchmidgall
Eine Übersicht der möglichen Konfigurationsoptionen findest Du beispielsweise auf der Projekt-Website der Slideshow2.
Entschuldigt bitte, dass ich mich sehr schwer tue, diese englische Seite zu verstehen, daher habe ich nun mal den Text meiner slideshow2_js_Datei hier eingefügt. Bin ich denn in der richtigen Datei, denn ich kann hier sehr wenig finden, das in obiger Seite beschrieben ist.
Meine Problemseite ist hier zu sehen: http://www.daten-plus.de/index.php/august-2010.htmlCode:var images_<?php echo $this->id; ?> = {<?php echo $this->imgElements; ?>};
var show_<?php echo $this->id; ?> = new Slideshow<?php echo $this->EffectType;?>('show<?php echo $this->id; ?>', images_<?php echo $this->id; ?>,
{
width: <?php echo $this->arrSlideshow2Size[0]; ?>,
height: <?php echo $this->arrSlideshow2Size[1]; ?>,
delay: <?php echo $this->rotation_interval; ?>,
duration: <?php echo $this->effect_duration; ?>,
<?php echo $this->EffectsExtended; ?>
loop: <?php echo $this->play_loop; ?>,
paused: <?php echo $this->play_paused; ?>,
random: <?php echo $this->play_random; ?>,
controller: <?php echo $this->controls; ?>,
fast: <?php echo $this->controls_type; ?>,
thumbnails: <?php echo $this->thumbnails; ?>,
captions: <?php echo $this->captions; ?>,
<?php echo $this->linked; ?>
loader: {'animate': ['plugins/slideshow2/img/loader-#.png', 12]}
});
<?php if($this->thumbnails_overlay == true): ?>
['a', 'b'].each(function(p){
new Element('div', { 'class': 'overlay ' + p }).inject(show_<?php echo $this->id; ?>.slideshow.retrieve('thumbnails'));
}, show_<?php echo $this->id; ?>);
<?php endif; ?>
Die Show besteht aus Hoch- und Querformat-Bildern, und die sollen auch so dargestellt werden. Ich bin über jeden Hinweis dankbar.
MfG
MSchmidgall
Moin Schlauchbeutelmaschine,
ich habe das Template noch nicht gross bearbeitet, daher sieht es genauso aus wie MSchmidgall oben gepostet hat.
Kann es sein, dass das Template um die von Dir beschriebenen Werte erweitert werden muss?
Ganz genau:
PHP-Code:...
random: <?php echo $this->play_random; ?>,
controller: <?php echo $this->controls; ?>,
resize:'length',
center: true,
overlap: false,
...
Na, wo hapert es denn genau? An den sprachlichen Schwierigkeiten? In dieser Hinsicht kann man sicherlich weiterhelfen, wenn Du konkret etwas Bestimmtes wissen möchtest. Oder Du versuchst Dich an einem der im Internet verfügbaren automatischen Übersetzungstools, deren Ergebnisse zwar teilweise noch sehr zu wünschen übrig lassen, für das grundlegende Verständnis aber vielfach einigermaßen ausreichend sind. Aber wie gesagt: An den sprachlichen Barrieren sollte es nicht scheitern!Zitat:
Zitat von MSchmidgall
Was Dein Template betrifft, so denke ich wohl, dass es sich hierbei um das Richtige handelt. Die im Template verwendeten Optionen findest Du jedenfalls allesamt auch auf der von mir geposteten Projekt-Website im Bereich "Options" aufgelistet und kurz erläutert.
Ob die von Schlauchbeutelmaschine weiter oben geposteten Änderungen nun funktionieren, weiß ich allerdings auch nicht. Das entsprechend duplizierte und angepasste Template "slideshow2_js_standard.tpl" würde dann jedenfalls in etwa so aussehen:
Anstatt resize: false könnte man ev. auch resize: 'length' versuchen. Musst Du probieren!PHP-Code:var images_<?php echo $this->id; ?> = {<?php echo $this->imgElements; ?>};
var show_<?php echo $this->id; ?> = new Slideshow<?php echo $this->EffectType;?>('show<?php echo $this->id; ?>', images_<?php echo $this->id; ?>,
{
resize: false,
center: true,
overlap: false,
width: <?php echo $this->arrSlideshow2Size[0]; ?>,
height: <?php echo $this->arrSlideshow2Size[1]; ?>,
delay: <?php echo $this->rotation_interval; ?>,
duration: <?php echo $this->effect_duration; ?>,
<?php echo $this->EffectsExtended; ?>
loop: <?php echo $this->play_loop; ?>,
paused: <?php echo $this->play_paused; ?>,
random: <?php echo $this->play_random; ?>,
controller: <?php echo $this->controls; ?>,
fast: <?php echo $this->controls_type; ?>,
thumbnails: <?php echo $this->thumbnails; ?>,
captions: <?php echo $this->captions; ?>,
<?php echo $this->linked; ?>
loader: {'animate': ['plugins/slideshow2/img/loader-#.png', 12]}
});
<?php if($this->thumbnails_overlay == true): ?>
['a', 'b'].each(function(p){
new Element('div', { 'class': 'overlay ' + p }).inject(show_<?php echo $this->id; ?>.slideshow.retrieve('thumbnails'));
}, show_<?php echo $this->id; ?>);
<?php endif; ?>
EDIT: Na, da war jetzt wohl einer schneller :)
hehe, ja leider. :p
Aber Danke für deinen Support!
Danke, euch beiden,
es ist nun nahezu wie ich es gerne hätte. Noch zwei Fragen,
- die Querformatbilder werden zentriert angezeigt, Und die Hochkantbilder werden beim Vorwärtsblättern linksbündig angezeigt, und wenn man zurückblättert, rechtsbündig.
Kann man das noch auf zentriert einstellen?
- Wenn ich einen Link zur Großansicht in einer Lightbox einrichte, wird immer nur das angeklickte Bild groß angezeit, kann man das auch so einstellen, dass dort der Bildwechsel weitergeht?
MfG
Martin
Jo, schliesse mich der Danksagung an!
Nun klappts auch so, wie es soll mit den Bildern...
Jetzt muss ich nur herausfinden, wo man die Position der Vorschaureihe und des Control-Elements definieren kann....
Hmmm,
jetzt stehe ich auch vor dem Problem, dass meine Hochformate nicht korrekt angezeigt werden.
Im Template habe ich die beiden Befehle hinzugefügt:
Doch jetzt werden die Hochformater ins Querformat gequetscht. Und das sieht nicht schön aus... :DCode:resize: length,
center: true,
Wo ist denn da der Trick. Anscheinend soll es ja doch irgendwie funktionieren...
Ahh, wer lesen kann ist klar im Vorteil:
So funktioniert das ganz gut...Code:resize:'fit',
Hallo,
ich habe auch das Problem, dass Hochformat-Bilder immer nur rechts oder links angezeigt werden, aber nicht zentriert. Habe die genannten Einstellungen ausprobiert, aber es funktioniert nicht. So sieht mein Template aus:
Bei "resize" habe ich es auch mit length und fit probiert, alles jeweils mit und ohne Anführungszeichen.Code:var images_<?php echo $this->id; ?> = {<?php echo $this->imgElements; ?>};
var show_<?php echo $this->id; ?> = new Slideshow<?php echo $this->EffectType;?>('show<?php echo $this->id; ?>', images_<?php echo $this->id; ?>,
{
width: <?php echo $this->arrSlideshow2Size[0]; ?>,
height: <?php echo $this->arrSlideshow2Size[1]; ?>,
delay: <?php echo $this->rotation_interval; ?>,
duration: <?php echo $this->effect_duration; ?>,
<?php echo $this->EffectsExtended; ?>
loop: <?php echo $this->play_loop; ?>,
paused: <?php echo $this->play_paused; ?>,
random: <?php echo $this->play_random; ?>,
controller: <?php echo $this->controls; ?>,
fast: <?php echo $this->controls_type; ?>,
thumbnails: <?php echo $this->thumbnails; ?>,
captions: <?php echo $this->captions; ?>,
loader: {'animate': ['plugins/slideshow2/img/loader-#.png', 12]},
resize: false,
center: true,
overlap: false
});
<?php if($this->thumbnails_overlay == true): ?>
['a', 'b'].each(function(p){
new Element('div', { 'class': 'overlay ' + p }).inject(show_<?php echo $this->id; ?>.slideshow.retrieve('thumbnails'));
}, show_<?php echo $this->id; ?>);
<?php endif; ?>
EDIT:
Ok, hat sich erledigt, ich habe gerade das hier auf der Projekt-Website gefunden:
"center - (boolean: default true) Whether the show should attempt to center images.
Centering will not work as anticipated if the CSS classes used to define the effects of the show include absolute positioning. For this reason, it is recommended to use image margins to animate slide changes. For a demonstration, please consult the example."
EDIT 2:
Hat sich leider doch nicht erledigt. Ich habe, wie in den Beispiel beschrieben, folgendes in meinen CSS-Code aufgenommen:
Das ändert aber leider gar nichts...Code:.slideshow-images-visible {
margin-left: 0;
}
.slideshow-images-prev {
margin-left: 400px;
}
.slideshow-images-next {
margin-left: -400px;
}
Viele Grüße
Tina
Ich verstehe es einfach nicht:
Hat sich mit der neuen Contao-Version 2.10.1 auch was für die Slideshow2 geändert?
Ich schaffe es einfach nicht mehr, meine Bilder innerhalb einer Slideshow, passend zu bekommen.
Das Template "slideshow2_js_standard.tpl" habe ich dupliziert und wie folgt angepasst:
Die Bilder werden aber alle in der gleichen Größe angezeigt, d.h. die Hochformate werden ins Querformat vergrößert und abgeschnitten.Code:<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready',function()
{
var images_<?php echo $this->id; ?> = {<?php echo $this->imgElements; ?>};
var show_<?php echo $this->id; ?> = new Slideshow<?php echo $this->EffectType;?>('show_<?php echo $this->id; ?>', images_<?php echo $this->id; ?>,
{
width: <?php echo $this->arrSlideshow2Size[0]; ?>,
height: <?php echo $this->arrSlideshow2Size[1]; ?>,
delay: <?php echo $this->rotation_interval; ?>,
duration: <?php echo $this->effect_duration; ?>,
<?php echo $this->EffectsExtended; ?>
loop: <?php echo $this->play_loop; ?>,
paused: <?php echo $this->play_paused; ?>,
random: <?php echo $this->play_random; ?>,
controller: <?php echo $this->controls; ?>,
fast: <?php echo $this->controls_type; ?><?php if($this->play_image == 'true'): ?> | OnStart<?php endif; ?>,
thumbnails: <?php echo $this->thumbnails; ?>,
captions: <?php echo $this->captions; ?>
resize:'fit',
center: true,
overlap: false,
});
});
//--><!]]>
</script>
Hier der Link zur Baustellenseite.
Könnt ihr mir da weiter helfen?
lg
KC
Keiner eine Idee? :o
Hallo, hatte das Problem gestern auch gerade, aber dann ging es schließlich doch. Mein template sieht exakt wie Deins aus und es funktioniert. Habe die aktuelle Slideshow2 installiert (aber auf Contao 2.9.5). Bist Du sicher, dass auf das richtige template zugegriffen wird?
Gruß!
Danke für Deine Antwort!Zitat:
Zitat von tlnewbie
Den Verdacht hatte ich auch schon. Wie kann ich das denn überprüfen?
Die entsprechenden Templates habe ich in einen Unterordner im "Templates-Ordner" gesichert.
Dem Theme habe ich dann diesen Unterordner als "Templates-Ordner" zugewiesen.
Das sollte doch korrekt sein, oder?
lg
Andi
Hallo AndiK,
leider weicht die Slideshow2 beim Zugriff auf die Templates-Ordner vom Contao-Standard ab und akzeptiert keine zugewiesenen Unterordner. Du musst deine Templates im Verzeichnis Templates speichern, dann werden Sie auch erkannt.
So ist es jedenfalls bei mir unter 2.10.1.
Viel Erfolg!
Oh Mann,
woher soll man das auch wissen?
Habe die Templates jetzt alle in den "/templates" Ordner verschoben und den Link dazu angepasst.
Das erste, hochformatige Bild wird auch direkt korrekt angezeigt, aber die Slideshow funktioniert jetzt nicht mehr. :mad:
Woran mag das jetzt liegen?
Jetzt läuft es. Zwar noch nicht so, wie es endgültig sein soll, aber die Diashow funktioniert rein technisch so weit...
Es lag wohl daran, dass der Befehl: "center: true" noch in der "*.tpl-Datei" vorhanden war...
Hi,
ist es auch irgendwie möglich den Bildern eine feste Breite zu geben, sodass dann abhängig vom Format die Höhe angepasst wird? Also im Prinzip ganz normales proportionales Skalieren.
gruss
Hab mich den ganzen Tag durchs Forum gesucht, aber bin nicht fündig geworden. Das Problem liegt darin, dass man in den Slideshow Einstellungen eine feste Breite und auch Höhe angeben MUSS. Bei meinem Vorhaben müsste die Höhe ja je nach Bild varieren.
Weiß da niemand Rat?
ist relativ dringend...:rolleyes:
Hallo,
ich habe da eine frage da ich leider auch nichts in der engl. Wiki zur Slideshow finde.
Ist es möglich die Thumbnails rechts zu platzieren und nicht unten ?
Oder geht das mit einer anderen Slideshow !
Ich danke euch.:cool:
google 1. ergebnis... funktioniert ganz gut.. ;) viel erfolg!Zitat:
Zitat von Speedygonzalez
Zitat:
Zitat von Schlauchbeutelmaschine
Dann muss ich aber derbe falsch gesucht haben. :( ich habe auch hier die Suche genutzt. Vielleicht sollte ich nicht solange am PC sitzen und am nächsten Tag wieder schauen.
Ich danke dir.
so schade, will nicht und ich glaube es liegt da dran das er mein Template nicht nutzt. Es liegt auch im root / templates.
:(
hab mich schon gewundert da ich ja gestern einiges ausprobiert hatte. Habe aber nie dran gedacht das es am Template liegen könnte.
vielleicht noch eine Idee^^ ich bin euch sehr dankbar.
Update nun aber.
Also Probleme sind fast alle gelöst.
wenn man neue Templates erstellt sollte man auch den Cache leeren ( systemwartung )
Als Inhaltselement läuft es auch ohne Probs im IE9.
Nun nur noch das mit den Thumbnails, das will einfach nicht, sobald ich diese einschalte, gibt es kein Startbild sprich kein Autostart Bereich bleibt weis. Klick ich auf eins drauf. Startet es bleibt aber beim nächsten wieder stehen. Und das nur wenn ich die Thumbnails aktiviere. Und dann verschwinden Sie auch gleich wieder im nichts ( die Thumbnails )
Hat dafür vielleicht jemand eine Lösung/Idee.
mfg
Hallo Zusammen,
frage hier gleich das das Gleiche, was Pandoran bereits am 28.05.2010 gefragt hat - in der Hoffnung, es gibt da inzwischen Ideen oder gar Lösungen?! :)
Suche mir grade Finger, Augen und zugegebenermaßen so langsam auch den Kopf wund nach einer Lösung...erfolglos..
Durch die hier im Thread beschriebenen Anpassungen im Template (resize:'fit') werden in meiner Slideshow nun alle Bilder - unabhängig vom Format - so skaliert, dass sie (ggf. mit Rand) ins vorgegebene Fenster passen. Soweit top, allerdings ergibt das in meinemFall nur dann Sinn, wenn auch die Thumbs enstprechend angepasst werden könnten. D.h. alle Thumbs sollen in meinem (horizontalen) Thumb-Slider proportional so skaliert werden, dass sie die gleiche Höhe haben. Und das Sahnehäubchen wäre noch, wenn sich die Abstände zwischen den Thumbs entsprechend anpassen könnten.
Danke und schöne Grüße,
Stefan
Hallo Zusammen,
noch mal die Frage nach einer Idee/Lösung, ob und wie man unterschiedlich große Thumbs erzeugen kann?
(z.B. mehr oder weniger breite Thumbs bei gleicher Höhe - je nach Bildabmessungen skaliert eben)
Außerdem stehe ich vor der Herausforderung, zwei "Scroll"-Pfeile zur Thumbsleiste hinzufügen zu wollen.
(je einer links und rechts der horizontalen Thumbnails-Leiste).
Mit den Tipps dazu auf den Seiten des Entwicklers http://groups.google.com/group/mootools-slideshow kam ich auch nicht recht weiter - z.T. scheinen sich die dortigen Diskussionen auf verflossenen Versionen zu beziehen..
Über Lösungen, Ideen opder Tipps freue ich mich sehr! Danke!
Schöne Grüße,
Leider finde ich das bei der Version 2.0.0 stable Build 5 der Slideshow2 nicht mehr im JS Template. Gibt es für die Version auch einen Trick um sowohl Hoch- als auch Querformatbilder in eine Slideshow einzubinden? Habe leider nichts dazu gefunden.Zitat:
Zitat von Schlauchbeutelmaschine
Edit:
Alles zurück. Hab ins falsche Template geguckt.
In /plugins/slideshow2/js findet man dann auch das richuge Template.
Ich kann da einstellen, was ich will: Meine hochformatigen Bilder kleben immer am rechten Bildrand. :(
Hast du alle Caches/TMPs in Contao gelöscht?
Einstellungen:
Breite und -höhe der Slideshow
400 x 600
Einstellungen im Template:
resize: 'length',
center: true,
overlap: false,
Hochformat passt, Querformat ist noch gequetscht.
Wie kann ich das noch optimieren?