blackGallery - FolderGallery next Generation

Hier landen ältere Beiträge aus dem Forum "Module & Templates" sowie den dazugehörigen Unterforen. Ruhig auch mal reinschauen.
Benutzeravatar
shadowcat
Administrator
Beiträge: 5278
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von shadowcat »

So is doch nett...
Dateianhänge
2015-02-02 17_00_29-Galerie.png
2015-02-02 17_00_29-Galerie.png (40.41 KiB) 5395 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5278
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von shadowcat »

Anbei v0.15.
  • Folder jetzt mit Beschriftung (Name und Beschreibung)
  • Lightbox-Templates für Slimbox2 und prettyPhoto enthalten; Fallback auf Default-Template eingebaut
  • Nochmal am Umlautproblem rumgeschraubt (das wird uns aber wohl noch weiter verfolgen... *grrrr*)
Dateianhänge
blackGallery_v0.15.zip
(517.11 KiB) 209-mal heruntergeladen
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5278
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von shadowcat »

Einfach mal weil es geht: Slider ohne JavaScript (CSS3)!

Quelle: http://thecodeplayer.com/walkthrough/cs ... thumbnails

Wir müssen hier ein wenig tricksen, weil die blackGallery nicht darauf ausgelegt ist, reine CSS-Slider einzubinden.

Schritt 1: Datenbankeintrag

Dieser muß von Hand vorgenommen werden. Dran denken ggfs. den Tabellenpräfix anzupassen! (Also das 'cat_')

Code: Alles auswählen

INSERT INTO `cat_mod_blackgallery_lboxes` (`lbox_id`, `section_id`, `lbox_name`, `lbox_path`, `lbox_js`, `lbox_css`, `lbox_code`, `lbox_template`, `lbox_use_default`) VALUES (NULL, 0, 'pureCSS3', '', '', 'a:1:{i:0;a:2:{s:5:"media";s:6:"screen";s:4:"file";s:50:"/modules/blackGallery/css/slider/purecssslider.css";}}', '', '<div class="slider">\r\n    {foreach $images img}\r\n	<input type="radio" name="slide_switch" id="id{$.foreach.default.iteration}" {if $.foreach.default.first}checked="checked"{/if} />\r\n	<label for="id{$.foreach.default.iteration}">\r\n		<img src="{$BASE_URL}{$current_path}/{$settings.thumb_foldername}/thumb_{$img.file_name}" style="width:{$li_width}px;height:{$li_height}px;" />\r\n	</label>\r\n	<img src="{$BASE_URL}{$current_path}/{$img.file_name}" style="height:96%" />\r\n    {/foreach}\r\n</div>\r\n<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>', 'N');
Schritt 2: CSS-Datei erstellen

Im Verzeichnis /modules/blackGallery/css ein Unterverzeichnis 'slider' anlegen. Dort eine Datei purecssslider.css anlegen und mit folgendem Inhalt füllen:

Code: Alles auswählen

