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

#1 04. Juni 2013 21:52

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

[GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Hi

baue meine Website gerade in eine mobile Version um. Klappt auch soweit, nur bei der Galerie komme ich nicht weiter. Gibt es schon ein Modul im CMSMS, das sich eignet? Bin nicht so der Technik-Guru, der alles von Hand selbst machen kann.

Zweites Problem: Bei eingebundenen Bildern leidet die Qualität auf dem Smartphone, die Bilder sind unscharf, da sie heruntergerechnet werden. Gibt es da eine bessere Lösung?

Ich habe mittels media queries im CSS die Anpassungen an die mobile Version vorgenommen. Die CMSMS Version ist      1.11.6. Hier ist die Seite: www.wennekamp-webdesign.de

Freue mich über jeden Tipp!
Danke
Elke

Offline

#2 05. Juni 2013 05:43

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Hallo,

was meinst du mit "geeignet" und "komme nicht weiter". Ich benutze das normale Gallery-Modul mit zB dem Lightbox-Template, welches auch auf Smart- und Iphones funktioniert.

Ich habe mittels media queries im CSS die Anpassungen an die mobile Version vorgenommen. Die CMSMS Version ist      1.11.6. Hier ist die Seite: www.wennekamp-webdesign.de

Ist das schon die Mobilversion? Ich persönlich fände es recht anstrengend, wenn der Text in einem so engen Bereich fließt. Sowohl mobil als auch auf dem PC.

Beitrag geändert von antibart (05. Juni 2013 06:14)

Offline

#3 05. Juni 2013 07:58

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Ich bin ein großer Freund von Photoswipe.

Da es auf den halbtransparenten Schnickschnack ala Lighbox verzichtet läuft es auch schnell und ruckelfrei auf den kleinsten Smartphones. Mit Vollbilddarstellung, wischgestengesteuert, Zoom... lässt sich alles per Parameter im Aufruf steuern.
Ein mir wichiges Feature für kleine Bildschirme ist, dass man das Gerät drehen kann, und das Bild passt sich dabei mit an.

Hier im Einsatz

Ich hatte dazu mal ein HowTo geschrieben:
http://www.cmsmadesimple.de/forum/viewtopic.php?id=2826

Beitrag geändert von Klenkes (05. Juni 2013 07:58)

Offline

#4 05. Juni 2013 08:24

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Hallo antibart

ja, das ist die mobile Version. Mit "ich komme nicht weiter" meine ich:
- habe "superbox" angewendet http://www.wennekamp-webdesign.de/index … enzen-foto
Das hat auch prima funktioniert, bis ich CSS und Template geändert habe auf die mobile Version. Was da jetzt genau das Nicht-Funktionieren ausgelöst hat, wüsste ich auch gerne. Jetzt kann man zwar die kleinen Bilder sehen, aber beim Klick passiert nichts mehr (normalerweise wird das Bild dann groß angezeigt)

- Also dachte ich, es gibt sicher schon ein Modul bei CMSMS, das die Bilder auch auf Smartphone-Größe anpasst. Gallery-Modul ist installiert und hier testweise eingepflegt http://www.wennekamp-webdesign.de/index … ge=galerie . Aber da kann ich im Modul (wenn ich es unter "Inhalte" aufrufe), kein Template auswählen. Bzw. ich wähle eines aus, drücke speichern, dann speichert es eine neue Galerie ab, die aber auch nicht das gewählte Template beinhaltet. Frage mich, was ich da falsch gemacht habe. Showtime Slideshow läuft auch nicht mehr, nur Standbild. Habe ich da was zerschossen??

- Was meinst Du dem "engen Bereich"? Bei mir nimmt der Text fast den halben Bildschirm ein auf dem PC.

Danke für Eure Tipps.
Elke

PS: Danke Klenkes, schaue ich mir an! Habe es allerdings nicht als Modul von CMSMS gefunden

Offline

#5 05. Juni 2013 08:36

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Elke schrieb:

- Was meinst Du dem "engen Bereich"? Bei mir nimmt der Text fast den halben Bildschirm ein auf dem PC.

Ich sehe gerade, du hast klugerweise dynamische Maßeinheiten (%) benutzt, was im Prinzip natürlich flexibler und daher auch mobilfreundlich ist.

Allerdings ist der Abstand zw. Bild und Text so großzügig, dass es schnell recht eng wird - oder sogar umbricht (was dann aber schon wieder besser lesbar ist).

mini_elke.gif

Beitrag geändert von antibart (05. Juni 2013 08:37)

Offline

#6 05. Juni 2013 08:54

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Elke schrieb:

PS: Danke Klenkes, schaue ich mir an! Habe es allerdings nicht als Modul von CMSMS gefunden

Solche Sachen sind immer Galerietemplates und keine extra Module.

Es wäre unsinnig ein extra Photoswipemodul zu machen, wenn man eigentlich nur das Modul Gallery braucht und sich nur ein entsprechendes Template machen muss.

Ich beschreibe in meinem HowTo doch wie das Template aussieht.

Offline

#7 05. Juni 2013 09:04

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Hallo antibart

danke für den Screenshot. Da muss ich noch an den Abständen arbeiten. Generell an ein paar Feinheiten, auf dem Smartphone stimmen auch einige Abstände noch nicht. Aber erst mal die groben Dinge erledigen!

Danke auch Klenkes, dann schaue ich mir das in Ruhe an. Die lange Beschreibung hat mich als Nicht-Techie auf den ersten Blick abgeschreckt, muss ich mir Zeit für nehmen.

Melde mich!
Elke

Offline

#8 05. Juni 2013 09:06

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

PS: Hat jemand eine Idee, warum die Showtime Slideshow nicht mehr läuft? Die wollte ich weiterhin auf der Startseite benutzen.

Offline

#9 05. Juni 2013 11:18

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Aber erst mal die groben Dinge erledigen!

Da wären z.B. JS Fehler:

Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated. www.wennekamp-webdesign.de/:7
Uncaught TypeError: Object [object Object] has no method 'cycle' www.wennekamp-webdesign.de/:95
Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated. index.php:7
Uncaught TypeError: Object [object Object] has no method 'cycle' index.php:112
Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated. www.wennekamp-webdesign.de:7
Uncaught TypeError: Object [object Object] has no method 'cycle' www.wennekamp-webdesign.de:95
(anonymous function) www.wennekamp-webdesign.de:95
jQuery.extend.ready jquery-1.4.2.js:392
DOMContentLoaded jquery-1.4.2.js:745

Tatsächlich wir jquery 1.4.2 wie auch  1.9.1 geladen - das kann nicht gut gehen und schlagartig Probleme bereiten.

Bei eingebundenen Bildern leidet die Qualität auf dem Smartphone, die Bilder sind unscharf, da sie heruntergerechnet werden. Gibt es da eine bessere Lösung

Wenn man als CSS für width und height jeweils 100% verwendet in einem vorgespannten Rahmen sieht das in der Tat seltsam aus.

max-width:100%; height:auto;  probieren.

Solche Sache kann man übrigens leicht mit Browser entdecken - Stichwort Element untersuchen

Offline

#10 05. Juni 2013 12:11

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Noch als Nachsatz zu den groben Dingen

Empfehle http://achecker.ca/checker/index.php  oder ähnliche Werkzeuge zu nutzen.

Das Web aber auch diverse Referenzen haben massive Probleme beim Kontrast was dazu führt das solche Sites unangenehm zu lesen sind aber unter mobilen Betrieb u.U. überhaupt nicht mehr vom Text erkennbar sind.

Offline

#11 05. Juni 2013 13:21

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

czarnowski, tausend Dank! Ja, es war die eine Zeile JS im Template zuviel. Jetzt laufen die Galerien wieder.

Habe meine CSS durchsucht, aber nirgends height: 100% gefunden. Bleibt also noch das Problem der unscharfen Bilder. Wo finde ich diese Angaben mit der height?

Bezieht sich das auf meine Seite? Mein Text ist schwarz auf weiß, oder wird er anders dargestellt? "Das Web aber auch diverse Referenzen haben massive Probleme beim Kontrast was dazu führt das solche Sites unangenehm zu lesen sind aber unter mobilen Betrieb u.U. überhaupt nicht mehr vom Text erkennbar sind."

Vielen Dank schon mal, das war ein echter Fortschritt heute!

Offline

#12 05. Juni 2013 13:50

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

PS: Nun habe ich es doch im CSS gefunden und height: auto eingestellt. Die Qualität ist aber nicht besser, die Bilder sehen immer noch unscharf aus, z.B. bei Referenzen Web.

Und die eine Showtime Slideshow, die ich unter Referenzen Web eingestellt habe, ist noch viel zu breit. Auf meinem Smartphone läuft sie rechts aus dem content heraus.

Hier noch einen Tipp?

Offline

#13 05. Juni 2013 14:06

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Es gibt noch einen dicken Fehler der zu einem JS Fehler führt
Ist
<meta name="viewport" content="width=device-width; initial-scale=1.0">

Soll

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Die Image CSS scheint sich erledigt zu haben.
War gültig im Zusammenhang mit aside und einem darin enthaltenem img .

Offline

#14 05. Juni 2013 14:12

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Wenn man einen Screenshot eines Schirms verkleinert dann ist klar das z.B. Schriften  oder Linien analog verlieren werden wenn es verkleinert wird.

Damit es schärfer wirkt sollte man einen Shot über einen möglichst dicken Schirm ausführen (2500 er Klasse), damit in der Verkleinerung mehr Pixel übrig bleiben und Details erhalten bleiben.

Und man sollte für die Verkleinerung die höchst mögliche Qualität beim verwendeten Programm wählen.

Offline

#15 05. Juni 2013 14:18

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Danke! Habe ich geändert! Noch eine Idee warum die Showtime Slideshow bei den Web Referenzen zu groß ist bzw. wie ich das ändern kann? Hatte es schon mit einem div-Tag drumherum probiert, den ich auf width 100% und height auto gestellt habe, aber hat nichts genützt.

Offline

#16 05. Juni 2013 14:20

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

weils hier ständig so gefragt ist, hier mal mein expertentipp ;-)
photoswipe runterladen. Archiv entsprechend euren vorlieben entpacken. Ich mach das gerne im uploadsverzeichnis von CMSms.
Zusätzlich sollte noch jQuery geladen werden. Ich gehe davon aus dass das sowieso vorhanden ist. Darauf basiert dann folgendes Script, das im <head> eingefügt wird:

