Ergebnis 1 bis 25 von 25

Thema: Photoswipe - Tolle Bildergalerie für Mobile Webseiten in Contao nutzen

  1. #1
    Contao-Fan Avatar von dirksche
    Registriert seit
    05.08.2009.
    Ort
    Grosslittgen
    Beiträge
    647

    Standard Photoswipe - Tolle Bildergalerie für Mobile Webseiten in Contao nutzen

    Hallo liebe Contao Nutzer,

    heute möchte ich euch kurz beschreiben, wie Ihr die Photoswipe Galerie erfolgreich in Contao nutzen könnt.
    Für alle die Photoswipe noch nicht kennen:
    Photoswipe ist eine moderne JavaScript-Bildergalerie, die besonders für mobile Geräte mit Touchscreens optimiert ist. Denn auf Touchscreen-Geräten wie Tablet PCs und Smartphones können die Bilder mit dem beliebten Swipe-Effekt nacheinander »weitergeblättert« werden.
    Downloaden könnt Ihr das ganze hier: http://www.photoswipe.com

    Als erstes müssen folgende Javascript Dateien im Header eurer Seite eingebunden werden. Die Dateien befinden sich in dem Photoswipe Downloadordner:
    Code:
    <script type="text/javascript" src="deinPfad/js/klass.min.js"></script>
    <script type="text/javascript" src="deinPfad/js/code.photoswipe-3.0.4.min.js">"></script>
    und unter "Eigener Javasript Code"
    Code:
    <script type="text/javascript">
    
    		(function(window, PhotoSwipe){
    		
    			document.addEventListener('DOMContentLoaded', function(){
    			
    				var
    					options = {},
    					instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
    			
    			}, false);
    			
    			
    		}(window, window.Code.PhotoSwipe));
    		
    </script>
    Die CSS Datei "photoswipe.css" habe ich direkt im CSS Editor von Contao importiert. Hier müssen nur noch die Pfade zu den Icons angepasst werden.
    Ausserdem könnt Ihr noch folgende Styles eintragen:
    Code:
    .gallery
    {
        margin:0;
        padding:0;
        list-style: none;
    }
    
    .gallery:after
    {
        height:0;
        clear:both;
        display:block;
        content: ".";
        visibility: hidden;
    }
    
    .gallery li
    {
        width:49%;
        float:left;
    }
    
    .gallery li a
    {
        display:block;
        margin:5px;
        border:1px solid #3c3c3c;
    }
    
    .gallery li img
    {
        width:100%;
        height:auto;
        display:block;
    }
    Jetzt muss nur noch ein neues Galerie Template angelegt werden. Erstellt unter Contao ein neues gallery_default Template und nutzt folgenden Code.
    Code:
    <div class="fluidgallery block">
     
    <ul id="Gallery" class="gallery">
    <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
    <?php $gallery_item_nr=$gallery_item_nr+1;
    if ($gallery_item_nr % 2 != 0) {
    $even_or_odd = odd;
    } else {
    $even_or_odd = even;
    }
    $class_item = "item$gallery_item_nr $even_or_odd";
    ?>
     
     
    <?php if ($col->addImage): ?>
    <li class="<?php echo $class_item; ?>">
    <div class="image_container">
    <?php if ($col->href): ?>
    <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
    <?php else: ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
    <?php endif; ?>
    </div>
    
    <?php if ($col->caption): ?><div class="caption"><?php echo $col->caption; ?></div>
    <?php endif; ?>
    </li>
    <?php endif; ?>
    <?php endforeach; ?>
    <?php endforeach; ?>
    </ul>
     
    </div>
    Jetzt könnt Ihr ganz einfach als Elementtyp die Galerie von Contao nutzen, als Galerietemplate das angepasste Template auswählen und FERTIG :-)

    Viel Spaß!


    Euer Dirk

  2. #2
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.293
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo dirksche,
    vielen Dank für die Anleitung!
    Magst du die vllt noch ins Wiki ( http://de.contaowiki.org ) bringen? Da geht die nicht so schnell unter wie hier ;-)

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  3. #3
    Contao-Fan Avatar von toto
    Registriert seit
    09.02.2010.
    Ort
    Bad Oeynhausen
    Beiträge
    386

    Standard

    Servus und danke für das tolle Tutorial.

    Wenn ich allerdings Mediabox im Template aktiviert habe, dann geht das Bild erst damit auf und springt dann um auf Photoswipe. Wenn ich das Bild zumache dann bleibt noch das Bild in der Box offen. Kann man das irgendwie umgehen? Ich möchte allerdings die Mediabox nicht abschalten...

    Gruß toto

  4. #4
    Contao-Fan Avatar von dirksche
    Registriert seit
    05.08.2009.
    Ort
    Grosslittgen
    Beiträge
    647

    Standard

    hmm... gute Frage. Ich selber habe die Mediabox auf der mobilen Seite nicht im Einsatz.
    Was passiert, wenn Du folgenden rot markierten Befehl aus dem Template entfernst?
    Code:
    <?php if ($col->addImage): ?>
    <li class="<?php echo $class_item; ?>">
    <div class="image_container">
    <?php if ($col->href): ?>
    <a href="<?php echo $col->href; ?>"<?php echo $col->attributes; ?> title="<?php echo $col->alt; ?>"><img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" /></a>
    <?php else: ?>
    <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> alt="<?php echo $col->alt; ?>" />
    <?php endif; ?>
    </div>

  5. #5
    Contao-Fan Avatar von toto
    Registriert seit
    09.02.2010.
    Ort
    Bad Oeynhausen
    Beiträge
    386

    Standard

    Fett!

    Läuft einwandfrei....

  6. #6
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    Hallo,

    ich habe Contao 2.11.6 am Start und wollte mal PhotoSwipe testen...

    Wenn ich Deinen Quelltext in ein Template ce_gallery einfüge, kommt eine fehlermeldung für das erste foreach... ich habe mir mal die Templatevariablen ausgeben lassen => hier gibt es kein $this->body

    ???

    gruss zonky

  7. #7
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    upps ich hatte das falsche Template... funzt nun!


    Aber! auf dem iPhone/iPod ist die Zeile für die Bildbeschreibung und die "Navigation" winzig klein - etwa nur die Hälfte als im Original. Ich habe keine Idee woran das liegen könnte - CSS habe ich sowweit geprüft.

    Auf dem iTab siehts gut aus.

    Gruss zonky

  8. #8
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    es liegt am initial-scale :-(

    * setze ich diesen auf 1.0 ist der Zoom zu groß aber ich sehe die Toolbar gut oder
    * ich lasse diesen auf "default" und sehe die komplette Webseite (980px) und dann ist aber die Toolbar viel zu klein


    heul...

    zonky

  9. #9
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    Moin, ich glaube ich brauche noch etwas Unterstützung. Bie mir funktioniert es irgendwie nicht.

    Ich habe die beiden JS-Dateien im Head - Pfade stimmen.

    Den eigenen JS-Code habe ich auch im Layout drin.

    Mein Template heißt erst einmal gallery_test.html5 und den Inhalt habe ich mit dem hier geposteten ausgetauscht.

    Aber dann... die Buttons werden nicht gefunden, liegen erst mal im selben Ordner, wie die CSS.Datei.

    Aber vor allem swiped da nichts.

    Was mache ich falsch?

    Link zum Übel: http://www.dackelalarm.de/sonntagssp...mmer-2012.html

    Ich hoffe, Ihr könnt mir auf die Sprünge helfen.

    Edit: ... und so sollte es vor dem Swipen angezeigt werden: http://www.dackelalarm.de/zoobesuch-berlin-2007.html

    Version: 2.11.6
    Geändert von dackelchen (29.10.2012 um 16:14 Uhr)
    Grüße Edgar
    Dackelalarm

  10. #10
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.782
    Partner-ID
    634

    Standard

    Headeranweisung überprüfen:
    Code:
    <script type="text/javascript" src="tl_files/teckel/js/lib/klass.min.js"></script>
    ist kein Javascript. Hier hast Du ein HTML-Snippet abgespeichert....

  11. #11
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    Danke, das kommt davon, wenn man beim Kopieren den Kopf ausschaltet. Funktioniert jetzt,, Um die Optik kümmere ich mich dann morgen
    Grüße Edgar
    Dackelalarm

  12. #12
    Contao-Nutzer
    Registriert seit
    08.09.2012.
    Ort
    Augsburg
    Beiträge
    22

    Standard

    Hallo,

    hm, also erst mal vielen Dank für die Anleitung und die Codeschnippsel! Wirklich eine tolle Option.

    Bei mir will das aber leider nicht funktieren. Irgendwo muss ich was falsch machen. Habe Contao 2.11.6 und alles so gemacht wie beschrieben.
    Das Galerie-Template-Duplikat habe ich komplett mit dem kompletten geposteten Code überschrieben
    und danach dieses neue Template beim Inhaltselement Galerie angewählt. Die Verweise auf die
    JavaScript-Dateien stimmen und auch auf die css-Datei - sie werden im Header angezeigt und ein
    Klick auf die Verknüpfung (Seitenquelltext Browser) öffnet sie.

    Wenn ich nun eine Galerie ohne die Option, dass sich auf Klick ein neues Bild im neuen Fenster öffnet, erstelle, dann ist nichts anklickbar. Es werden nur die Bilder auf der Seite dargestellt.
    Wenn ich eine Galerie mit Anklickoption mache, dann öffnet sich nur das JPG im neuen Browserfenster, kann aber nicht geswiped werden und es sind auch keine Buttons zu sehen.

    Sieht ein bisschen danach aus, dass es evtl. doch an den JavaScripts liegen könnte. Ich habe die aus dem Photoswipe-DL-Paket genommen und sogar extra noch geschaut, dass ich 3.0.4 bekomme.
    Die Verweise müssen doch stimmen, wenn sie im Header angezeigt werden und sich auf Klick öffnen?
    Was ist an der von Dackelchen geposteten JS-Anweisung falsch? Ist klass.min.js kein JavaScript? Vielleicht mache ich denselben Fehler.
    Muss ich noch irgendwo was im Galerie-Element etwas Besonderes einstellen, 'ne Klasse setzen oder etwas umbenennen (bis auf die Grafiken im CSS?)

    Vielen Dank für die Hilfe und schonmal 'sorry' für den Fall, dass ich mich irgendwo blöd angestellt haben sollte.

  13. #13
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Uncle_Cake Beitrag anzeigen
    Was ist an der von Dackelchen geposteten JS-Anweisung falsch? Ist klass.min.js kein JavaScript? Vielleicht mache ich denselben Fehler.
    Ich hatte einfach geschludert. und beim copy paste den falschen Inhalt in der korrekt benannten Datei. Nachdem Stefan das bemerkt hatte, lief alles rund. Ich habe es dann aber doch nicht benutzt, da ich eh auf C3 umstellen wollte und da "schwipst es ja dann sowiso.

    Hat Du einen Link zum Problem?
    Grüße Edgar
    Dackelalarm

  14. #14
    Contao-Nutzer
    Registriert seit
    08.09.2012.
    Ort
    Augsburg
    Beiträge
    22

    Standard

    Danke für die schnelle Antwort! Leider habe ich momentan alles lokal. Site ist erst in der Aufbauphase und läuft im Moment nur auf einem lokalen Xampp-Server.

    Was mich an der ganzen Sache so wundert ist, dass die Scripts so überhaupt keine Wirkung zeigen ...

  15. #15
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    no link - no help ;-)

  16. #16
    Contao-Nutzer
    Registriert seit
    08.09.2012.
    Ort
    Augsburg
    Beiträge
    22

    Standard

    Hast Recht, werde mal zusehen, dass ich was online stelle und melde mich dann wieder ...

  17. #17
    Contao-Nutzer
    Registriert seit
    08.09.2012.
    Ort
    Augsburg
    Beiträge
    22

    Standard

    So, ich habe jetzt mal eine Testversion hochgeladen.

    Galerie befindet sich auf dieser Seite:

    Link zur Testseite Galerie

    Nachdem sich die Website noch im Aufbau befindet, liegt sie im PW-geschützten Bereich.

    Gast-Login: User: Gast, PW:123456

    Wie gesagt, beim Klick auf ein Vorschaubild öffnet sich nur eine JPEG-Datei. Es lässt sich nicht Swipen oder Navigieren.


    Danke für die Hilfe!

  18. #18
    Contao-Nutzer
    Registriert seit
    08.09.2012.
    Ort
    Augsburg
    Beiträge
    22

    Standard

    Mein Gott, ich bin so ein Pfosten. Der Grund dafür, dass es nicht funktioniert hatte war,
    dass ich nicht die "code.photoswipe-3.0.4.min.js" verwendet hatte, sondern die
    "code.photoswipe.jquery-3.0.4.min.js". Und für diese einfache Erkenntnis habe
    ich heute Nachmittag endlose Versuchsketten durchführen müssen. Bäume -> -> Wald

    Sorry.

    Edit: Demozugang fürs Erste wieder deaktiviert. Seite wird Anfang Dezember online gehen.
    Geändert von Uncle_Cake (20.11.2012 um 17:41 Uhr)

  19. #19
    Contao-Nutzer Avatar von maipe
    Registriert seit
    10.07.2012.
    Ort
    München
    Beiträge
    201

    Lächelndes Gesicht

    Moinsen! Hat das denn jetzt letztendlich hingehauen? Die Demo auf photoswipe schaut echt gut aus - nur bei mir schauts natürlich anders aus - hab alles so gemacht wie in den vorherigen posts geraten wurde, außer das ich das JS und die Einbindung der CSS im fe_page verankert haben. Die vorgeschlagenen Selektoren .gallery habe ich photoswipe.css an die Spitze gesetzt (ohne Verständnis für den Sinn der Sache). Jetzt swipets super - nur ohne Design & Icons. Aufn Iphone erscheint lediglich das Bild als overlay, Hintergrund bleibt sichtbar. Die main.css vom theme greift da durch und setzt Aufzählungszeichen neben die Bilder usw. Arbeite mit deaktiviertem Contao-Framework (Theme Vision) und Version 2.11.6.

    http://final.marnbacher-theater.de/id-2010-heute.html


    ich persönlich halte photoswipe in Kombination mit der Modifikation*, die anstatt des Swipes automatisch die Lightbox auf nicht touchfähigen Geräten einsetzen soll, für die einzige sinnvolle Lösung.
    Bitte korrigiert mich, wenn ich falsch liege. Hat jemand von euch vielleicht einen Link, wo Photoswipe mit Contao optimal funktioniert?
    @Dackelchen - für C3 gibts da schon einen Link, wo mann das schwipsen testen kann? Auf Deiner Dackelseite habe ich nichts gefunden - da kommt nur die normale mediabox.

    Besten Dank für eine Antwort!

    *
    HTML-Code:
    $(document).ready(function(){
    if (isEventSupported('touchstart') == true) {
    $("#Gallery a").photoSwipe();
    } else {
    $("#Gallery a").meineLightbox();
    }
    });
    
    var isEventSupported = (function(){
    var TAGNAMES = {
    'select':'input','change':'input',
    'submit':'form','reset':'form',
    'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
    }
    return isEventSupported;
    })();

    Zitat Zitat von dackelchen Beitrag anzeigen
    Moin, ich glaube ich brauche noch etwas Unterstützung. Bie mir funktioniert es irgendwie nicht.

    Ich habe die beiden JS-Dateien im Head - Pfade stimmen.

    Den eigenen JS-Code habe ich auch im Layout drin.

    Mein Template heißt erst einmal gallery_test.html5 und den Inhalt habe ich mit dem hier geposteten ausgetauscht.

    Aber dann... die Buttons werden nicht gefunden, liegen erst mal im selben Ordner, wie die CSS.Datei.

    Aber vor allem swiped da nichts.

    Was mache ich falsch?

    Link zum Übel: http://www.dackelalarm.de/sonntagssp...mmer-2012.html

    Ich hoffe, Ihr könnt mir auf die Sprünge helfen.

    Edit: ... und so sollte es vor dem Swipen angezeigt werden: http://www.dackelalarm.de/zoobesuch-berlin-2007.html

    Version: 2.11.6
    Geändert von maipe (29.12.2012 um 23:06 Uhr)

  20. #20
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    Das Swipen funktioniert erst ab Contao 3. Mein Blog ist aber im Moment noch Version 2. Ich wurschtele gerade ziemlich intensiv an anderen Seiten und komme wohl erst mal nicht dazu, da upzugraden, will aber eigentlich eh auf die 3.1 warten.

    Eine Demo findest Du z. B. auf der Seite von peter müller. websites-erstellen-mit-contao.de. Die Beispielsite (links oben verlinkt) mit dem Smartphone aufrufen, da zu Texte und Bilder navigieren. die Galerie öffnen. Da kannst Du dann das Swipen testen.

    Die Darstellung wäre noch ausbaufähig, aber es handelt sich schließlich um die Zielgruppe Ein- und Umsteiger. die ja auch nicht überfordert werden soll. Ich habe ddas gerade eben per Smartphone getestet... swipen geht ohne Probleme.

    Dir (und allen anderen hier) einen guten Rutsch
    Grüße Edgar
    Dackelalarm

  21. #21
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    @maipe: Link als Beispiel http://www.kleimdesign.de

    Seite "Foto" mal per Desktop und mal per iPhone testen...

  22. #22
    Contao-Nutzer Avatar von maipe
    Registriert seit
    10.07.2012.
    Ort
    München
    Beiträge
    201

    Standard Genau so

    @zonky

    Klasse. Ja genau so stell ich mir das auch vor. Und wie hast Du das gelöst? Mit der wenn touch dann photoswipe funktion siehe oben - oder eleganter?

    Auch allen einen guten Rutsch - und viele gute Erweiterungen und ein bugfreies neues Jahr!

    @edgar - gerade mit dem Iphone getestet - kein Swipe nur mediabox auf dem Link.
    Geändert von maipe (30.12.2012 um 16:56 Uhr)

  23. #23
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    "Elegant" ist relative... ;-)

    Ich habe eine Template-Umschaltung per MobileSwitch - was im Prinzip auf das Gleiche hinaus läuft....


    Gruss zonky

  24. #24
    Contao-Fan Avatar von qba
    Registriert seit
    23.07.2010.
    Ort
    Berlin Mariendorf
    Beiträge
    574

    Standard

    Suuuuuuper. Ich bin schwer begeistert. Das funzt wunderbar.

    Vielen vielen Dank
    Gruß qba|uwe

  25. #25
    Alter Contao-Hase Avatar von Messa
    Registriert seit
    19.01.2011.
    Ort
    Vorarlberg, Österreich
    Beiträge
    1.423

    Standard

    Hallo.

    Danke für den Tipp.
    Oben haben sich aber 1 Fehler eingeschlichen.

    1.
    Code:
    <script type="text/javascript" src="deinPfad/js/code.photoswipe-3.0.4.min.js">"></script>
    Hier ist das zuviel ">.

    Bei Gallery "Großansicht/Neues Fenster" auswählen, damit das Große Bild im Slider angezigt werden.

    lg Matthias
    Geändert von Messa (14.03.2013 um 12:59 Uhr)
    Full Service Agentur - Grafikdesign, Screendesign, Webdesign, Webentwicklung, SEO, Weiterbildung, persönliches Coaching
    http://www.matthiasgmeiner.com

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •