Jquery-Portfolio-Galerie. Plugin zum Erstellen eines Portfolios. Implementierung der Seite „Projekt vorschlagen“.

von Dmitri Semenow
ist ein jQuery-Bildergalerie- und Content-Slider-Plugin. Es ist vollständig reaktionsfähig, berührungsfreundlich und verfügt über eine modulare Architektur, die es Ihnen ermöglicht, nur die Funktionen einzubinden, die Sie zur Optimierung der Dateigröße und Leistung benötigen.

von Andy – The Coffeescripter
Ein hochgradig anpassbares Galerie-/Showcase-Plugin für jQuery.

von Trent
Galleriffic ist ein jQuery-Plugin, das ein umfassendes, postbackfreies Erlebnis bietet, das für die Verarbeitung großer Fotomengen bei gleichzeitiger Einsparung von Bandbreite optimiert ist.

Tonic-Galerie – jQuery XML-Portfolio-Galerie | 6 $

von Aino
Galleria ist ein JavaScript-Bildergalerie-Framework, das auf der jQuery-Bibliothek aufbaut. Ziel ist es, den Prozess der Erstellung professioneller Bildergalerien für das Web und mobile Geräte zu vereinfachen.

von CatchMyFame
Neulich habe ich nach einer einfachen Möglichkeit gesucht, mit jQuery zwischen einer Reihe von Bildern auf einer Seite zu wechseln. Als Programmierer machte ich mich also daran, mein eigenes Plugin zu erstellen.

von Thomas Kahn
Smooth Div Scroll ist ein jQuery-Plugin, das Inhalte horizontal nach links oder rechts scrollt. Im Gegensatz zu vielen anderen Scroll-Plugins, die für jQuery geschrieben wurden, beschränkt Smooth Div Scroll das Scrollen nicht auf bestimmte Schritte.

von Victor Zambrano – frwrd.net
Minishowcase ist eine kleine und einfache PHP/Javascript-Online-Fotogalerie, die von AJAX unterstützt wird und es Ihnen ermöglicht, Ihre Bilder ganz einfach online zu zeigen, ohne komplexe Datenbanken oder Programmierung, sodass Sie in wenigen Minuten eine betriebsbereite Galerie haben.

von Caspar David Friedrich
EOGallery ist eine webanimierte Diashow-Galerie, die mit jQuery erstellt wurde. Es verwendet nur grundlegende jQuery-Funktionen und Cody Lindleys Thickbox, um größere Bilder anzuzeigen.

von Arnault Pachot
Ein Multiformat-Karussell für jQuery, ein nicht aufdringliches und zugängliches Portfolio, das mehrere Medien unterstützt: Fotos, Video (FLV), Audio (MP3). Dieses Plugin für jQuery erkennt automatisch die Erweiterung jedes Mediums und wendet den angepassten Player an.

The Wall – Mediengalerie – jQuery powered | 5 $

von Stefan Petre
Ein weiteres Bildergalerie-Plugin mit Raumeffekt, sehr leichtes und einfaches Plugin.

von Moreno Di Domenico
jmFullWall ist ein jQuery-Plugin zur Erstellung eines beeindruckenden Portfolios.

von Fabrizio Calderan
Mosaiqy ist ein jQuery-Plugin zum Anzeigen und Zoomen von Fotos, das unter Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome und IE7+ funktioniert. Fotos werden aus einer JSON/JSONP-Datenstruktur abgerufen und zufällig innerhalb des Rasters verschoben. Alle teuren Animationen werden in aktuellen Browsern mithilfe von CSS3-Übergängen von Ihrer GPU übernommen, wodurch der CPU-Overhead minimiert wird.

von Cody
Das folgende jQuery-Plugin verwandelt eine Reihe von Bildern in eine kleine Galerie mit mehreren Optionen. Die Micro Image Gallery ermöglicht das Umschalten zwischen einer Rasteransicht, die eine Vorschau der Bilder als Miniaturansichten anzeigt, und einer Einzelansicht, in der nur ein Bild angezeigt wird.