{assign var="ps_path" value="uploads/js/photoswipe"}
<base href="{root_url}" /> 
<script type="text/javascript">{literal}	
	var hasTouch = ("ontouchstart" in window);
	if (hasTouch && document.querySelectorAll) {	
	    document.write('<link href="{/literal}{$ps_path}{literal}/photoswipe.css" rel="stylesheet" type="text/css" />');
	    document.write('<script src="{/literal}{$ps_path}{literal}/lib/klass.min.js">\x3C/script>');
	    document.write('<script src="{/literal}{$ps_path}{literal}/code.photoswipe.jquery-3.0.5.min.js">\x3C/script>');
	    document.write('<script>');
	    document.write('(function(window, $, PhotoSwipe){');
	    document.write('jQuery(document).ready(function(){');
	    document.write('var options = { minUserZoom:1 };');
	    document.write('jQuery("a[class*=lightbox]").unbind("click").photoSwipe(options);');
	    document.write('});');
	    document.write('}(window, window.jQuery, window.Code.PhotoSwipe));');
	    document.write('\x3C/script>')
	}
{/literal}</script>

was passiert hier?
1. Zeile: hier gebt ihr den Pfad zum photowipe Ordner an. Meiner liegt bei diesem Beispiel in "uploads/js/photoswipe"
2. Zeile: <base> ist eigentlich nur wichtig wenn man mit mod_rewrite arbeitet und eine Tiefe in der url hierarchie entsteht und wir einen relativen Pfad zu den Scripten verwenden. Schaden kann es auf jeden fall nicht ;-)
4-5. Zeile: es wird seitens Javascript nach nem touchevent abgefragt. Das ganze Script checkt also ob der Browser das "touchen" zulässt. idR trifft das also auf alle Tablets und Smartphones zu (und ein paar wenige Desktoprechner)
Und dann erst werden die ganzen notwendigen Scriptdateien geschrieben/geladen. Ich verwende hier als Selektor für die Bilder die Klasse "lightbox". Eure Links müssen also in etwa so aussehen:
<a href="bild.jpg" class="lightbox"><img src="thumbnail_bild.jpg" alt=""/></a>
Das gute an dem Script ist, dass man vorher auch Fancybox oder sonst was initialisieren kann. Mein Script ignoriert das (durch "unbind") und setzt photoswipe dann ran. So hat man also ne recht elegante Lösung zum regulären Lightboxscript.
Das ist so ziemlich das einfachste und beste Mittel was ich für Touchgeräte verwende da es sich sehr natürlich "anfühlt".

