Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#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)

Offline

#5 31. Oktober 2012 23:08

czarnowski
kennt CMS/ms
Registriert: 18. Oktober 2012
Beiträge: 457

Re: Bildergalerie mit Gesten navigieren

nicmare schrieb:

{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)

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

otter24 schrieb:

Die Templates für "news" und Gallery kann ich dir schicken.

Dürfte von allgemeinem Interesse sein - daher gern auch hier wink.

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

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?
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

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?


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:
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
});

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.

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