Gallery mit mobiltauglichem Photoswipe

Klenkes · 28. Dezember 2012 12:23

Nach meiner langen Suche nach einer mobil- und touchscreentauglichen Lösung fand ich Photoswipe, und bin damit mehr als zufrieden. Es gibt natürlich noch viele andere Lösungen, und diese hier ist bestimmt nicht der Weisheit letzter Schluss, aber einfach einzusetzen und funktioniert robust.

Die wichtigsten Features:
- Wischgesten zum Bildwechsel
- einfach Einschalten der Slideshow durch den User
- möglichst screenfüllendes Format des Bildes
- responsive natürlich

Für mein Beispiel möchte ich Thumbnails im Format 80x80px haben.
So sieht das Frontend aus:
Photoswipe
Und so das vergrößerte Bild(ungefähres Handyformat)
Photoswipe Thumbs

Was braucht man:
1) Die Dateien von Photoswipe
2) jQueryeinbindung
3) Etwas CSS fürs Ausehen
4) Eine Gallery Template

Wo kommen die Dateien hin:
In meinem Beispiel sind die Javascriptdatein klass.min.js und photoswipe.min.js in /js/
Die 4 Photoswipe Icons der Toolbar sind bei mir in /images/photoswipe/

Und so geht's
Neue Template anlegen:

Hier klicken, um den Code zum Kopieren zu markieren

<div class="gallery">

{if !empty($module_message)}<h2>{$module_message|escape}</h2>{/if}
{if !empty($gallerytitle)}<h2>{$gallerytitle}</h2>{/if}
{if !empty($gallerycomment)}<p>{$gallerycomment}</p>{/if}
<p>{$imagecount}</p>

<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>

<ul class="ps-gallery">
{foreach from=$images item=image}
  {if $image->isdir}<li><a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb}" alt="{$image->titlename}" /></a><br />{$image->titlename}</li>
{else}
  <li>
    <a href="{$image->file}" title="{$image->titlename}" class="gal">
    <img src="{$image->thumb}" alt="{$image->titlename} - {$image->comment}" title="{$image->titlename}" width="80" height="80">
    </a>
  </li>
{/if}
{/foreach}
</ul>

<!--[if lte IE 6]>
<p class="alert">Ihr InternetExplorer ist leider zu alt um die Bilder als Galerie anzuzeigen.
Sorry...</p>
<![endif]-->

<div class="galleryclear">&nbsp;</div>
</div><!-- /gallery -->

Bemerkungen:
Ich setze für die Thumbnails hier width="80" height="80" händisch, weil es besser ist, stets die Größe anzugeben. Muss man es natürlich seinen Anforderungen anpassen UND in der Gallerytemplate einstellen.

Das CSS:

Hier klicken, um den Code zum Kopieren zu markieren

/* +++++++++++++++++++++++++++++++++++
   Photoswipe CSS
+++++++++++++++++++++++++++++++++++ */
body.ps-active, body.ps-building, div.ps-active, div.ps-building
{
	background: #000;
	overflow: hidden;
}

body.ps-active *, div.ps-active * { 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
	display: none;
  }

body.ps-active *:focus, div.ps-active *:focus {outline: 0;}

/* Document overlay */
div.ps-document-overlay {background: #222;}

/* UILayer */
div.ps-uilayer {background: #000; cursor: pointer;}

/* Zoom/pan/rotate layer */
div.ps-zoom-pan-rotate{background: #000;}
div.ps-zoom-pan-rotate *  { display: block; }

/* Carousel */
div.ps-carousel-item-loading {background: url(/images/photoswipe/loader.gif) no-repeat center center;}

div.ps-carousel-item-error {background: url(/images/photoswipe/error.gif) no-repeat center center;}

/* Caption */
div.ps-caption { 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 14px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
}
div.ps-caption *  { display: inline; }

div.ps-caption-bottom { 
	border-top: 1px solid #42403f;
	border-bottom: none;
	min-height: 44px;
}

div.ps-caption-content {
	padding: 13px;
	display: block;
	color:#FFF;
	font-weight:bold;
}

/* Toolbar */
div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}
div.ps-toolbar * { 
	display: block;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(/images/photoswipe/icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res display */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-moz-background-size: 176px 88px;
		-o-background-size: 176px 88px;
		-webkit-background-size: 176px 88px;
		background-size: 176px 88px;
		background-image: url(/images/photoswipe/icons@2x.png);
	}
}

/* Darstellung der Thumbs */
ul.ps-gallery   {list-style:none; margin:0 0 15px 0;}
ul.ps-gallery li {float:left; display:inline; margin:0 15px 15px 0;}
ul.ps-gallery a  {display:block;}
.ps-gallery li img {margin:0;}

Bemerkungen:
1) Die Steuerung der Thumbnails erfolgt ganz unten im Stylesheet.

Im Feld Template Javascript:

Hier klicken, um den Code zum Kopieren zu markieren

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  var fotos = $(".ps-gallery a.gal").photoSwipe({ imageScaleMethod: 'fitNoUpscale', captionAndToolbarAutoHideDelay: '8000' });
});
</script>

