Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
Seiten: 1
#1 30. Oktober 2012 17:08
- Hawkai
- hat von CMS/ms gehört
- Registriert: 26. Oktober 2012
- Beiträge: 14
Bildergalerie mit Gesten navigieren
Hallo Zusammen,
ich habe neulich jemandem Bilder einer CMSMS-Galerie auf dem iPhone gezeigt,
der versuchte dann gleich per Geste (Wischen) das nächste Bild zu sehen - Fehlanzeige.
Wie kann ich die in CMSMS enthalten Bildergalerien so umbauen,
dass diese in Smartphones per Gestensteuerung (Wischen) navigierter werden?
Offline
#2 30. Oktober 2012 17:29
- czarnowski
- kennt CMS/ms
- Registriert: 18. Oktober 2012
- Beiträge: 457
Re: Bildergalerie mit Gesten navigieren
Das ist grundsätzlich ein allgemeines Thema da die Lösung selbst allgemein ist.
Javascript unter Nutzung von touch events einsetzen.
Spezifikation gibt es hier http://www.w3.org/TR/2011/WD-touch-events-20110505/
Interessant ist für mich deine Meldung aus dem Grunde weil das genau eine professionelle Anforderung ist die von Firmen gestellt wird und womit ich mich nun seit 2 Monaten beschäftigt habe was in einem Abschluss meines Chefs mit dem Verkauf von 4000 Lizenzen krönte.
Ich vertrete selbst seit langer Zeit die Ansicht das sich Entwickler dem Thema widmen müssen da auch bei Notebooks und Desktop's die Multitouchsysteme einen großen Einzug halten.
Windows 7 unterstützt das bereits und Windows 8 macht das perfekt.
Tatsächlich kommen nun aus dem Bereich immer mehr Kundenwünsche und das in einem enormen Stückzahlenumfang bei der Nutzung.
Beitrag geändert von czarnowski (30. Oktober 2012 17:30)
Offline
#3 30. Oktober 2012 17:32
- nockenfell
- Moderator
- Ort: Lenzburg, Schweiz
- Registriert: 09. November 2010
- Beiträge: 2.927
- Webseite
Re: Bildergalerie mit Gesten navigieren
Hat einer einen Link ein Lightbox / Gallery Javascript welches genau dies macht? Mit diesem Problem habe ich mich auch schon beschäftigt. Für eine eigenprogrammierung eines Lightbox Javascripts fehlt mir die Zeit und vorallem die Erfahrung mit Javascript / jQuery
[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog / Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox
Offline
#4 30. Oktober 2012 18:49
- nicmare
- Server-Pate
- Registriert: 15. Dezember 2010
- Beiträge: 1.314
- Webseite
Re: Bildergalerie mit Gesten navigieren
ich mach das mit photoswipe. funzt wunderbar. kann man serverseitig mit nem udt abfragen:
{if $mobile_detect}{Gallery template="touchgallery"}{else}{Gallery template="fancybox"}{/if}
(theoretisch auch clientseitig mit window.width und document.write)
Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras
Offline
#5 31. Oktober 2012 23:08
- czarnowski
- kennt CMS/ms
- Registriert: 18. Oktober 2012
- Beiträge: 457
Re: Bildergalerie mit Gesten navigieren
{if $mobile_detect}
Das ist genau eines der Teilproblem die ich meine - mit anderen Worten das würde bei mir, der auch einen Multitouchbildschirm für Desktop nutzt, nicht funzen - da eben nicht mobil.
Auch wenn man jetzt an seine Smartphone - Freunde denkt - das ist zu kurz gedacht.
------------
Für mich interessant sind große Bildschirm ab 132 Zoll oder Multitouchwände da ich mich ab März damit beschäftigen muss.
Aber auch da ist die Technik exakt die gleiche.
Offline
#6 31. Oktober 2012 23:24
- nicmare
- Server-Pate
- Registriert: 15. Dezember 2010
- Beiträge: 1.314
- Webseite
Re: Bildergalerie mit Gesten navigieren
die detection ist ja nur optional. letzendlich geht es hierbei nur ums photoswipe (siehe link)
Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras
Offline
#7 31. Oktober 2012 00:24
- otter24
- kennt CMS/ms
- Ort: Hamburg
- Registriert: 12. Januar 2011
- Beiträge: 339
Re: Bildergalerie mit Gesten navigieren
moin hawkai,
ich nehme für solche zwecke meist den Flexslider der kann die wisch gesten und den kann man neben Bildern auch mit Html füttern und sich so einen Contentslider bauen. die Bilder kann man easy über das Modul Gallery steuern. Alles ne Template geschichte, nicht aufwendiges. Die Templates für "news" und Gallery kann ich dir schicken.
Ich bin war kein Klugscheißer, ich weiß wusste es wirklich nicht besser.
Offline
#8 31. Oktober 2012 00:58
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.017
- Webseite
Re: Bildergalerie mit Gesten navigieren
Die Templates für "news" und Gallery kann ich dir schicken.
Dürfte von allgemeinem Interesse sein - daher gern auch hier .
Offline
#9 31. Oktober 2012 11:29
- otter24
- kennt CMS/ms
- Ort: Hamburg
- Registriert: 12. Januar 2011
- Beiträge: 339
Re: Bildergalerie mit Gesten navigieren
Erstmal die Flexslider Galerie,
als erstes sich den Flexslider 2 hier runterladen.
1. Dann schaue ich mit den Bildaufruf an. Der sieht im Orginal so aus.
[== Html ==]
<div class="flexslider">
<ul class="slides">
<li> <img src="slide1.jpg" /> </li>
<li> <img src="slide2.jpg" /> </li>
<li> <img src="slide3.jpg" /> </li>
<li> <img src="slide4.jpg" /> </li>
</ul>
</div>
Also eine ganz normal ungeordnete Liste, daraus wird im Template.
[== Template Quelle ==]
<div class="flexslider"> <ul class="slides">
{foreach from=$images item=image}
<li><img src="{$image->file|escape:'url'|replace:'%2F':'/'}"> </li>
{/foreach}
</ul>
</div>
2. Das mitgelieferte flexslider.css kommt in das CSS Fenster im Galerie Template. Man könnte es auch im Head des Seiten-Templates einbauen, dann würde es aber bei jeder Seite ausgeliefert werden.
3. das Javascript. Erst die beiden Schripte, ( natürlich Pfade anpassen) und dann der Funtions aufruf.. Das sieht dann so aus.
[== Javascript Template ==]
<script type="text/javascript" src="uploads/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="uploads/js/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8"> $(window).load(function()
{ $('.flexslider').flexslider(); }); </script>
4. Template speichern und einer Galierie zuweisen und fertig ist der responsive wischgesten Slider der sich komfortabel von Endusern bedienen lässt!
5. Nicht vergessen Query muss mit eingebunden werden und zwar VOR den Scripten, das passiert bei mir im Head des Seiten Templates, weil jQuery auf mehreren Seiten benötige.
Abschliessend lässt sich sagen das viele Javascript bzw. auf jquery basierende Slider/Galierie/Laufbänder oder was auch immer sich mit einem Galerie Template umsetzen lassen. Der Weg ist immer der gleiche. Bildaufruf modifizieren, CSS rein Javascript rein und gut. Ach und Pfade anpassen. Das brauchts nicht immer noch ein Plugin mehr.
Damit hab ich eine Vollbild Galerie umgesetzt mit diesem Script.
http://buildinternet.com/project/supersized/
An das Teil soll ich noch ran. http://tympanus.net/Development/BookBlock/
Sollte aus einfach sein, da liste...
Gruß aus HH
Ich bin war kein Klugscheißer, ich weiß wusste es wirklich nicht besser.
Offline
#10 31. Oktober 2012 11:43
- faglork
- arbeitet mit CMS/ms
- Ort: Fränkische Schweiz
- Registriert: 15. Dezember 2010
- Beiträge: 1.152
- Webseite
Re: Bildergalerie mit Gesten navigieren
Wer eh schon
Toolbox installiert hat
Autolightbox mit Fancybox verwendet
und diese ebenfalls für Gallery einsetzt (was IMO sinnvoll ist weil nur noch EINE Methode zum Bildvergrößern zum Einsatz kommt)
könnte ja die Fancybox mit nem Swipe kombinieren:
Siehe
https://github.com/fancyapps/fancyBox/issues/123
"fancyapps commented 3 months ago
I no not think that it will bee merged into the main js file.
Anyway, it is quite easy to implement using any swipe plugin (for example, this one - https://github.com/mattbryson/TouchSwipe-Jquery-Plugin), just include the files and add apply it using callbacks - http://jsfiddle.net/S2s8k/
"
Werde ich gleich mal angehen.
Servus,
Alex
Offline
#11 31. Oktober 2012 12:18
- czarnowski
- kennt CMS/ms
- Registriert: 18. Oktober 2012
- Beiträge: 457
Re: Bildergalerie mit Gesten navigieren
Bei solchen Slidern welche so arbeiten
[== HTML ==]
<div class="flexslider">
<ul class="slides">
<li> <img src="slide1.jpg" /> </li>
<li> <img src="slide2.jpg" /> </li>
<li> <img src="slide3.jpg" /> </li>
<li> <img src="slide4.jpg" /> </li>
</ul>
</div>
habe ich gerade bei mobilen meine Bedenken, da damit alle Images sofort geladen werden.
Das bedeutet - Datentransfer ob man will oder nicht und gerade bei den Smartphone Pseudoflats im Bereich 250--500MB bedeutet das eine echte Belastung.
Für Leute die bewusst per Smartphone surfen ein echter Killer.
Besser finde ich Slider die nicht von sich aus "durchrauschen" sondern nur auf Anforderung und dann per Ajax sich das nächste Bild holen.
Dann verbleibt nur das erste Image als Platzhalter zum effektiven Download , das kann man verkraften.
Offline
#12 31. Oktober 2012 12:37
- otter24
- kennt CMS/ms
- Ort: Hamburg
- Registriert: 12. Januar 2011
- Beiträge: 339
Re: Bildergalerie mit Gesten navigieren
jooo da geb ich dir recht,
aber ich würde gerade die Slider auch nicht im auf mobilen geräten ausliefern, weil gerade bei Smartphones geht das um leichtgewichtige schnelle übersichtliche Infos und nicht um Eye Candy und das sind ImageSlider auf dem Smartphone.
da reicht zur not auch ein Bild. Ab Tablet größe kann man wieder diskutieren. Ich persönlich finde Bilder auf dem Smartphone, beim Surfen eher hinderlich...
Man könnte die Bilder auch Serverseitig per php auf die Zielgröße skalieren, quatsch nicht skalieren, ich meinte resizen, dann muss man sich überlegen, was schneller und besser und einfacher ist. Die Serverbelastung und das Transfervolumen.
Die perfekte Lösung hab ich da noch nicht, gibbet wohl auch nicht.
Beitrag geändert von otter24 (31. Oktober 2012 12:38)
Ich bin war kein Klugscheißer, ich weiß wusste es wirklich nicht besser.
Offline
#13 31. Oktober 2012 12:50
- jeff1980
- Server-Pate
- Ort: Dortmund
- Registriert: 26. November 2010
- Beiträge: 630
Re: Bildergalerie mit Gesten navigieren
Hi,
bei einem Produktkatalog habe ich neulich das hier eingesetzt: http://www.photoswipe.com
Funktioniert auf dem iPad (wofür der Katalog hauptsächlich gedacht ist) perfekt. Aber auch auf auf Smartphones und anderen Tablets ist der sehr angenehm - zumal er sich sowohl auf Touch- als auch auf "normalen" PC's/Notebooks perfekt und einfach bedienen lässt.
Aber generell finde ich es echt extrem, wie sich gerade alles - in meinen Augen - auseinander entwickelt. Zum Einen werden die Bildschirme immer hochauflösender, benötigen also immer größere Bilder, damit sie scharf dargestellt werden (Tablets aber auch HiDPI-Notebooks ala Retina-MacBook) - und dann dürfen die Datenmengen aber nicht so anwachsen, damit die Seiten auch unterwegs noch schnell und vor allem datentarifgerecht geladen werden.
Gibt es eigentlich schon eine Möglichkeit, per HTML/JS den Verbindungstyp abzufragen - sprich WLAN, LTE, UMTS, GPRS?
Das mit dem "resizen" mache ich mittlerweile fast nur noch - auch in Verbindung mit dem Gallery-Modul. Mit dem Supersizer-PlugIn funktioniert das auch richtig gut. So kann ich die Bilder in der höchsten Auflösung (z.Zt. teilweise 1600px/lange Kante) hochladen und dann das Template den Bedürfnissen anpassen.
Beitrag geändert von jeff1980 (31. Oktober 2012 12:51)
Offline
#14 31. Oktober 2012 12:59
- mike-r
- arbeitet mit CMS/ms
- Registriert: 21. Dezember 2010
- Beiträge: 898
- Webseite
Re: Bildergalerie mit Gesten navigieren
Die perfekte Lösung hab ich da noch nicht, gibbet wohl auch nicht.
Versteh ich grad nicht, man müsste doch eigentlich das Gewische "nur" innerhalb der Lightbox einbauen?
Vielleicht stell ich mir das zu einfach vor, aber es gibt ja diese per tastatur bedienbaren Lightboxen. Hier müsste man doch nur den Wisch bei der Funktion einbauen, die auch bei Pfeil-links vs Pfeil-rechts ausgelöst wird?
Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz
Offline
#15 31. Oktober 2012 13:45
- czarnowski
- kennt CMS/ms
- Registriert: 18. Oktober 2012
- Beiträge: 457
Re: Bildergalerie mit Gesten navigieren
@jeff1980
auseinander entwickelt würde ich nicht so sagen, denn es ist eine Entwicklung die sich in den letzten Jahren abzeichnete nun aber mit einem rasanten Tempo abgeht.
Das Marktforschungsunternhemen Gartner geht davon aus das bereits im nächsten Jahr weltweit mehr Mobilgeräte als die klassischen Desktop - PC's im Netz surfen werden.
Das aber bedeutet - Anbieter die nicht bereits vor 2 Jahren sich darauf eingestellt haben dürften bereits verloren haben.
Anbieter die es bislang immer noch nicht berücksichtigen die dürfen bald nicht mehr auf's Treppchen.
Und man muss immer ganz klar wissen das die Mobilgeräte insgesamt deutlich langsamer sind als Desktops.
Zudem sind die Leistungen der Prozessoren nicht vergleichbar und die Ping Zeiten im Funkbetrieb deutlich schlechter.
Bei Funkzellenwechsel z.B. während einer Fahrt sind die sogar relativ katastrophal.
Und ganz klar - das Problem das maximalen Datenvolumens bei bezahlbaren Flats wird von sehr vielen Leuten die Inhalte anbieten einfach ignoriert mit dem Erfolg das ihnen die Besucher weg laufen.
Facebook z.B. entwickelt aktuell nach dem Motto Mobile first und kämpft bei ihren Werbeversuchen genau mit derartigen Problemen
Also ein Thema das solange bleibt wie Desktop PC's noch einen hohen Anteil haben.
Offline
#16 13. November 2012 18:08
- mike-r
- arbeitet mit CMS/ms
- Registriert: 21. Dezember 2010
- Beiträge: 898
- Webseite
Re: Bildergalerie mit Gesten navigieren
otter24 schrieb:Die perfekte Lösung hab ich da noch nicht, gibbet wohl auch nicht.
Versteh ich grad nicht, man müsste doch eigentlich das Gewische "nur" innerhalb der Lightbox einbauen?
Kann sich da mal ein JS-(und günstigenfalls Light-box-)Kundiger dazu äussern?
Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz
Offline
#17 13. November 2012 19:31
- nicmare
- Server-Pate
- Registriert: 15. Dezember 2010
- Beiträge: 1.314
- Webseite
Re: Bildergalerie mit Gesten navigieren
mike-r schrieb:otter24 schrieb:Die perfekte Lösung hab ich da noch nicht, gibbet wohl auch nicht.
Versteh ich grad nicht, man müsste doch eigentlich das Gewische "nur" innerhalb der Lightbox einbauen?
Kann sich da mal ein JS-(und günstigenfalls Light-box-)Kundiger dazu äussern?
mit touchswipe, fancybox und natürlich jquery geht das so in etwa:
$("#fancybox-content").swipe({
swipeLeft: function() {
$.fancybox.next();
},
swipeRight: function() {
$.fancybox.prev();
},
triggerOnTouchEnd:false
});
Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras
Offline
#18 13. November 2012 22:21
- nockenfell
- Moderator
- Ort: Lenzburg, Schweiz
- Registriert: 09. November 2010
- Beiträge: 2.927
- Webseite
Re: Bildergalerie mit Gesten navigieren
Hast du ne Demo davon auf einer Seite?
[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog / Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox
Offline
#19 17. November 2012 15:08
- mike-r
- arbeitet mit CMS/ms
- Registriert: 21. Dezember 2010
- Beiträge: 898
- Webseite
Re: Bildergalerie mit Gesten navigieren
Würde mir das auch gern mal in Farbe anschauen, hab schon etliches durchprobiert (u.a. auch das) komme aber mangels Doku und mangels JS-Kenntnissen zu keinem funktionierenden Ergebnis.
Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz
Offline
#20 17. November 2012 18:36
- nicmare
- Server-Pate
- Registriert: 15. Dezember 2010
- Beiträge: 1.314
- Webseite
Re: Bildergalerie mit Gesten navigieren
habs mal ganz simpel gemacht:
http://jsfiddle.net/S2s8k/28/
musste die arrows deaktivieren sonst hätten die den event immer unterbrochen. auf dem ipad gehts jetzt jedenfalls. müsste man jetzt noch weiter ausarbeiten damits auch mit den arrows auf normalen geräten klappt.
Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras
Offline
#21 18. November 2012 21:50
- nockenfell
- Moderator
- Ort: Lenzburg, Schweiz
- Registriert: 09. November 2010
- Beiträge: 2.927
- Webseite
Re: Bildergalerie mit Gesten navigieren
Habe das ganze gerade in der ToolBox bzw. der AutoLightBox eingebaut. Im Template kann man neu ein zweites Template für den mobilen Teil definieren, falls gewünscht. Darüber kann man dann z.B. auch zwei ganz unterschiedliche Lightboxen laufen lassen, ohne dass jeweils gleich beides geladen werden wird.
Noch ein paar Tests, dann werde ich die nächste Version von ToolBox in ca. 1 Woche veröffentlichen.
[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog / Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox
Offline
Seiten: 1