ps: WENN kein jQuery vorhanden ist, vor dem ganzen Code noch mind. folgendes einfügen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

Es ist sicherlich hier und da optimierungswürdig aber es geht letzendlich nur um den Wink in eine Richtung. Werde hierzu keinen weiteren Support geben. Einfach testen und glücklich sein…

Beitrag geändert von nicmare (05. Juni 2013 14:21)

Offline

#17 05. Juni 2013 14:21

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Zu den Kontrasten da gibt es ja Online Tools in einer reichlichen Auswahl

z.B.

http://www.checkmycolours.com/

testen nach WCAG

Offline

#18 05. Juni 2013 14:49

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Ich bin ein grundsätzlicher Gegner von normalen Slidern im mobilen Bereich.
Die haben allesamt den Nachteil das die Images beim Start alle geladen werden.
Das bedeutet reichlich Last für die mobilen und reichlich Zeit - da reden wir über einige Sekunden - bis der Slider werkelt.

Geeignet sind nur Slider die mittels lazy load Technik arbeiten.

Davon profitieren auch normale Nutzer.

Wer normale Slider einsetzt kann nur verlieren und nie gewinnen.

Offline

#19 05. Juni 2013 16:51

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

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Es wird hier massiv html5 mit HTML 1.0 Transitional gemixt - das ist natürlich nicht zulässig.

