Willkommen, Gast ( Anmelden | Registrierung )     [ Hilfe | Mitglieder | Suche ]

 
Reply to this topicStart new topic
> Bootstrap-Galerie, Eine ganz spezielle Galerie für Bastler
Tiggr
Beitrag Tue. 10. June 2014, 23:19
Beitrag #1


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 386
Mitglied seit: 12.07.2006
Mitglieds-Nr.: 136



Hiho!

Ich hab ja schon mal gesagt, ich hab mir eine etwas andere Galerie gebastelt. Hier mal ein paar Worte dazu.

Das ganze Ding setzt voraus, dass Bootstrap verwendet wird. Sonst klappt garnichts. Dazu kommt dann von da http://www.iekadou.com/ zwei JQuery-Plugins. Und zwar jquery-justifygallery, das die Thumbnails anordnet und formatiert, und eine gehackte Version von bootstrap-gallery. Diese habe ich so gehackt, dass sie auch Bildunterschriften und Beschreibungen darstellen kann.

Um die Größe der Bildunterschrift zu bestimmen, brauche ich dann noch jquery.actual.js von da: http://dreamerslab.com/blog/en/get-hidden-...ht-with-jquery/.

Das Modul selbst erklärt sich fast von alleine. Viel kann man nicht einstellen. Es werden einfach 2 Verzeichnisse gewählt, eines für die Thumbnails (ich erstelle die von Hand um mehr Einfluss auf die Thumbs zu haben). Thumbnails und Bilder müssen identische Dateinamen haben!

Um es zu nutzen, müssen aber die 3 oben genannten Scripte geladen werden! Und natürlich auch ausgeführt...

QUELLTEXT
<script type="text/javascript" src="/includes/js/jquery.actual.min.js"></script>
<script type="text/javascript" src="/includes/js/jquery.justifyGallery.min.js"></script>
<script type="text/javascript" src="/includes/js/bootstrap-gallery.min.js"></script>
<script>  
    $( document ).ready(function() {
        $('.gallery').justifyGallery({});
        $('.gallery').bootstrapGallery({});
    });
</script>


Title und Beschreibung der Bilder holt sich das System aus dem Titel und der Beschreibung im Dateimanager.

Ich häng auch mal 2 Screenshots an, wie das bei mir aussieht!

Macht damit, was ihr wollt, für mich scheint es zu funktionieren. Aber ist noch nicht viel getestet! Bin gerade erst fertig geworden! Und ein paar Dinge sind so, wie sind, weil ich es nicht besser hin bekommen habe!

Wozu ich mir noch was einfallen lassen muss, sind mehrsprachige Galerien!

Tschüss
Tiggr (aka Marcus)
Angehängte Datei(en)
Angehängte Datei  Basisgallerie.cmsmod ( 4.16KB ) Anzahl der Downloads: 3
Angehängte Datei  bootstrap_gallery_hacked.zip ( 3.8KB ) Anzahl der Downloads: 3
Angehängte Datei  Bildschirmfoto_vom_2014_06_11_00_16_40.png ( 752.33KB ) Anzahl der Downloads: 33
Angehängte Datei  Bildschirmfoto_vom_2014_06_11_00_16_54.png ( 845.43KB ) Anzahl der Downloads: 26
 


--------------------
@bout Kites: Colorful Sky - Typo3
@bout LARP: Orga ohne Namen - Sefrengo
@bout LARP: LARP-Welt - CakePHP
@bout Kites: Rodgauer Workshop - Contao
Go to the top of the page
 
+Quote Post
webmasterFF
Beitrag Wed. 11. June 2014, 09:48
Beitrag #2


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 287
Mitglied seit: 14.05.2009
Mitglieds-Nr.: 1.885



Weltklasse !!!

Werde das Ding gleich mal testen....


EDIT:
Stell doch bitte noch die Scripte dazu in deinen ZIP... . Sonst wird das ganze recht unübersichtlich.

Ich habe es nämlich eben mal getestet und kann leider keinerlei Funktion feststellen. Scheinbar vergesse ich da was sad.gif


--------------------
Es dankt und grüßt
webmaster FF

--------------------
Sefrengo v.1.6.0
ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !!
Go to the top of the page
 
+Quote Post
Tiggr
Beitrag Wed. 11. June 2014, 11:49
Beitrag #3


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 386
Mitglied seit: 12.07.2006
Mitglieds-Nr.: 136



Hiho!

Ich schreib heute abend mehr dazu, wenn ich nicht mehr auf Arbeit bin...

Tschüss
Tiggr (aka Marcus)


--------------------
@bout Kites: Colorful Sky - Typo3
@bout LARP: Orga ohne Namen - Sefrengo
@bout LARP: LARP-Welt - CakePHP
@bout Kites: Rodgauer Workshop - Contao
Go to the top of the page
 
+Quote Post
Tiggr
Beitrag Wed. 11. June 2014, 19:43
Beitrag #4


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 386
Mitglied seit: 12.07.2006
Mitglieds-Nr.: 136



Hiho!

