Wie heisst diese Funktion Bilder in gleicher Grösse von links nach rechts scrollen?

Choghitto schrieb am 18.04.2013 um 11:00 Uhr

Damit ihr wisst was ich meine, hier der Link wie http://www.montanimaurizio.com/#!/book/21309 oder http://www.ira-web.de/  Wie ist dies zu bewerkstelligen mit XARA Web Designer. Gibt es Anleitungen dazu?

Besten Dank für Eure Antwort.

Jürgen B.

Kommentare

marboe schrieb am 18.04.2013 um 11:04 Uhr

Hallo Choghitto,

der eine Link geht nicht bzw ist falsch .... aber was du meinst ist eine SlideShow. Du findest sie ein kleiner Anzahl in den Widgets und sehr zahlreich im Web als Flash-Slideshows oder sogar schon als Slideshows die mit reinem HTML funktionieren und somit auch ein klein wenig smartphone-tauglicher sind. Viel Erfolg! Gruß Martina

Choghitto schrieb am 18.04.2013 um 11:14 Uhr

Besten Dank für die Antwort Martina!

Hier noch mal den Link: http://www.montanimaurizio.com dann auf BOOK gehen. Ich habe all die Widgets angeschaut und getestet, jedoch entsprach keiner dieser Vorlagen annähernd das was ich suche:-) Auch würde ich lieber ohne Flash arbeiten ausser es ist notwendig:-)

Beste Grüsse

Jürgen

marboe schrieb am 18.04.2013 um 11:30 Uhr

Hallo Jürgen,

na, dann schau mal hier. Da findest du sicher mehr .  Gruß Martina

BeRo schrieb am 18.04.2013 um 16:39 Uhr

Hi, Choghitto.

Danke für Deine PN von vorhin.

Im Interesse der Community beantworte ich Deine Frage hier, im Forum. Nur so können IMHO auch andere User davon profitieren, die eventuell das gleiche- oder ein ähnliches Problem haben...

Du schreibst:

[...] habe vergeblich versucht hier im Forum eine Antwort zu finden, die mich ganz zufrieden stellt [...]

Die 100% Lösung kann ich Dir leider auch nicht bieten. Auf beiden der von Dir als Muster verlinkten Seiten, wird die Slideshow mit JavaScript und PHP realisiert.

Wenn Du das nachbauen willst, kommst Du um die Suche, die Dir marboe ja schon empfohlen hat, nicht herum.

Das Angebot im WWW ist riesig und vielfältig, was die Art der Realisierung angeht. Da Du auf  Flash Lösungen verzichten willst, bieten sich Lösungen an, die im einfachsten Fall auf reinem HTML basieren, oder, komfortabler auf JavaScript und ggf. noch CSS und/oder PHP basieren.

Die HTML Variante ist schnell gemacht.

Dazu legst Du Dir eine neue Seite an, in der Höhe der späteren Slideshow, die Du so breit machst, dass alle Fotos, die Du zeigen willst, hineinpassen. Die maximale Seitenbreite, die der WD8 verarbeiten kann, liegt bei ca. 8.830px. Das wird beim XD ähnlich sein.
Gib der Seite einen passenden Namen, z. B. "Slides"

Die Fotos, die alle gleich hoch sein müssen, legst Du dann so eng nebeneinander in die neue Seite, dass das von Dir gewünschte Band mit Bildern entsteht.

Auf der Seite, die die Slideshow, zeigen soll, legst Du jetzt einen Platzhalter an, in der Größe der Slideshow, in Deinem Fall also über die gesamte Seitenbreite.

Dem Platzhalter weist Du dann einen iframe Code zu, in dem Du auf die vorhin angelegte Seite mit den Bildern verweist.

Der iframe Code kann etwa so aussehen, wenn Du die Seite mit den Bildern "Slides" genannt hast:

-----------------------------
<iframe src="Slides.htm" style="width:955px;height:150px;max-width:100%;overflow:auto;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0"></iframe>
------------------------------

Im iframe Code ist Deine Seitenbreite mit 955px angenommen und die Höhe der Slideshow mit 150px. Der horizontale Scrollbalken erscheint automatisch, wenn die Breite der Bilderseite größer als 955px ist.

Damit ist Deine HTML Bildershow fertig. Sie sollte auf allen Browsern zu sehen sein...

Wenn Du die komfortablere Variante vorziehst, solltest Du zumindest Grundkenntnisse in JavaScript (im Besonderen JQuery) haben und auch vor dem Einsatz von CSS und evtl. PHP nicht zurück schrecken.