VION – jQuery-Bildergalerie-Plugin | 7 $

von Malihu
Eine einfache, aber elegante Vollbild-Bildergalerie, erstellt mit dem jQuery-Framework und etwas einfachem CSS.

Kompetent komponiert und visuell gestaltet, handelt es sich in unserem Fall um eine separate Seite, die ein wichtiges Element der persönlichen Website oder des Blogs eines jeden Spezialisten ist, der in seiner beruflichen Tätigkeit ein bestimmtes Kompetenzniveau erreicht hat.
Eine Portfolio-Seite ist eine Art Bericht oder visuelle Zusammenfassung, mit deren Hilfe Sie den Lesern und Besuchern Ihrer Website/Ihres Blogs eine Reihe der erfolgreichsten abgeschlossenen Arbeiten, seien es Fotos, Artikel, Veröffentlichungen oder Designelemente, anschaulich demonstrieren können , usw.
Ich habe keine solche Seite und für mich ist das ein ärgerliches Versäumnis, das so schnell wie möglich korrigiert werden muss, woran ich gerade arbeite.
In den Weiten des globalen Netzwerks finden Sie eine Vielzahl vorgefertigter Seitenvorlagen für die Organisation eines Portfolios, und die Vielfalt solcher Seiten ist wirklich beeindruckend. Wer sich also nicht in alle Feinheiten des Webdesigns und der Webentwicklung vertiefen möchte, wird immer eine passende Option für sich finden. Nun, für diejenigen, denen es an Kenntnissen in der Website-Erstellung mangelt, schlage ich vor, ein Beispiel für ein adaptives Layout anzusehen, eine einfache Portfolio-Seite mit Filterung abgeschlossener Werke nach Kategorien, erstellt in , verdünnt mit einem attraktiven Übergangseffekt, mit Animationselementen.

Das Seitenlayout, ausführbares Javascript und einige Designelemente wurden vom wunderbaren Webdesigner und Entwickler Kevin Liew (queness.com) erstellt. Bei der Auswahl der optimalen Lösung war es mir wichtig, dass sie einfach zu implementieren ist, die Funktionalität des jQuery-Plugins, die korrekte Funktion in allen modernen Browsern und angesichts der wachsenden Beliebtheit der Verwendung verschiedener mobiler Geräte zum Surfen im Internet die Anpassungsfähigkeit des Plugins Design der zukünftigen Seite. Kein ausgefallener Designer-Schnickschnack oder schwere Plugins.

Das Grundlayout besteht aus zwei Hauptelementen der Benutzeroberfläche, die wir erstellen müssen: der Tab-Navigation zum Filtern der Kategorien eingereichter Arbeiten und dem Miniaturbildraster selbst mit einem Hover-Effekt, damit die Beschriftung herausspringt.
Damit am Ende alles funktioniert, benötigen Sie zunächst jQuery Version 1.7.0 oder höher. Wenn Sie es noch nicht verbunden haben, fügen Sie vor dem Tag die folgende Zeile hinzu:

Starten Sie das MixItUp-Plugin und fügen Sie diesen Code nach den oben genannten Dateien ein:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , Lockerung : "snap" , // Hover-Effekt aufrufen onMixEnd: filterList. hoverEffect() ) ; ) , hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find ("".label" ) . stop() . animate(( unten: 0 ) , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate(( oben: - 30 ) , 500 , "easeOutQuad" ) ; ) , function () ( $(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this ) . find("img" ) . stop() . animate(( top: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ) ; filterList. init() ; ) );