Im Grunde ist es eine HTML5  und so würde ich es mal deklarieren.

Offline

#20 06. Juni 2013 07:03

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Elke schrieb:

Zweites Problem: Bei eingebundenen Bildern leidet die Qualität auf dem Smartphone, die Bilder sind unscharf, da sie heruntergerechnet werden. Gibt es da eine bessere Lösung?

Schon mal dies probiert?

http://adaptive-images.com/

Offline

#21 06. Juni 2013 09:29

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Vielen Dank für all die Tipps, muss ich jetzt erstmal durcharbeiten und melde mich dann!

Offline

#22 12. Juni 2013 11:24

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Hallo Klenkes

wollte die photoswipe-Galerie anlegen und bin Deinem HowTo gefolgt. Habe icons.png in meinen image-folder geladen.
Habe in den Ordner js/photoswipe geladen (diese Dateien habe ich photoswipe.com heruntergeladen):
code.photoswipe-3.0.5.min.js              
code.photoswipe.jquery-3.0.5.min.js              
klass.min.js

Habe gemäß Deinem Howto ein neues Galerie-Template (im Modul "Galerie") angelegt. Wenn ich jetzt ein Bild hochladen möchte, kommt die Fehlermeldung:

ERROR:invalid uploaddirectory

Wo habe ich denn das uploaddirectory definiert bzw. wie kann ich das jetzt richtig machen?

Freue mich über jeden Tipp, irgendwas habe ich falsch gemacht.


Hier zur Vollständigkeit die Daten des Gallery-Templates photoswipe:

---------------------------------------
Template Quelle

<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="120" 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 -->
-----------------------------------------------------------------
Stylesheet Template

/* +++++++++++++++++++++++++++++++++++
   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;}
-------------------------------------------
Javascript Template
(hier habe ich weg gelassen
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
weil ich durch die Showtime slideshow ja schon JS habe)

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

Offline

#23 12. Juni 2013 11:49

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

PS: Habe das Modul "Galerie" deinstalliert und neu installiert, jetzt kann ich wieder Bilder hochladen. Aber die Galerie funktioniert nicht

http://www.wennekamp-webdesign.de/index … ge=galerie

Habe schon die Pfade zum js geändert, suche mal weiter...

Offline

#24 12. Juni 2013 12:46

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

Jetzt funktioniert die Galerie, Pfade zum JS waren falsch, hier richtig (für meine Seite)

<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="uploads/js/photoswipe/klass.min.js"></script>

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

Jetzt fehlen nur noch die Icons, wahrscheinlich auch falsche Pfade...

Offline

#25 12. Juni 2013 13:09

Elke
hat von CMS/ms gehört
Registriert: 04. Juni 2013
Beiträge: 17

Re: [GELÖST] Gibt es ein Galerie-Modul das mobiltauglich ist?

die Icons werden nicht angezeigt. Habe jetzt alle möglichen Pfade ausprobiert:

background-image: url([[root_url]]/uploads/images/photoswipe/icons.png);
background-image: url(uploads/images/photoswipe/icons.png);
background-image: url(../../uploads/images/photoswipe/icons.png);

nichts geht!

Offline