Seite 18 von 22

Re: blackGallery - FolderGallery next Generation

Verfasst: Mo 2. Feb 2015, 17:00
von shadowcat
So is doch nett...

Re: blackGallery - FolderGallery next Generation

Verfasst: Mo 2. Feb 2015, 17:11
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*)

Re: blackGallery - FolderGallery next Generation

Verfasst: Di 3. Feb 2015, 14:06
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.

Re: blackGallery - FolderGallery next Generation

Verfasst: Di 3. Feb 2015, 16:11
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:

Re: blackGallery - FolderGallery next Generation

Verfasst: Di 3. Feb 2015, 19:00
von Morpheus
Mann, Äh Sorry Frau, du gibst ja Gas.
Ich komm ja gar nicht mit dem Testen hinterher. Bild

Re: blackGallery - FolderGallery next Generation

Verfasst: Di 3. Feb 2015, 19:34
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:

Re: blackGallery - FolderGallery next Generation

Verfasst: Mo 16. Feb 2015, 14:41
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) 5383 mal betrachtet

Code: Alles auswählen

.......beta-alpha/modules/blackGallery/inc/wblib/3rdparty/js/requirejs/require.js"

Re: blackGallery - FolderGallery next Generation

Verfasst: Mo 16. Feb 2015, 14:51
von shadowcat
Also im ZIP ist die Datei drin, sollte also auch installiert worden sein.

Re: blackGallery - FolderGallery next Generation

Verfasst: Mo 16. Feb 2015, 14:56
von Morpheus
Ach, vegessen!!!

Hatte ich geguckt, ist auch drin!!

Re: blackGallery - FolderGallery next Generation

Verfasst: Mo 16. Feb 2015, 15:03
von shadowcat
Dann versteh ich des net.