So, nun bin ich daheim, und hab mal meine virtuelle Maschine auf dem Notebook angeworfen. Was muss man tun, damit die Erweiterung läuft... viel! ;-) Ist eine ganz speziell auf meine Anforderungen zugeschnittene Bastellösung. Und ich mach vieles anders. Das ist der Hauptgrund, das ich wieder bei Sefrengo gelandet bin: Man kann Dinge so tun, wie man es will!

Scripte will ich hier nur dann anhängen, wenn ich sie von mir sind oder verändert wurden. Ich hab mir die Lizenzen nicht durchgelesen, und weiß nicht, wie ich sie verbreiten darf. Außerdem find ich einen Link zur Seite des Entwicklers fairer.

1.) Eine Webseite mit Bootstrap (http://getbootstrap.com/) entwickeln. Es macht IMHO keinen Sinn, das Framework nur für Galerie zu verwenden. Ich mag das Einbilden von CSS und JS über Sefrengo nicht so sehr, auch weil ich dann mit der Position der Tags im Header eingeschränkt bin. Deswegen sieht mein Header im Layout wie folgt aus:

QUELLTEXT
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/includes/css/bootstrap.min.css">

        <link rel="stylesheet" type="text/css" href="/includes/css/styles.css">
        <link rel="stylesheet" type="text/css" href="/includes/css/bootstrap-gallery.css">

    <title>[CS] <CMSPHP>print($con_side[$idcatside]['name']);</CMSPHP></title>
    <cms:lay type="head"/>
</head>


Gut zu sehen, dass da die CSS von Bootstrap geladen wird, und die stylte.css mit den eigenen Anpassungen. Den Rest erkläre ich gleich!

Des weiteren verwendet Bootstraßp JQuery und eigenes JS, das binde ich im Layout vor dem schließenden Bodytag ein:

QUELLTEXT
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="/includes/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/includes/js/jquery.actual.min.js"></script>
    <script type="text/javascript" src="/includes/js/jquery.justifyGallery.min.js"></script>
    <script type="text/javascript" src="/includes/js/bootstrap-gallery.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('.gallery').justifyGallery({});
            $('.gallery').bootstrapGallery({});
        });
    </script>
</body>


Den Rest erkläre ich auch gleich. Wichtig hier: JQuery und Bootstap-JS wird geladen! Das sind die ersten beiden Zeilen.

2.) Als nächstes verwende ich dann jquery.justifyGallery.min.js von http://www.iekadou.com/programming/jquery-justifygallery/. Das lade ich auch im Bereich am Ende der Seite. Und dann rufe ich die entsprechende Funtion auf, denn die DOM fertig aufgebaut ist. Das Script nimmt die Bilder aus dem Modul und ordnet sie neu an, damit sie den Bereich schön kacheln.

3.) Jetzt kommt eigentlich die das Script jquery.justifyGallery.min.js, aber das habe ich verändert (Download oben). Ich hatte da ein Problem: Ich hab ja eine div zugefügt, für Bildunterschrift und Beschreibungstext. Deren Größe musste ich berücksichtigen. .outerHeight(true) von JQuery gibt die Höhe aber nur korrekt zurück, wenn das Element schon angezeigt wird. Ich hab natürlich versucht die Größe zu bestimmen, bevor die div angezeigt wurde. *grummel* Etwas googeln hat dann eine Lösung gebracht. Das Plugin jquery.actual.min.js von http://dreamerslab.com/blog/en/get-hidden-...ht-with-jquery/. Damit kann ich die Höhe der Box auch bestimmen, wenn sie noch nicht angezeigt wird. Das Plugin wird auch am Fuß der Seite geladen. Nach JQuery und vor dem Galeriescript. Dazu kommt dann noch die unveränderte CSS vom Galeriescript, die ich wieder im Header lade.

4.) Dann lade ich endlich das JS für die Galerie! Und im Code wird auch die Galerie initialsiert. Alles am Ende der Seite!

Das wäre es schon fast. In meinem CSS hab ich dann noch ein paar Definitionen drin, für die Bildunterschriften.

QUELLTEXT
#gallery-modal .captionblock {
    background-color: rgba(220,220,200,0.8);
    margin: 0.5em 0;
    padding: 0.5em;
}

.captionblock h1 {
    font-size: 1.2em;
}


5.) Das wär's fast. Jetzt noch in den Moduleinstellungen die richtigen Verzeichnisse auswählen:



Wenn alles geklappt hat, dann sollte man jetzt im Frontend eine Galerie haben! :-)

