Joomla DJ-Image Slider flexibel und responsive

Im Moment bin ich am schauen, ob ich meine Website demnächst mal auf dem Responsive Framework von Gavick aufsetze.

Da ich dann erst mal meine Inhalte weitestgehend übernehmen möchte, war dass erste dass mir auffiel, dass meine Slideshows im Headerbereich nicht mehr funktionieren würden.

Diese beruhen auf dem DJ-Imageslider was den Vorteil hat, dass hier mootools zum Einsatz kommt und außerdem ist die Backendverwaltung der Bilder recht schön gelöst.

Am Ende war es doch etwas fummeliger als gedacht, und ließ sich auch nicht per überschreiben des Modules lösen, so dass dieser Workaround nicht updatesicher ist.

Tip: Macht vorher ein Update des Modules, das ganze ist nicht Update sicher, das ganze funktioniert nur wenn der Slider Type auf Fade gestellt ist.


modules/mod_djimageslider/assets/slider.js

if (settings.slider_type == 2) { // fade
   slides.setStyle('position', 'absolute');
   slides.setStyle('top', 0);
   slides.setStyle('left', 0);
   $(slider).setStyle('width', settings.slide_size);
   slides.setStyle('opacity',0);
   slides[0].setStyle('opacity',1);
   slides[0].setStyle('z-index','10');
   $('navigation' + settings.id).setStyle('z-index',20);
   slides.set('tween',{property: 'opacity', duration: options.duration});

durch

  if (settings.slider_type == 2) { // fade
   slides.setStyle('position', 'absolute');
   slides.setStyle('top', 0);
   slides.setStyle('left', 0);
                        slides.setStyle('display', 'none');
   $(slider).setStyle('width', settings.slide_size);
   slides.setStyle('opacity',0);
   slides[0].setStyle('opacity',1);
   slides[0].setStyle('z-index','10');
                        slides[0].setStyle('position','relative');
                        slides[0].setStyle('display','block');
   $('navigation' + settings.id).setStyle('z-index',20);
   slides.set('tween',{property: 'opacity', duration: options.duration});

ersetzen und...

   slides[current_slide].get('tween').set(1);
   slides[prev_slide].get('tween').start(0).chain(function(){
    slides[prev_slide].setStyle('z-index',0);
    slides[current_slide].setStyle('z-index',10);
    is_fading = false;
   });

durch

  function makeFade(prev_slide){
   slides[current_slide].get('tween').set(1);
   slides[prev_slide].get('tween').start(0).chain(function(){
                                slides[prev_slide].setStyle('display','none');
    slides[current_slide].setStyle('display','block');
                                slides[prev_slide].setStyle('position','absolute');
    slides[current_slide].setStyle('position','relative');
    slides[prev_slide].setStyle('z-index',0);
    slides[current_slide].setStyle('z-index',10);
    is_fading = false;
   });

ersetzen



In eine CSS Datei eurer Wahl

.djslider-loader,
.djslider,
.slider-container,
.djslider-loader .slider-container ul,
.djslider-loader .slider-container ul li a, 
.djslider-loader .slider-container ul li a img { width: 100%!important;  display: inline-block!important; overflow:  hidden; }

.djslider-loader,
.djslider,
.slider-container { height: 100%!important; position: relative!important;}

#gkToolbar .djslider-loader .slider-container ul { position: relative!important;  } 
#gkToolbar .djslider-loader .slider-container ul { height:100%!important; }
#gkToolbar .djslider-loader .slider-container ul li { height:100%!important; width: 100%!important;  display: none; overflow:  hidden;}
.djslider-loader .navigation-container { position: absolute; top: 0px!important; margin-top: -120px!important;margin-bottom: 120px!important;}

Wobei '#gkToolbar' nur wichtig ist, wenn dass Responsive Template von Gavick verwendet wird.

html5 tool zum erstellen von Mock ups

https://moqups.com

JavaScript Markdown Editor

Auch wenn Online WYSIWYG Editoren beachtliches leisten, ist es oft problematisch, sie einem Kunden an die Hand zu geben, denn mit der Komplexität steigt auch die Möglichkeiten totales code kaudawelsch zu produzieren.

Eine alternative sind da Markup Editoren, wie bspw. EpicEditor. Dieser läßt sich auch relativ einfach in bestehende Projekte integrieren.

Link zur Seite oscargodson.github.com/EpicEditor
Mark down Syntax daringfireball.net/projects/markdown/syntax

Client Detector Beta

Da Browser und Ausgabegeräte ja eher zu als abnehmen und man trotz responsive Design hin und wieder mal genauer bestimmen möchte, welcher Code unter welchen Bedingungen ausgeführt wird, benötigt man Scripts, die eine bedingte Ausgabe ermöglichen.

Detector Beta ist ein umfangreicher auf Javascript und PHP basierter Detector, der User Agent, CSS3 Fähigkeit, html5 Fähigkeit etc. abfragt.

Download auf Github

Kostenlos Faxen über Cospace

Ich bin ja vor kurzem umgezogen, und bei der Gelegenheit hat sich auch mein Telefonanschluss geändert.
Die extra ISDN Nummer fürs Fax ist weggefallen.

Nun Faxe ich nicht so oft, aber hin und wieder kommt ich halt schon in die Verlegenheit, und für genau diese Zwecke ist cospace ziemlich genial.
Über diesen Onlinedienst aus deutschen Landen lassen sich Nummern anlegen und diese wiederum verschiedenen Diensten zuordnen.

So kann man immerhin 50 Faxe/Monat kostenlos senden und unbegrenzt viele Empfangen.

Die anderen Dienste sind: ein Anrufbeantworter und ein Telefon Konferenztool zur Kostenlosen Verfügung bis 5GB.

Subtile Pattern und Hintergründe

Schön gemachte Ressource Seite für Augen freundliche Hintergründe.

subtlepatterns.com

Icons als Webfonts einbinden - leicht gemacht.

Bis jetzt habe ich diese Technik in meinen Projekten noch nicht einsetzen können, ich hoffe aber, dass sich das demnächst ändert.

Der Vorteil liegt darin, dass die Icons skalierbar sind, der Nachteil, die Fonts sind monochrom außerdem ist die Technik im Großen und Ganzen etwas aufwendiger und lohnt sich eigentlich auch erst bei Seiten mit vielen Icons in verschiedenen Größen, da man ansonsten besser mit Sprites fährt. (Vor allem was die Dateigröße betrifft.)

Um die Sache Zumindest etwas einfacher zu machen gibt es so tolle Dienste wie:

icomoon oder fontello (via praegnanz.de)

Weitere Links:
How to make your own icon webfont
http://www.justbenicestudio.com/studio/websymbols/