<script type="text/javascript" src="/js/klass.min.js"></script>
{* Falls bereits jQuery eingesetzt wird...*}
<script type="text/javascript" src="/js/code.photoswipe.jquery-3.0.5.min.js"></script>
{* ...sonst reicht diese Datei:*}
<script type="text/javascript" src="/js/code.photoswipe.3.0.5.min.js"></script>

Bemerkungen:
1) Wenn man jQuery bereits sowieso eingebunden habt, kann man es hier raus lassen.
2) Die verscheidenen Photoswipe Parameter liest man am Besten selbst nach. Mein Beispiel funktioniert so sehr robust.
3) Pfade zu klass.min.js und code.photoswipe.jquery-3.0.5.min.js müssen eventuell angepasst werden. In meinem Beispiel sind all JS im Root /js/

Ab hier sollte es funktionieren!

Wenn etwas nicht funktioniert liegt es meist an falschen Pfaden!
1) Verweisen die Pfade im CSS auf die Icons in /images/photoswipe/
2) Wo ist klass.min.js und code.photoswipe.jquery-3.0.5.min.js? Stimmt der Pfad?
3) jQuery sollte mind. 1.6.x sein

Beitrag geändert von Klenkes (14. Januar 2013 09:41)

nockenfell · 28. Dezember 2012 15:31

Danke für die Anleitung!

Cherry · 28. Dezember 2012 15:43

Danke auch von mir

Klenkes · 29. Dezember 2012 11:53

Ich füge hier mal an, was nicht funktioniert.

Was nicht funktioniert:
1) Symbian S60 zeigt die Bilder nicht an
(Okay... ist mein Nokia X6, bei Neueren geht es vielleicht)
2) Ab IE6 abwärts werden nicht unterstützt

brandy · 30. Dezember 2012 23:55

Danke, gute Anleitung...

IE 6 kann man glaub ich verschmerzen...

brandy · 03. Januar 2013 15:21

Firebug schmeißt mir hier zwei Fehler - http://www.floors.at/_cms/index.php?page=bilder-beta
Was passt da nicht?

NaN · 03. Januar 2013 15:27

jQuery is not defined

und

$ is not defined

Diese beiden Fehler sagen doch eigentlich schon alles aus.
jQuery ist zum Zeitpunkt an dem diese Funktionen ausgeführt werden sollen noch nicht geladen.
Ist auch kein Wunder, denn jQuery steht bei Dir ganz unten vor </body> aber das Orbit-Plugin und der $(document).ready Aufruf stehen oben im Head.

rage_all · 04. Januar 2013 10:24

Das nervt mich auch; überall wird empfohlen die JS-Dateien am Ende zu platzieren - was ich okay finde - aber dann geht die Hälfte (wie eben Bildergalerien) nicht...
Ergo: Doch wieder alles in den Header...

Ich hab mir noch etwas extra Arbeit gemacht und mit "meinem" {$mobiledetection} Plugin zwischen Systemen unterschieden. Je nachdem ob ein Computer oder Tablet, bzw. Smartphone kommt, erhält dieser die reguläre Gallery oder eben Photoswype.

Von den Usern kam bisher keinerlei Kritik; ich konnte es leider nur mit drei Androids, iPad, iPhone4 und Nokia X6 testen.

Klenkes · 04. Januar 2013 11:35

rage_all schrieb:

Das nervt mich auch; überall wird empfohlen die JS-Dateien am Ende zu platzieren - was ich okay finde - aber dann geht die Hälfte (wie eben Bildergalerien) nicht...
Ergo: Doch wieder alles in den Header...

Meine Unterschrift drunter!

Aber... je nach Websitekonstruktion packe ich alle JS-Calls in eine externe Datei und lade alles zum Schluss, oder setze gleich alles ans Doc-Ende in die Template, wobei der Galerieaufruf dann aber ein generischer sein muss, weil er nicht direkt mit der Galerie eingesetzt wird.
Per jQuery muss dann vor dem Call nachgeschaut werden, ob es überhaupt eine Galerie gibt, und dann erst der JS-Call ausgeführt. Sonst führt es zu einem JS Exception Fehler.
In der Form von:

