de.hideout-lastation.com
Paradies Für Designer Und Entwickler


So vergrößern Sie Bilder wie Mittel

Die Blogging-Plattform Medium verwendet einen benutzerdefinierten Bild-Zoomeffekt auf ihren Blog-Seiten. Immer wenn der Benutzer auf ein Bild klickt, wird es automatisch vergrößert.

Es ist ein großartiger Effekt und sicherlich einzigartig für Medium, aber es war nie etwas, das leicht kopiert werden könnte.

Mit dem MediumLightbox- Skript ist es jetzt einfacher als je zuvor. Dieses JS-Skript ist leicht und einfach in jede Website oder Blog hinzuzufügen.

Wenn Sie sehen möchten, wie das funktioniert, können Sie die Live-Demo-Seite von Schöpfer Davide Calignano besuchen.

Er verbrachte eine Weile damit, den exakten Übergang und den benutzerdefinierten Animationseffekt zu nageln, um ein Spiegelbild des Bildzooms von Medium zu erstellen . Die gesamte Bibliothek ist in reinem JavaScript geschrieben, sodass sie sich nicht auf Skripte von Drittanbietern wie jQuery verlässt.

Sie müssen ein wenig JS wissen, um es einzurichten, aber Sie müssen sicherlich kein Experte sein.

Jedes Bild kann Daten * -Attribute für die Einstellung der vollen Höhe und Breite nehmen, die alle dynamisch aus dem Lightbox-Plugin gezogen werden . Der Setup - Code ist sehr einfach und kann die Bilder selbst oder Container wie die

Element .

Hier ist das einzelne Code-Snippet, das Sie benötigen, um das Plugin zu starten:

 MediumLightbox ('figur.zoom-effect'); 

Innerhalb der Funktion übergeben Sie einen Selektor für alle Elemente (z. B.

) mit der .zoom-effect Klasse. Diese Klasse ist speziell im Stylesheet MediumLightbox definiert, daher ist es am besten, diese auch auf Ihrer Seite zu verwenden.

Und sobald das eingerichtet ist, sind Sie fertig!

In Ihrem Seiteninhaltsbereich können Sie alle Bilder in ein
Tag, der diese Klasse verwendet. Sie erhalten automatisch diesen beliebten Click-to-Zoom-Effekt für Desktop- und mobile Nutzer .

Um eine Kopie dieses Skripts herunterzuladen und loszulegen, besuchen Sie einfach das Haupt-Repertoire von GitHub. Hier finden Sie auch Dokumentation zusammen mit Code-Snippets, die Sie kopieren können, um schnell eingerichtet zu werden.

OS X Lion: 10 weitere neue Funktionen + Abkürzungen, die Sie kennen sollten

OS X Lion: 10 weitere neue Funktionen + Abkürzungen, die Sie kennen sollten

Apples neuestes Betriebssystem für Mac, 10.7 oder besser bekannt als OS X Lion, wurde offiziell am 20. Juli 2011 eingeführt. Aber Entwickler, einschließlich mir selbst, hatten dank Apple Developers Program eine frühere praktische Erfahrung.Laut Apple wird das neue 29, 99-Dollar-Betriebssystem mit mehr als 250 neuen Features ausgeliefert, darunter die wenigen bemerkenswerten wie Mission Control, Auto Save, Launch Pad, alle neuen Mail-Apps und einige andere.Wen

(Tech- und Design-Tipps)

Gesicht ist Kunst: 30 surreale Gesichter, die Sie inspirieren

Gesicht ist Kunst: 30 surreale Gesichter, die Sie inspirieren

Gesicht! Es ist, was Menschen ihren eigenen Ausdruck ausdrücken, glücklich oder traurig, aufgeregt oder wütend. Es ist auch, wie Menschen ihre Schönheit beurteilen, wie zum Beispiel, wer nicht ein Gesicht wie Brad Pitt oder Megan Fox haben will, oder Gerald Butler, wissen Sie, derjenige, der König Leonidas im Film 300 gecastet hat.Aber

(Tech- und Design-Tipps)