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

#1 28. Dezember 2012 12:23

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Gallery mit mobiltauglichem Photoswipe

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:

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

/* +++++++++++++++++++++++++++++++++++
   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:

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

Offline

#2 28. Dezember 2012 15:31

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.814
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Danke für die Anleitung!


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#3 28. Dezember 2012 15:43

Cherry
CMS/ms-Profi
Registriert: 15. Dezember 2010
Beiträge: 529

Re: Gallery mit mobiltauglichem Photoswipe

Danke auch von mir

Offline

#4 29. Dezember 2012 11:53

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#5 30. Dezember 2012 23:55

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Danke, gute Anleitung...

IE 6 kann man glaub ich verschmerzen...

Offline

#6 03. Januar 2013 15:21

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#7 03. Januar 2013 15:27

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.160

Re: Gallery mit mobiltauglichem Photoswipe

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.

Offline

#8 04. Januar 2013 10:24

rage_all
arbeitet mit CMS/ms
Ort: Augsburg
Registriert: 09. März 2011
Beiträge: 281

Re: Gallery mit mobiltauglichem Photoswipe

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.

Offline

#9 04. Januar 2013 11:35

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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:

  // 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!

Offline

#10 04. Januar 2013 12:39

rage_all
arbeitet mit CMS/ms
Ort: Augsburg
Registriert: 09. März 2011
Beiträge: 281

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#11 10. Januar 2013 16:07

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Funktioniert bei euch Photoswipe im IE 8?

Offline

#12 10. Januar 2013 16:19

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

brandy schrieb:

Funktioniert bei euch Photoswipe im IE 8?

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

Offline

#13 11. Januar 2013 08:57

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#14 11. Januar 2013 10:28

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#15 11. Januar 2013 10:46

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#16 11. Januar 2013 10:58

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

Setz doch mal das:

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

Offline

#17 11. Januar 2013 12:03

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#18 11. Januar 2013 12:23

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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.

Offline

#19 11. Januar 2013 12:34

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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

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

Offline

#20 11. Januar 2013 13:02

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#21 11. Januar 2013 13:35

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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

Offline

#22 11. Januar 2013 13:51

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Mag er auch nicht...

Offline

#23 11. Januar 2013 13:57

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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

Da weis ich jetzt grade auch nicht weiter...

Offline

#24 12. Januar 2013 17:04

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 707
Webseite

Re: Gallery mit mobiltauglichem Photoswipe

Ich hab diesen Skript-Teil

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

Offline

#25 12. Januar 2013 17:41

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: Gallery mit mobiltauglichem Photoswipe

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)

Offline