“Der Friedberger” – satirische online-Zeitung


26.08.10 von Adrian in

Heute startete die von uns gestaltete Online Zeitung www.der-friedberger.de in die Betaphase.

…den gesamten Beitrag lesen »

Tags: , , , , , ,
3 Kommentare »

Wireframe-Tools für Webseiten


19.08.10 von Carla in


Bild: links, Entwurf mit dem Wireframe-Tool Mockingbird – rechts, ein detaillierter Entwurf im Grafikprogramm (Illustrator)

In der Konzeptionsphase einer Webseite werden Ideen und Elemente der zukünftigen Webseite entwickelt. Stift und Papier sind die einfachsten Hilfsmittel mit denen der Webdesigner die grundlegenden Strukturen vereinfacht veranschaulichen kann. Solche abstrakten Zeichnungen können auch am Computer mit Wireframe-Tools visualisiert werden. Innerhalb von Minuten entsteht ein Prototyp mit den verschiedenen Elementen wie Navigation oder Seitenaufteilung am Bildschirm. Auch komplexe Strukturen können mit interaktiv verknüpften Seiten dargestellt werden.

…den gesamten Beitrag lesen »

Tags: , , , , , , ,
2 Kommentare »

Lightbox 2.0 feste Breite / Höhe für Bilder


19.07.10 von Adrian in

Die Lightbox 2.0 hatte bisher leider keine Möglichkeit die Bildgröße in der Lightboxansicht zu ändern bzw. zu verkleinern. Da ich diese Funktion aber dringend benötigt hatte habe ich einen Mod geschrieben mit dem dies nun möglich ist.

Dazu werden die beiden Dateien lightbox.js und lightbox.css bearbeitet.

lightbox.js in Zeile 261:

imgPreloader.onload = (function(){

this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},

imgPreloader.onload = (function(){            this.lightboxImage.src = this.imageArray[this.activeImage][0];            this.resizeImageContainer(imgPreloader.width, imgPreloader.height);        }).bind(this);        imgPreloader.src = this.imageArray[this.activeImage][0];    },

ersetzen durch:

imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
var teiler_b = imgPreloader.width/800; //Wert für die maximale Bildbreite
var teiler_h = imgPreloader.height/600; //Wert für die maximale Bildhöhe
if(teiler_h > teiler_b){ teiler = teiler_h }else{ teiler = teiler_b }
this.resizeImageContainer(imgPreloader.width/teiler, imgPreloader.height/teiler);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
lightbox.css in Zeile 2:
#lightbox img{ width: auto; height: auto;}
ersetzen durch:
#lightbox img{ }
#lightboxImage{ width: 100%; }
Damit können nun unterschiedliche Bildgrößen immer mit einer festen maximalen Breite und einer festen maximalen Höhe angezeigt werden!
3 Kommentare »