Ist aber ein langer Weg und viel Bastelei! Da kann viel schief gehen! Mich hat es einen Abend gekostet, bis alles zusammen so funktioniert hat, wie ich es wollte! :-( Aber ich kann auch kein JS!

Das ganze ist also weder ein fertiges Modul, noch eine Lösung, die jedem passt! Wie gesagt, Sinn hat das ganze nur auf Bootstrap-Seiten! Deswegen auch hier im Alpha-Bereich. Ich werde da auch nicht mehr viel dran machen. Es tut, was ich will!

Ich finde, das ganze ist trotzdem ein gutes Beispiel, wie einfach man mit Sefrengo sehr individuelle Lösungen bauen kann. Bei Contao oder Typo3 hätte ich das nicht so leicht hinbekommen! Dafür können die beiden Systeme halt anderes perfekt!

Ich hoffe, ich habe damit eine Vorstellung vermittelt, was ich hier gebastelt habe, und das es eine umheimliche Bastellösung ist, die kaum jemanden außer mir passen wird.

Modul "Basisgallerie"

Das Modul "Basisgallerie" kann aber sicher auch anderswo verwendet werden.

Es nimmt den Inhalt von 2 Verzeichnissen mit Bildern, und gibt den wie folgt aus:

QUELLTEXT
<div class="gallery">  
   <a href="/media/img/gallery/cervia14/DSC02845.JPG" ><img src="/media/img/gallery/cervia14/thumbs/DSC02845.JPG" alt="Titel" title="Längere Beschreibung" ></a>
   <a href="/media/img/gallery/cervia14/DSC02866.JPG" ><img src="/media/img/gallery/cervia14/thumbs/DSC02866.JPG" alt="Titel" title="Längere Beschreibung" ></a>
   <a href="/media/img/gallery/cervia14/DSC02903.JPG" ><img src="/media/img/gallery/cervia14/thumbs/DSC02903.JPG" alt="Titel" title="Längere Beschreibung" ></a>
</div>


Dabei stammt das Previewbild aus dem einen Verzeichnis und das große Bild aus dem anderen. Beide Bilder müssen den selben Namen haben!

Ich denke, dass ist das ist das interessanteste an der ganzen Geschichte. Das kann IMHO gut als Basis für die Entwicklung einfacher kleiner Gallerien mit Lightbox-Scripten ran gezogen werden.

Tschüss
Tiggr (aka Marcus)


--------------------
@bout Kites: Colorful Sky - Typo3
@bout LARP: Orga ohne Namen - Sefrengo
@bout LARP: LARP-Welt - CakePHP
@bout Kites: Rodgauer Workshop - Contao
Go to the top of the page
 
+Quote Post
webmasterFF
Beitrag Thu. 12. June 2014, 16:50
Beitrag #5


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 287
Mitglied seit: 14.05.2009
Mitglieds-Nr.: 1.885



Puh...das klingt wirklich kompliziert wink.gif

Neee, passt. hab es eben getestet und es läuft!
Schaut auch schick aus.

Dickes Lob!
Weiter so!


--------------------
Es dankt und grüßt
webmaster FF

--------------------
Sefrengo v.1.6.0
ES LEBE SEFRENGO - denn du hast tausende von Möglichkeiten !!
Go to the top of the page
 
+Quote Post
Tiggr
Beitrag Thu. 12. June 2014, 20:25
Beitrag #6


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 386
Mitglied seit: 12.07.2006
Mitglieds-Nr.: 136



Dann bin ich ja froh, dass mein Geschreibsel verständlich ausgefallen ist!

Wie gesagt, ich glaube, das einzig wirklich interessante ist das Modul, um auf dessen Basis was eigenes zu bauen!

Tschüss
Tiggr (aka Marcus)


--------------------
@bout Kites: Colorful Sky - Typo3
@bout LARP: Orga ohne Namen - Sefrengo
@bout LARP: LARP-Welt - CakePHP
@bout Kites: Rodgauer Workshop - Contao
Go to the top of the page
 
+Quote Post
iekadou
Beitrag Wed. 18. June 2014, 09:15
Beitrag #7


Newbie
*

Gruppe: Members
Beiträge: 1
Mitglied seit: 18.06.2014
Mitglieds-Nr.: 2.644



Hey Tiggr,
wenn du Verbesserungsvorschläge oder Wünsche hast oder an ein Open-Source Projekt weiterentwickelst, kannst du auch bei Github einen Issue oder ein Pullrequest machen. Die meisten Entwickler, so wie auch ich, liefern dir dann entweder eine Möglichkeit wie deine Wünsche derzeit zu erfüllen sind oder erweitern dann ihr Projekt.

MfG
iekadou
Go to the top of the page
 
+Quote Post
Tiggr
Beitrag Sun. 8. February 2015, 18:06
Beitrag #8


Advanced Member
*******

Gruppe: AdvancedMembers
Beiträge: 386
Mitglied seit: 12.07.2006
Mitglieds-Nr.: 136



Hiho!

Ich melde mich noch mal zu Wort! Leider keine gute Nachricht!

Nachdem ich lange überlebt habe, hab ich zu Typo3 gewechselt, um meine Seite aufzubauen. Erscheint mir einfach die zukunftssichere Entscheidung! Tut mir leid!

Deswegen ist das Modul hier für mich auch erst mal tot! Sorry! Von mir wird sich da nichts mehr tun!

Tschüss
Tiggr (aka Marcus)


--------------------
@bout Kites: Colorful Sky - Typo3
@bout LARP: Orga ohne Namen - Sefrengo
@bout LARP: LARP-Welt - CakePHP
@bout Kites: Rodgauer Workshop - Contao
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 28.3.24 - 15:56

Sefrengo ist ein eingetragenes Markenzeichen und urheberrechtlich geschützt.
Copyright 2009 Design & Daten, Alle Rechte vorbehalten.