Hier klicken, um den Code zum Kopieren zu markieren

  // Gibt es einen Link mit class=einzelfoto?
  var has_photoswipe = $("body").find("a.einzelfoto");
  if (has_photoswipe.length !== 0) {
    var einzelfoto=$(".einzelfoto").photoSwipe({imageScaleMethod:'fitNoUpscale',captionAndToolbarAutoHideDelay:'8000'});
   }

rage_all schrieb:

...ich konnte es leider nur mit drei Androids, iPad, iPhone4 und Nokia X6 testen.

Funktionierte es mit dem X6?
Bei mir nicht!

rage_all · 04. Januar 2013 12:39

Klenkes schrieb:

rage_all schrieb:
...ich konnte es leider nur mit drei Androids, iPad, iPhone4 und Nokia X6 testen.
Funktionierte es mit dem X6?
Bei mir nicht!

Positiv!
Allerdings nicht mit dem onboard-Browser ... das ist ne Krankeit in Bit-Form. Ich glaube der kann nicht mal JS, da dürfte das Problem schon losgehen (z.B. die Mini-Navigation auf der Seite wird zwar dargestellt, enthält aber keine Daten - ist insofern also unbrauchbar).
Mit Opera Mobile funktioniert es wunderbar, alle Funktionen genauso wie auf iPhone oder Android.

Naja, mal abgesehen davon ist das X6 als Einsteigergerät sowieso (ich war bitter enttäuscht, aber selbst schuld weil ich mich diesmal nicht ausreichend vorher informiert hatte) und vom Alter her ... 2010, naja, leider Grenzwertig. Ich glaube nicht, dass ich einem Kunden auch nur 1 Std. extra verkaufen könnte für eine Optimierung von Geräten diesen alters.

Siehe auch "Warum Whatsapp nicht mehr auf iPhone 3G läuft", obwohl die Dinger heute noch haufenweise verkauft werden...

brandy · 10. Januar 2013 16:07

Funktioniert bei euch Photoswipe im IE 8?

Klenkes · 10. Januar 2013 16:19

brandy schrieb:

Funktioniert bei euch Photoswipe im IE 8?

Ja! Was mich echt wunderte...
Unter XP sowie im IETester.

brandy · 11. Januar 2013 08:57

Ich hab jetzt nämlich auf zwei Computer im IE probiert und da hats nicht funktioniert... Interessant...

Klenkes · 11. Januar 2013 10:28

Versuch es doch mal hier
(ich lasse es mal eine Zeit freigeschaltet)

Im IETester funktioniert es runter bis zum IE6.
Installierte IE hab ich momentan leider nur bis zum 8er.

Und sach dann bloß nich, es funktioniiert bei dir nicht... mad

brandy · 11. Januar 2013 10:46

Ok deine Seite funktioniert - bei meiner schmeißt er einen Fehler - muss ich mir ansehen!
Danke!

Klenkes · 11. Januar 2013 10:58

Setz doch mal das:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  var fotos = $(".ps-gallery a.gal").photoSwipe({ imageScaleMethod: 'fitNoUpscale', captionAndToolbarAutoHideDelay: '8000' });
});
</script>

...nach der Einbindung von photoswipe.min.js ein.

Steht es davor zickt der IE rum.

Beitrag geändert von Klenkes (11. Januar 2013 10:58)

brandy · 11. Januar 2013 12:03

Vielen Dank für deinen Tipp - hat aber noch nichts geändert...
Ich muss mir mal einen anderen IE 8 suchen - ich glaube diese in meiner Firma sind nicht ganz koscher...

Klenkes · 11. Januar 2013 12:23

brandy schrieb:

Vielen Dank für deinen Tipp - hat aber noch nichts geändert...
Ich muss mir mal einen anderen IE 8 suchen - ich glaube diese in meiner Firma sind nicht ganz koscher...

Ähem... hatte ich vergessen zu erwähnen, dass deine Floors Seite bei mir im IE8 auch nicht funktioniert? Selbe JS-Fehlermeldungen vermutlich.

Da sind definitiv Fehler.

Klenkes · 11. Januar 2013 12:34

Was die alten IE angeht, habe ich mit solchen Scripts vor dem Body schlechte Erfahrungen gemacht.

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  var fotos = $(".ps-gallery a.gal").photoSwipe({ imageScaleMethod: 'fitNoUpscale', captionAndToolbarAutoHideDelay: '8000' });
});
</script>

Bei all meinen Seiten, bei denen es in alten IE funktioniert, kommt der Aufruf am Ende des Dokuments.