$(function () ( var filterList = ( init: function () ( $("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing : "snap", // Hover-Effekt aufrufen onMixEnd: filterList.hoverEffect() )); ), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find(".label").stop().animate((bottom: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((top: -30 ), 500, "easeOutQuad"); ), function () ( $(this).find(".label").stop().animate((bottom: -40), 200, "easeInQuad"); $( this).find("img").stop().animate((top: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));

Es macht keinen Sinn, alle Plugin-Optionen einzeln zu betrachten; die Standardoption ist ziemlich optimal. Nun, wenn jemand mit Parametern experimentieren möchte, tun Sie bitte alles, was in Ihrer Macht steht.

Um das Seitenlayout und das Erscheinungsbild der Elemente zu gestalten, verbinden Sie einige Dateien mit dem Dokument. , eine für grundlegende Stile, nennen wir sie zum Beispiel: layout.css und eine weitere kleine CSS-Datei normalize.css, um eine bessere Browserkonsistenz im Standarddesign von Elementen sicherzustellen:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Schauen wir uns nun alles der Reihe nach an, möglichst ohne unnötiges Wasser, auf zugängliche und verständliche Weise, in unserer Muttersprache, die schon lange leidet.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Alle< li>< span class = "filter" data- filter= "app" >Anwendungen< li>< span class = "filter" data- filter= "card" >Visitenkarten< li>< span class = "filter" data- filter= "icon" >Symbole< li>< span class = "filter" data- filter= "logo" >Logo< li>< span class = "filter" data- filter= "web" >Webdesign

• Alle
• Anwendungen
• Visitenkarten
• Symbole
• Logo
• Webdesign

Im Navigationsbereich platzieren wir die gesamte Werkliste, unterteilt in Kategorien. Wir müssen jede Portfoliokategorie über das Data-Cat-Attribut mit dem einen oder anderen Navigationsleistenelement entsprechend dem Wert im Data-Filter-Attribut verknüpfen. Durch den Abgleich der Werte von data-filter mit data-cat werden die Portfolioelemente nach Kategorie gefiltert.
Zusätzlich werden wir dem vorerst ausgeblendeten Miniaturbild ein kleines Panel mit dem Namen des Werks und dem Titel der Kategorie hinzufügen, das nur dann erscheint, wenn Sie mit der Maus über das Bild fahren. Und um das Erscheinungsbild dieser gesamten Struktur in CSS einfacher gestalten zu können, weisen wir den Elementen die entsprechenden Klassen zu:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Beget Hosting. Ru< span class = "text-category" >Logo< div class = "label-bg" > .........

Hosting von Beget.Ru Logo.........

Bitte beachten Sie, dass Sie Links zum Bild oder direkt zur Signatur hinzufügen können, damit der Benutzer alle Ihre Arbeiten vollständig sehen kann.

CSS

Kommen wir nun in Ruhe zum interessantesten Teil, der Bildung der allgemeinen Stile der Benutzeroberfläche unserer Portfolio-Seite und ihrer adaptiven Version in CSS. In dem Artikel werde ich nur die grundlegenden (Standard-)Werte angeben, also ohne Hintergrundbilder und verbundene Schriftarten; all dies kann für diejenigen, die es benötigen, in der Demo eingesehen oder im Archiv mit dem Quellcode gefunden werden .

.container ( position : relative ; width : 960px ; margin : 0 auto ; /* Sie können die Kette der Übergänge sehen, wenn Sie die Größe des Browserfensters ändern */ -webkit-transition: all 1sease; -moz-transition: all 1s Leichtigkeit; -o -transition: alle 1s Leichtigkeit; Übergang: alle 1s Leichtigkeit; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* füge einen kleinen Schatten für den Text hinzu */ text-shadow : 1px 1px #FFFFFF ; Cursor : Zeiger ; ) /* ändern der Kategoriehintergrund beim Schweben */ # filter li span: hover ( Hintergrund : #34B7CD ; Textschatten : 0 0 2px #004B7D ; Farbe : #fff ; ) /* Hintergrund des aktiven Kategorieelements */ #filters li span. aktiv (Hintergrund: RGB (62, 151, 221); Textschatten: 0 0 2px #004B7D; Farbe: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; Breite: 23 %; Marge: 1 %; Anzeige: keine; schweben: links; Überlauf versteckt; ) .portfolio-wrapper ( Überlauf : versteckt ; Position : relativ ! wichtig ; Hintergrund : #666 ; Cursor : Zeiger ; ) .portfolio img ( max-width : 100 % ; Position : relativ ; ) /* Signaturen sind standardmäßig ausgeblendet * / .portfolio .label (Position: absolut; Breite: 100 %; Höhe: 40 Pixel; unten: -40 Pixel;) .portfolio .label-bg (Hintergrund: RGB (62, 151, 221); Breite: 100 %; Höhe: 100 %; Position: absolut; oben: 0; links: 0;) .portfolio .label-text (Farbe: #fff; Position: relativ; Z-Index: 500; Polsterung: 5px 8px;) .portfolio .text-category (Anzeige: Block; Schriftgröße: 9 Pixel;)

Container ( Position: relativ; Breite: 960 Pixel; Rand: 0 automatisch; /* Sie können die Kette der Übergänge sehen, wenn Sie die Größe des Browserfensters ändern */ -webkit-transition: alle 1s easy; -moz-transition: alle 1s Leichtigkeit; -o- Übergang: alle 1s Leichtigkeit; Übergang: alle 1en Leichtigkeit; ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* füge einen kleinen Schatten für den Text hinzu */ text-shadow: 1px 1px #FFFFFF; Cursor: Zeiger; ) /* ändere die Kategoriehintergrund beim Schweben */ #filters li span:hover ( Hintergrund: #34B7CD; Textschatten: 0 0 2px #004B7D; Farbe:#fff; ) /* Hintergrund des aktiven Kategorieelements */ #filters li span.active ( Hintergrund: rgb(62, 151, 221 ); Textschatten: 0 0 2px #004B7D; Farbe:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing : border-box; -o-box- Größe: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .portfolio-wrapper ( overflow:hidden; Position: relativ !important; Hintergrund: #666; Cursor:Zeiger; ) .portfolio img ( max-width:100%; Position: relativ; ) /* Signaturen werden standardmäßig ausgeblendet */ .portfolio .label ( Position: absolut; Breite: 100%; Höhe:40px; unten:-40px; ) . portfolio .label-bg ( Hintergrund: rgb(62, 151, 221); Breite: 100 %; Höhe: 100 %; Position: absolut; oben: 0; links: 0; ) .portfolio .label-text ( Farbe: # fff; position: relative; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

Im zweiten Teil erstellen wir direkt im selben Stylesheet und unter Verwendung mehrerer Medienabfragen alternative CSS-Abschnitte. Um sicherzustellen, dass unser Seitenlayout auf den Bildschirmen verschiedener Mobilgeräte korrekt angezeigt wird, werden wir diesen Abschnitten auch alternative CSS-Regeln für verschiedene Bildschirme hinzufügen. Somit können wir alle Regeln, die zuvor in unserer CSS-Tabelle für normale Browser festgelegt wurden, problemlos überschreiben und so die gewünschte Anpassungsfähigkeit erreichen.

/* Tablet */ @media nur Bildschirm und (min-width : 768px ) und (max-width : 959px ) ( .container ( width : 768px ; ) ) /* Mobile – Hinweis: Design für 320px Breite*/ nur @media screen and (max-width : 767px ) ( .container ( width : 95% ; ) #portfoliolist .portfolio ( width : 48% ; margin : 1% ; ) ) /* Mobile – Hinweis: Design für 480px Breite */ @media nur Bildschirm und (min-width: 480px) und (max-width: 767px) (.container (width: 70%;))

/* Tablet */ @media nur Bildschirm und (min-width: 768px) und (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobile – Hinweis: Design für 320px Breite*/ nur @media screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Mobile – Hinweis: Design für 480px Breite */ @media nur Bildschirm und (min-width: 480px) und (max-width: 767px) ( .container ( width: 70%; ) )

Das ist alles. Unsere wundervolle Seite mit dem umfangreichen Titel „Portfolio“ ist fertig. Jetzt müssen Sie sie nur noch mit Ihren ebenso wunderbaren und herausragenden Werken füllen und der ganzen Welt zur Schau stellen. Sie können immer noch ruhig, bescheiden und stolz auf sich sein. Die Hauptsache ist, es in dieser Angelegenheit nicht zu übertreiben.
Schauen Sie sich das Beispiel noch einmal an und nehmen Sie ggf. den Quellcode mit; in aller Ruhe und in ruhiger häuslicher Umgebung können Sie diese Arbeit zur Perfektion bringen.

Bei der Erstellung der Lektion wurde folgendes Material verwendet: . Dort befindet sich die originale, makellose, frisch aus der Feder des Autors stammende Portfolioseite.

Viel Glück an alle und genießt den Rest des kurzen Sommers!

1. Implementierung eines Portfolios mithilfe der jQuery-Galerie

Projekt-Miniaturansichten scrollen, wenn Sie den Mauszeiger in der linken Spalte bewegen. Im Inhaltsbereich wird ein größeres Bild mit dem Projektnamen, der Beschreibung und einer Liste der verwendeten Technologien angezeigt. Wenn Sie zwischen den Miniaturansichten wechseln, ändern sich die Projektinformationen mit einem atemberaubenden Animationseffekt. Wenn Sie auf der Beschreibungsseite auf ein Bild klicken, wird es mithilfe einer jQuery-Animation vergrößert. Hervorheben möchte ich auch das umwerfend elegante Erscheinungsbild der gesamten Portfolio-Seite. Sehen Sie sich die Demo an.

2. Super Implementierung einer Portfolio-Site mit CSS und jQuery

Hervorragende Umsetzung der Portfolio-Website eines Fotografen. Wenn Sie auf einen Menüpunkt klicken, wird aus über den Bildschirm verteilten Quadraten ein Bereich mit Inhalten fester Höhe und Breite zusammengesetzt. Um mehr Informationen in einem festen Bereich unterzubringen, kann der Inhalt gescrollt werden. Ungewöhnlich ist die Umsetzung der Darstellung von Werken aus dem Portfolio: Beim Klick auf das Miniaturbild wird das Foto als Hintergrundbild angezeigt, das bei Änderung der Browserfenstergröße automatisch skaliert wird.

3. Portfoliowand mit jQuery

Eine originelle Lösung zum Erstellen eines Online-Portfolios. Projektblöcke (Miniaturansichten und eine Kurzbeschreibung mit Link) werden mehrfach hintereinander angezeigt; bei einem Wechsel des Browserfensters werden die Blöcke gleichmäßig auf der Seite verteilt und haben einen animierten Effekt. Jedes Projekt kann mehrere Miniaturbilder haben, deren Übergang mithilfe von Pfeilen erfolgt. Durch Klicken auf den Link wird eine Seite mit einer vollständigen Beschreibung geöffnet, auf der der Text mit Scrollen auf einem halbtransparenten Block fester Höhe platziert wird. Als Seitenhintergrund wird ein skalierbares Bild des Projekts verwendet. Sieht cool aus – schauen Sie sich die Demo an.

4. Reibungsloses Scrollen der jQuery-Seite

Implementierung von vertikalem und horizontalem Scrollen.

5. jQuery-Plugin „Draggable Image Boxes Grid“

Ein ziehbares Raster bestehend aus Inhaltsblöcken und Bildern. Das Raster kann mit der Maus verschoben werden (beliebige Maustaste drücken und in die gewünschte Richtung ziehen). Wenn Sie auf das Miniaturbild klicken, wird das Hauptbild auf die volle Bildschirmbreite erweitert. Wenn Sie auf einen dunklen Block mit Text klicken, öffnet sich ein Bereich mit einer detaillierteren Beschreibung.

6. Einseitige Portfolio-Website

Einseitige Website mit animierten Inhaltsänderungen. Navigieren Sie auf der Demoseite durch die Menüregisterkarten, um den Effekt zu sehen.

7. Umstellung des Blockanzeigetyps auf jQuery

Mit diesem jQuery-Plugin „Switch Display Options“ können Sie einen Schalter auf der Seite implementieren, mit dem der Besucher von einer tabellarischen Anzeige der Informationen zu einer Vollansicht mit einer Beschreibung der Blöcke wechselt. Perfekt für die Portfolioumsetzung.

8. Vorlage für eine Restaurant-Website mit jQuery-Galerie und Google-Karte

Eine originelle jQuery-Lösung, die für eine Café-Website erstellt wurde. Die Vorlage implementiert eine interessante jQuery-Galerie zur Anzeige von Gerichten aus der Speisekarte. Die Bilder in der Galerie werden je nach Größe des Browserfensters skaliert. Zunächst werden in der Galerie Miniaturbilder mit dem Namen und einer kurzen Beschreibung der Gerichte angezeigt, während das Foto in Originalgröße abgedunkelt im Hintergrund erscheint. Navigieren Sie mit den Pfeilen oder dem Mausrad zwischen den verfügbaren Fotos. Wenn Sie im Galeriemodus mit der Maus klicken, werden die Miniaturansichten mit Beschreibungen entfernt und Sie können die großen Originalbilder über die gesamte Breite des Fensters anzeigen. Um von der Galerie zum Site-Menü zurückzukehren, klicken Sie auf den Link in der oberen rechten Ecke. Neben der schicken jQuery-Galerie ist eine Karte von Google sehr wirkungsvoll in das Template integriert.

9. Plasm The Wall-Plugin

Erstellen einzigartiger „Wände“ aus Fotos oder HTML-Blöcken, die mit der Maus innerhalb eines festen Bereichs über den Bildschirm gezogen werden können.

10. Plugin zur Darstellung von Elementen in einem Kreis

Zeigt verschiedene Elemente auf der Seite entlang eines Kreises mit einem bestimmten Durchmesser an.

11. Platzhalterseite „Site in Entwicklung“

Die Seite verfügt über die Möglichkeit, eine E-Mail-Adresse zu senden, die in der Datenbank erfasst wird und an die eine Benachrichtigung über die Öffnung der Website gesendet werden kann. Die Seite ist außerdem mit einer kleinen Diashow dekoriert, die auf dem jQuery-Plugin Nivo Slider v basiert. 2.3.

12. QuickFlip 2-Plugin

Mit seiner Hilfe können Sie einen interessanten Effekt einer rotierenden Visitenkarte erzeugen, wenn Sie auf einen Link klicken.

13. JQuery-Klickkarte

Die Idee besteht darin, Benutzerklicks zu verfolgen. Um das Plugin in Aktion auf der Demoseite zu sehen, klicken Sie mit der Maus und dann auf die Schaltfläche „Analysieren“. Und die Punkte, auf die Sie mit der Maus geklickt haben, werden auf einem durchscheinenden Hintergrund angezeigt.

Implementierung einer schönen Bildschirmtastatur. Man weiß nie, es wird sich für etwas als nützlich erweisen.

15. jQuery-Haftnotizen

Umsetzung von Notizblättern. Der Text kann bearbeitet werden und die Notizen selbst können gelöscht oder auf dem Bildschirm verschoben werden. Um ein Beispiel zu sehen, gehen Sie auf der Demoseite zur Registerkarte „Demo“.

16. jQuery-Bewertung 17. HoverAttribute

Interessantes Linkdesign: Wenn Sie mit der Maus über einen Link fahren, ändert sich sein Anker. Sieht gut aus.

18. jQuery Fancy Captcha für Registrierungsformular

Implementierung von Captcha für das Anmeldeformular. Das Plugin besteht aus einer Reihe von Zahlen, die durch Ziehen in aufsteigender Reihenfolge eingestellt werden müssen. Eine recht interessante Möglichkeit, zu bestätigen, dass die Registrierung von einer echten Person und nicht von einem Roboter durchgeführt wird.

Am unteren Bildschirmrand befinden sich Schaltflächen, mit denen Sie die Seite sanft nach oben oder unten scrollen können.

20. Übersetzer. jQuery-Plugin „jTextTranslate“

Das Plugin nutzt die Google Language API und kann Texte in alle von Google bereitgestellten Sprachen übersetzen. Zum Übersetzen müssen Sie auf das Symbol neben dem Absatz klicken und aus der Dropdown-Liste die Sprache auswählen, in die Sie übersetzen möchten.

21. jQuery-Plugin für die Seitennavigation

Hervorragende Implementierung von Scroll-Links für die Seitennavigation. Implementiert mit jQuery.

22. jQuery-Plugin „Notizen“

Mit diesem jQuery-Plugin können Sie „Papier“-Notizen auf Ihrer Website implementieren.

23. jQuery-Plugin „Catch404“ 24. jQuery-Plugin jBreadCrumb

Plugin zum Erstellen einer animierten Breadcrumb-Navigationskette

25. „Reel“-Plugin 26. jQuery „Dance Floor“-Plugin

jQuery-Plugin zur Implementierung einer Produktseite. Wenn Sie auf ein Produktbild klicken, erscheint dessen Beschreibung.

27. jQuery-Plugin „3D-Label-Cloud“ 28. Volumetrische CSS-Schaltflächen 29. Animiertes horizontales Scrollen der Seite

jQuery-Effekt des vertikalen Seitenscrollens. Perfekt für die Umsetzung von One-Page-Websites und Portfolio-Websites. Um den Effekt anzusehen, klicken Sie auf den Menüpunkt auf der Demoseite.

30. jQuery-Plugin „Bewertungssystem“

jQuery-Effekt zur Implementierung der Auswertung von etwas. Die Farbe der Kreise und des darunter liegenden Textes ändert sich je nachdem, über welchem ​​Kreis sich der Mauszeiger befindet.

31. jQuery Panel Magic

Ein Plugin, das die Site-Navigation implementiert. In diesem Fall wird Ihre Site als Raster von Dokumenten dargestellt, zwischen denen ein Übergang mit einem interessanten jQuery-Effekt erfolgt.

Mit diesem Plugin können Sie ganz einfach kleine Websites und Webanwendungen erstellen. Es wird auch auf Portfolio-Websites gut aussehen.

32. Ladeanzeige auf Mootools, „MoogressBar“-Plugin

Effektive Ladeanzeige.

33. Mootools-Plugin „CwComplete“

Beim Ausfüllen eines Felds schlägt das Plugin mögliche Optionen zum Ausfüllen mit Ajax vor, während es filtert und nur die Optionen anzeigt, die dem bereits in das Feld eingegebenen Text entsprechen.

34. Großartiger Ajax-Chat mit jQuery und CSS3

Bevor ein Gespräch beginnt, muss der Besucher seinen Spitznamen und seine E-Mail-Adresse eingeben. In der rechten Spalte wird angezeigt, wie viele Personen im Chat angemeldet sind. Verwendete Technologien: PHP, MySQL, jQuery, CSS.

35. Implementierung der Seite „Projekt vorschlagen“.

Besucher können einen neuen Vorschlag hinzufügen oder für einen bestehenden stimmen. Eine ausgezeichnete Lösung für diejenigen, die herausfinden möchten, was ihr Publikum über die Website denkt. Sie können diese Seite auch nutzen, um neue Ideen für die Weiterentwicklung Ihres Projekts zu sammeln. Verwendete Technologien: PHP, MySQL, jQuery, CSS

36. Implementierung von Abstimmungen/Umfragen mit PHP und jQuery 37. Abstimmungen mit Ajax „TinyEditor“

Genaue Durchführung von Umfragen auf der Website. Verwendete Technologien: JQuery, Ajax, PHP und MySQL.

Eine sehr interessante Lösung zur Implementierung von Abstimmungen auf einer Website. Indem Sie Blöcke nach oben und unten ziehen und die Bilder mit der Maus anfassen, können Sie sie in beliebiger Reihenfolge auf der Seite anordnen. Je höher Sie den Block verlassen, desto besser haben Sie ihn bewertet. Wenn der Block ganz unten platziert ist, bedeutet dies, dass er Ihnen am wenigsten gefallen hat. Nachdem Sie die Blöcke in der gewünschten Reihenfolge platziert haben, müssen Sie auf die Schaltfläche „Umfrage senden“ klicken, damit die Abstimmung berücksichtigt wird. Auf der Ergebnisseite werden die Abstimmungsergebnisse und die Anzahl der Besucher angezeigt, die abgestimmt haben. Verwendete Technologien: CSS, PHP, MySQL, jQuery.

Ein einfaches Ajax-Kommentarsystem mit Überprüfung der Richtigkeit der eingegebenen Informationen. Kommentare werden in einer Datenbank gespeichert. Implementiert mit: PHP, MySQL, CSS, jQuery.

40. Zähler der Anzahl der Dateidownloads 41. Hinweise zur Seite mit PHP

Verwendete Technologien: PHP, jQuery, CSS.

Wenn Sie durch Menüelemente navigieren, wird der Inhalt geladen, ohne dass die Seite neu geladen werden muss. Verwendete Technologien: PHP, jQuery, CSS.

43. jQuery-Site-Suche mit Technologie von Google

Implementierung der Site-Suche mithilfe der Google AJAX Search API. Sie können dem Besucher die Möglichkeit geben, sowohl auf Ihrer Website als auch im Internet zu suchen. In diesem Fall kann die Suche nicht nur nach Seiten der Website, sondern auch nach Bildern und Multimediadateien erfolgen.

44. jQuery-Effekt der Überlagerung einer Beschreibung mit einem Bild

Ein sehr interessanter Effekt, der bei der Umsetzung eines Portfolios genutzt werden kann. Wenn Sie auf ein Bild klicken, wird es mit einem durchscheinenden Hintergrund dunkler und es erscheint eine Beschriftung, die beschreibt, worauf Sie achten sollten.

45. Implementieren einer Frage- und Antwortseite mit jQuery

jQuery-Implementierung der FAQ-Seite auf der Website. Oben auf der Seite wird eine Liste mit Fragen angezeigt. Wenn Sie auf eine Frage klicken, scrollt die Seite reibungslos zu der von Ihnen ausgewählten Frage und die aktive Frage mit ihrer Antwort wird in einer anderen Farbe hervorgehoben. Im aktiven Antwortfeld erscheint außerdem ein Link zur Rückkehr zur Fragenliste.

46. ​​​​Website auf Ajax. Der Inhalt wird geladen, ohne dass die Seite neu geladen werden muss. 47. Hintergrund- und Textfarben mit jQuery ändern

Die Farbe ändert sich, wenn Sie mit der Maus darüber fahren. Sie können die Farbe nach dem Zufallsprinzip ändern.

48. Site-Leitfaden mit jQuery

Mit diesem interessanten Plugin können Sie dem Besucher die Hauptfunktionen Ihrer Website vorstellen, wenn er diese zum ersten Mal besucht. Wenn die Seite geladen wird, erscheint in der oberen rechten Ecke ein Block, der Sie auffordert, einen Rundgang durch die Website zu machen. Wenn ein Besucher Ihre Seite zum ersten Mal besucht, kann er sich anhand einer Kurzanleitung mit den Hauptfunktionen vertraut machen. In diesem Fall wird die Seite abgedunkelt und die notwendigen Blöcke bei jedem Schritt markiert. Wenn der Besucher bereits einmal auf Ihrer Seite war, kann er einfach das Fenster schließen und einen Rundgang durch die Seite anbieten.

49. Virtueller Rundgang durch die Joyride Kit-Website

Mit diesem Plugin können Sie dem Besucher die Hauptfunktionalität der Seite vorstellen. Dies erfolgt in Form einer sequentiellen Popup-Beschreibung der Elemente. Der Besucher kann alle Tipps einsehen, indem er auf die Schaltfläche „Weiter“ klickt, oder den Online-Rundgang (sofern er nicht zum ersten Mal auf diese Seite gelangt) über das Kreuz schließen.