/* http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */
.slider{width:640px;position:relative;padding-top:320px;margin:100px auto;box-shadow:0 10px 20px -5px rgba(0, 0, 0, 0.75)}
.slider>img{position:absolute;left:0;top:0;transition:all 0.5s}
.slider input[name="slide_switch"]{display:none !important}
.slider label{margin:18px 0 0 18px;border:3px solid #999;float:left;cursor:pointer;transition:all 0.5s;opacity:0.6}
.slider label img{display:block}
.slider input[name='slide_switch']:checked+label{border-color:#666;opacity:1}
.slider input[name='slide_switch'] ~ img{opacity:0;transform:scale(1.1)}
.slider input[name='slide_switch']:checked+label+img{opacity:1;transform:scale(1)}
Schritt 3: Ausgabe-Template anlegen

Im Verzeichnis /modules/blackGallery/templates/default eine Datei lightbox_pureCSS3 anlegen und mit folgendem Inhalt füllen:

Code: Alles auswählen

<div class="slider">
    {foreach $images img}
	<input type="radio" name="slide_switch" id="id{$.foreach.default.iteration}" {if $.foreach.default.first}checked="checked"{/if} />
	<label for="id{$.foreach.default.iteration}">
		<img src="{$BASE_URL}{$current_path}/{$settings.thumb_foldername}/thumb_{$img.file_name}" style="width:{$li_width}px;height:{$li_height}px;" />
	</label>
	<img src="{$BASE_URL}{$current_path}/{$img.file_name}" style="height:96%" />
    {/foreach}
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
Schritt 5: Slider auswählen

Im blackGallery Backend unter Optionen die Lightbox 'pureCSS3' auswählen.

Wichtig (Einschränkungen):

Ich habe den Code so angepaßt, daß die Bilder von der Größe her angepaßt werden. Bilder, die breiter sind als der Slider, ragen drüber weg; Bilder, die schmaler sind, werden linksbündig angezeigt. Es empfiehlt sich daher (wobei das bei Slidern eigentlich immer so ist), nur gleich große Bilder im passenden Format zu verwenden. Ggfs. das CSS anpassen.
Dateianhänge
Und so schaut's aus
Und so schaut's aus
2015-02-03 14_06_14-Galerie.png (490.61 KiB) 5387 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
shadowcat
Administrator
Beiträge: 5278
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von shadowcat »

Anbei Version 0.16.
  • Neu: Möglichkeit zum Import von Lightboxen (rudimentär)
  • Einige neue Images (Webfont)
  • Unterstützung von Lightboxen (oder besser Slidern) ohne JavaScript
Der Import von Lightboxen erfolgt über eine JSON-Datei. Ich habe beispielhaft die von o.g. PureCSS-Slider beigelegt. Es liegt in der Natur der Sache, daß in einer json-Datei keine kompletten Plugins geliefert werden können; der Sinn ist hierbei eher, die _Einstellungen_ für ein Plugin zu importieren. Das heißt, man installiert z.B. ein jQuery Plugin über das Admin Tool und die Einstellungen dazu in einer json-Datei.

Um Lightboxen ohne Javascript unterstützen zu können, gibt es ein neues Verzeichnis ./css/lightboxes. Hier werden CSS-Dateien abgelegt, die sozusagen "solo" sind. Der Auswahldialog zum Hinzufügen von CSS-Dateien auf dem Reiter [Lightbox] wurde entsprechend erweitert, daß die Dateien aus diesem Verzeichnis ebenfalls angeboten werden. Man kann das Verzeichnis auch nutzen, um z.B. eigene CSS-Anpassungen zu jQuery Plugins zu hinterlegen und zu integrieren.

Weitere Einschränkungen beim Import:
  • Derzeit wird kein JavaScript Code berücksichtigt
  • Es wird nicht geprüft, ob eine entsprechende Lightbox bereits existiert
Known Bug: Die Farbe auf dem "Lightbox löschen" Button. Da hab ich zu früh das Release gemacht. Da gibt's jetzt rote Schrift auf rotem Grund. :mrgreen:
Dateianhänge
blackGallery_v0.16.zip
(520.83 KiB) 207-mal heruntergeladen
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
Morpheus
Beiträge: 1050
Registriert: Do 8. Aug 2013, 10:49
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von Morpheus »

Mann, Äh Sorry Frau, du gibst ja Gas.
Ich komm ja gar nicht mit dem Testen hinterher. Bild
Keiner ist unnütz, er kann immer noch als schlechtes Beispiel dienen!
Benutzeravatar
shadowcat
Administrator
Beiträge: 5278
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von shadowcat »

Ich bau grad noch ein "dark" Template mit einer CSS3 Pure CSS Film Slide Show. Also der Plan: Wenn man auf den Filmstreifen geht, scrollt der langsam durch. Nur mit CSS. Geht dann halt in alten Browsern nicht. Ist auch mehr experimentell. :mrgreen:
Dateianhänge
2015-02-03 19_33_16-Galerie.png
2015-02-03 19_33_16-Galerie.png (114.06 KiB) 5382 mal betrachtet
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
Morpheus
Beiträge: 1050
Registriert: Do 8. Aug 2013, 10:49
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von Morpheus »

So, jetzt gehen wir das Thema noch mal an ;)
Gerade auf einem 1und1 Server in eine frische Installation installiert.

- Da fehlt doch was, oder (Farbpicker, Farben-Buttons)

auf der lokalen Version ist alles da! (Antwortzeiten-Problem?)
Bild 9.jpg
Bild 9.jpg (405.64 KiB) 5354 mal betrachtet

Code: Alles auswählen

.......beta-alpha/modules/blackGallery/inc/wblib/3rdparty/js/requirejs/require.js"
Keiner ist unnütz, er kann immer noch als schlechtes Beispiel dienen!
Benutzeravatar
shadowcat
Administrator
Beiträge: 5278
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von shadowcat »

Also im ZIP ist die Datei drin, sollte also auch installiert worden sein.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Benutzeravatar
Morpheus
Beiträge: 1050
Registriert: Do 8. Aug 2013, 10:49
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von Morpheus »

Ach, vegessen!!!

Hatte ich geguckt, ist auch drin!!
Keiner ist unnütz, er kann immer noch als schlechtes Beispiel dienen!
Benutzeravatar
shadowcat
Administrator
Beiträge: 5278
Registriert: Di 5. Feb 2013, 10:36
Kontaktdaten:

Re: blackGallery - FolderGallery next Generation

Beitrag von shadowcat »

Dann versteh ich des net.
My software never has bugs, it just develops random features.
If it’s not broken, keep fixing it until it is
Antworten