In dem Fall kannst Du Dir hier, hier und hier eine Reihe von Demos und Vorlagen ansehen. Da ist ganz sicher etwas dabei, das genau zu Deinen Vorstellungen passt.

Wie so ein Slider in die eigene Website eingebunden werden kann, das hatte ich hier, in einem anderen Thread am Beispiel des WOW Sliders schon mal erklärt.

Auf allen oben verlinkten Seiten findest Du detaillierte Infos und Download Links für den Quellcode der Slider, sowie etliche online Demos.

Viel Erfolg

Zuletzt geändert von BeRo am 18.04.2013, 16:39, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Choghitto schrieb am 18.04.2013 um 20:04 Uhr

Besten Dank BeRo, für die ausführlichen Erklärungen. Ich bin ein Anfänger und kenne daher die Zusammenhänge nicht. Durch Deine Beschreibung weiss ich jetzt, was ich brauche und welche Wege dazu führen, um zum gewünschten Resultat zu kommen. So stelle ich mir ein Forum "da wird Ihnen geholfen" vor!

Werde die Vorschläge mal ausprobieren.

Nochmals grosses Kompliment an Dich! 

Choghitto schrieb am 20.04.2013 um 10:11 Uhr

Hallo BeRo


Die HTML Variante ist schnell gemacht.

Dazu legst Du Dir eine neue Seite an, in der Höhe der späteren Slideshow, die Du so breit machst, dass alle Fotos, die Du zeigen willst, hineinpassen. Die maximale Seitenbreite, die der WD8 verarbeiten kann, liegt bei ca. 8.830px. Das wird beim XD ähnlich sein.
Gib der Seite einen passenden Namen, z. B. "Slides"

Die Fotos, die alle gleich hoch sein müssen, legst Du dann so eng nebeneinander in die neue Seite, dass das von Dir gewünschte Band mit Bildern entsteht.

Auf der Seite, die die Slideshow, zeigen soll, legst Du jetzt einen Platzhalter an, in der Größe der Slideshow, in Deinem Fall also über die gesamte Seitenbreite.

Dem Platzhalter weist Du dann einen iframe Code zu, in dem Du auf die vorhin angelegte Seite mit den Bildern verweist.

Der iframe Code kann etwa so aussehen, wenn Du die Seite mit den Bildern "Slides" genannt hast:

-----------------------------
<iframe src="Slides.htm" style="width:955px;height:150px;max-width:100%;overflow:auto;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0"></iframe>
------------------------------

Im iframe Code ist Deine Seitenbreite mit 955px angenommen und die Höhe der Slideshow mit 150px. Der horizontale Scrollbalken erscheint automatisch, wenn die Breite der Bilderseite größer als 955px ist.

Damit ist Deine HTML Bildershow fertig. Sie sollte auf allen Browsern zu sehen sein...

Es hat alles wie ich mir schon es schon gedacht habe super funktioniert und sieht dem was ich möchte am ähnlichsten. Nun habe ich noch eine Frage - gibt es eine Möglichkeit einen Code für horizontales Mouse Scrollen zu ermöglichen ohne den Balken hin und her zu schieben?

Das wäre noch der Zuckerguss darüber:-)

Beste Grüsse

Jürgen

BeRo schrieb am 20.04.2013 um 12:31 Uhr

[...] gibt es eine Möglichkeit einen Code für horizontales Mouse Scrollen zu ermöglichen [...]

Ja, den gibt es, wenn man ihn programmiert...

Will sagen, das geht nicht, ohne einen speziellen Script Code zu entwickeln, der auf Mausklick entsprechend reagiert.

In dem Fall kommst Du auf jeden Fall schneller ans Ziel, wenn Du eine der verlinkten Möglichkeiten benutzt, die Dir z. B. die JQuery Bibliothek bietet. Unter dem Suchbegriff "jquery slider" wirt Dir jede Suchmaschine 100e Angebote zeigen.

Hier wird z. B. so ein Slider vorgestellt, der IMO passen sollte. Leider ist der nicht kostenfrei ( 20,-$). Es gibt aber sicher auch kostenlose Varianten. Wenn Du die Links aus meinem letzten Kommentar mal in Ruhe durchsiehst, wirst Du bestimmt etwas finden.

Viel Erfolg und ein schönes WE

Zuletzt geändert von BeRo am 20.04.2013, 12:32, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