brandy · 11. Januar 2013 13:02

Ja aber ich habs ja wie du, im Javascript-Feld der Gallery - wo er das dann lädt kann ich ja nicht bestimmten...

Klenkes · 11. Januar 2013 13:35

Dann nimm es testhalber mal aus dem Javascriptfeld raus und setze es in der Template nach der Bilderschleife rein.

brandy · 11. Januar 2013 13:51

Mag er auch nicht...

Klenkes · 11. Januar 2013 13:57

Ach Menno...
Auf dieser Seite funktioniert es auch, wenn es oben eingebunden ist.

Da weis ich jetzt grade auch nicht weiter...

brandy · 12. Januar 2013 17:04

Ich hab diesen Skript-Teil

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="photoswipe/js/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/js/code.photoswipe-3.0.5.min.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  var fotos = $(".ps-gallery a.gal").photoSwipe({ imageScaleMethod: 'fitNoUpscale', captionAndToolbarAutoHideDelay: '8000' });
});
</script>

ins Template der Gallery eingebaut, sowohl auch ins Seitentemplate - In Firefox funktionierts in jedem Fall - IE 8 lässt sich aber nicht überreden...

Klenkes · 12. Januar 2013 17:41

Ich hab mir mal die Mühe gemacht und deine BILDER-Seite lokal abgespeichert, und alles unnötige um die Bilder herum entfernt. Es geht nicht!

Dann hab ich auf meine klass.min.js und meine photoswipe.min.js LOKAL verlinkt und siehe: es geht!

Könnte es sein dass deine Javascriptdateien beim Upload beschädigt wurden oder etwas mit der Codierung UTF-8 nicht stimmt? Sobald ich "meine" Dateien nehme, funktioniert die Seite wie sie soll!

Ich bin ein großer Freund der einfachen Dateinamen, und würde die Dateien:
- klass.min.js
- photoswipe.min.js
benennen.

Beitrag geändert von Klenkes (12. Januar 2013 17:45)

Forum für CMS/made simple

#1 28. Dezember 2012 12:23

Gallery mit mobiltauglichem Photoswipe

#2 28. Dezember 2012 15:31

Re: Gallery mit mobiltauglichem Photoswipe

#3 28. Dezember 2012 15:43

Re: Gallery mit mobiltauglichem Photoswipe

#4 29. Dezember 2012 11:53

Re: Gallery mit mobiltauglichem Photoswipe

#5 30. Dezember 2012 23:55

Re: Gallery mit mobiltauglichem Photoswipe

#6 03. Januar 2013 15:21

Re: Gallery mit mobiltauglichem Photoswipe

#7 03. Januar 2013 15:27

Re: Gallery mit mobiltauglichem Photoswipe

#8 04. Januar 2013 10:24

Re: Gallery mit mobiltauglichem Photoswipe

#9 04. Januar 2013 11:35

Re: Gallery mit mobiltauglichem Photoswipe

#10 04. Januar 2013 12:39

Re: Gallery mit mobiltauglichem Photoswipe

#11 10. Januar 2013 16:07

Re: Gallery mit mobiltauglichem Photoswipe

#12 10. Januar 2013 16:19

Re: Gallery mit mobiltauglichem Photoswipe

#13 11. Januar 2013 08:57

Re: Gallery mit mobiltauglichem Photoswipe

#14 11. Januar 2013 10:28

Re: Gallery mit mobiltauglichem Photoswipe

#15 11. Januar 2013 10:46

Re: Gallery mit mobiltauglichem Photoswipe

#16 11. Januar 2013 10:58

Re: Gallery mit mobiltauglichem Photoswipe

#17 11. Januar 2013 12:03

Re: Gallery mit mobiltauglichem Photoswipe

#18 11. Januar 2013 12:23

Re: Gallery mit mobiltauglichem Photoswipe

#19 11. Januar 2013 12:34

Re: Gallery mit mobiltauglichem Photoswipe

#20 11. Januar 2013 13:02

Re: Gallery mit mobiltauglichem Photoswipe

#21 11. Januar 2013 13:35

Re: Gallery mit mobiltauglichem Photoswipe

#22 11. Januar 2013 13:51

Re: Gallery mit mobiltauglichem Photoswipe

#23 11. Januar 2013 13:57

Re: Gallery mit mobiltauglichem Photoswipe

#24 12. Januar 2013 17:04

Re: Gallery mit mobiltauglichem Photoswipe

#25 12. Januar 2013 17:41

Re: Gallery mit mobiltauglichem Photoswipe

Fußzeile des Forums