Bildergalerie in jQuery. Bildergalerie in jQuery mit interessantem Effekt jquery gallery full screen
1. Implementieren des Portfolios mithilfe der jQuery-Galerie
Projekt-Miniaturansichten werden gescrollt, wenn Sie die Position des Mauszeigers in der linken Spalte ändern. Der Inhaltsbereich zeigt ein vergrößertes Bild mit dem Projektnamen, der Beschreibung und einer Liste der verwendeten Technologien an. Während Sie zwischen Miniaturansichten navigieren, werden Projektinformationen in einem atemberaubenden animierten Effekt miteinander ausgetauscht. Wenn Sie auf der Beschreibungsseite auf das Bild klicken, wird es auch mithilfe der jQuery-Animation vergrößert. Ich möchte auch das atemberaubende, elegante Erscheinungsbild der gesamten Portfolio-Seite hervorheben. Siehe Demo.
2. Super Implementierung einer Portfolio-Site mit CSS und jQuery
Hervorragende Implementierung der Portfolio-Site eines Fotografen. Wenn Sie auf einen Menüpunkt klicken, wird ein Bereich mit einem Inhalt fester Höhe und Breite aus über den Bildschirm verteilten Quadraten zusammengesetzt. Um weitere Informationen im festen Bereich zu platzieren, wird ein Bildlauf durch Inhalte bereitgestellt. Die Implementierung der Darstellung von Werken aus dem Portfolio erfolgt auf ungewöhnliche Weise: Wenn Sie auf eine Miniaturansicht klicken, wird das Foto als Hintergrundbild angezeigt, das automatisch skaliert wird, wenn die Größe des Browserfensters geändert wird.
3. jQuery-Portfolio-Wand
Eine originelle Lösung zum Erstellen eines Online-Portfolios. Projektblöcke (Miniaturansichten und eine kurze Beschreibung mit einem Link) werden mehrere hintereinander angezeigt. Wenn das Browserfenster geändert wird, werden die Blöcke mit einem animierten Effekt gleichmäßig auf der Seite verteilt. Jedes Projekt kann mehrere Miniaturbilder enthalten, deren Übergang mithilfe der Pfeile ausgeführt wird. Durch Klicken auf den Link wird eine vollständige Beschreibungsseite mit dem Text geöffnet, der auf einem halbtransparenten Bildlaufblock mit fester Höhe platziert wird. Als Seitenhintergrund wird ein skalierbares Projektbild verwendet. Sieht cool aus - schauen Sie sich die Demo an.
4. Reibungsloses Scrollen der jQuery-Seite
Implementierung von vertikalem und horizontalem Scrollen.
5. Plugin jQuery "Draggable Image Boxes Grid"
Ein ziehbares Raster aus Inhaltsblöcken und Bildern. Das Raster kann mit der Maus gezogen werden (drücken Sie eine beliebige Maustaste und ziehen Sie in die gewünschte Richtung). Wenn Sie auf eine Miniaturansicht klicken, wird das Hauptbild auf die gesamte Bildschirmbreite erweitert. Wenn Sie auf einen dunklen Block mit Text klicken, wird ein Bereich mit einer detaillierteren Beschreibung angezeigt.
6. Einseitige Portfolio-Site
Einseitige Website mit animierter Inhaltsänderung. Gehen Sie auf der Demoseite die Menüregisterkarten durch, um den Effekt zu sehen.
7. Umschalten der Anzeige von Blöcken auf jQuery
Mit Hilfe dieses jQuery-Plugins "Anzeigeoptionen wechseln" können Sie einen Schalter auf der Seite implementieren, mit dessen Hilfe der Besucher von einer Tabellenanzeige mit Informationen zu einer Vollansicht mit Blockbeschreibungen wechselt. Perfekt für die Portfolio-Implementierung.
8. Vorlage für eine Restaurant-Website mit jQuery-Galerie und Karte von Google
Original jQuery-Lösung für Cafés. Die Vorlage verfügt über eine interessante jQuery-Galerie zum Anzeigen von Gerichten aus dem Menü. Die Bilder in der Galerie werden basierend auf der Größe des Browserfensters skaliert. Zunächst werden in der Galerie Miniaturansichten mit dem Namen und kurzen Beschreibungen der Gerichte angezeigt, wobei das Foto in voller Größe im Hintergrund schattiert angezeigt wird. Die Navigation zwischen den verfügbaren Fotos erfolgt mit den Pfeilen oder dem Mausrad. Wenn Sie im Galeriemodus klicken, werden die Miniaturansichten mit der Beschreibung entfernt und Sie können die großen Originalbilder anzeigen, die auf die gesamte Breite des Fensters gestreckt sind. Um von der Galerie zum Site-Menü zurückzukehren, klicken Sie auf den Link in der oberen rechten Ecke. Neben der wunderschönen jQuery-Galerie ist eine Karte von Google sehr effektiv in die Vorlage integriert.
9. Plasm The Wall Plugin
Erstellen einer Art "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 zum Anzeigen von Elementen in einem Kreis
Zeigen Sie auf der Seite verschiedene Elemente entlang eines Kreises mit einem bestimmten Durchmesser an.
11. Stichleitungsseite "Baustelle im Bau"
Die Seite kann eine E-Mail-Adresse senden, die in der Datenbank gespeichert ist und an die Sie eine Benachrichtigung über das Öffnen der Site senden können. Die Seite ist auch mit einer kleinen Diashow dekoriert, die auf Basis des jQuery-Plugins Nivo Slider v implementiert wurde. 2.3.
12. QuickFlip 2 Plugin
Mit ihm können Sie einen interessanten rotierenden Visitenkarteneffekt erzielen, wenn Sie auf einen Link klicken.
13. jQuery-Clickmap
Die Idee ist, Benutzerklicks zu verfolgen. Um das Plugin auf der Demoseite in Betrieb zu sehen, klicken Sie mit der Maus und dann auf die Schaltfläche "Analyse". Auf einem durchscheinenden Hintergrund werden die Punkte angezeigt, an denen Sie mit der Maus geklickt haben.
Implementierung einer schönen Bildschirmtastatur. Man weiß nie, es wird für etwas nützlich sein.
15. jQuery Notes
Implementierung von Flugblättern mit Notizen. Der Text kann bearbeitet und die Notizen selbst können gelöscht oder auf dem Bildschirm verschoben werden. Um ein Beispiel zu sehen, gehen Sie zur Demoseite auf der Registerkarte "Demo".
16. jQuery-Bewertung
17. HoverAttribute
Interessantes Design von Links: Wenn Sie mit der Maus über einen Link fahren, ändert sich dessen Anker. Es sieht cool aus.
18.jQuery Fancy Captcha für das Anmeldeformular
Captcha-Implementierung für das Registrierungsformular. Das Plugin besteht aus einer Reihe von Zahlen, die durch Ziehen und Ablegen in aufsteigender Reihenfolge festgelegt werden müssen. Eine interessante Möglichkeit, um zu bestätigen, dass es sich bei der Registrierung um eine echte Person und nicht um einen Roboter handelt.
Am unteren Bildschirmrand befinden sich Schaltflächen, mit denen Sie problemlos auf der Seite nach oben oder unten scrollen können.
20. Übersetzer. jQuery Plugin "jTextTranslate"
Das Plugin verwendet die Google Language API und kann Text in alle von Google bereitgestellten Sprachen übersetzen. Um zu übersetzen, müssen Sie auf das Symbol neben dem Absatz klicken und die Sprache, die Sie übersetzen möchten, aus der Dropdown-Liste auswählen.
21. jQuery-Paginierungs-Plugin
Hervorragende Implementierung von Bildlauf-Links für die Seitennavigation. Implementiert mit jQuery.
22. jQuery Notes-Plugin
Mit diesem jQuery-Plugin können Sie "Papier" -Notizen auf Ihrer Site implementieren.
23. jQuery Plugin "Catch404"
24. jQuery jBreadCrumb-Plugin
Plugin zum Erstellen einer animierten Breadcrumbs-Navigationskette
25. Plugin "Reel"
26. jQuery Plugin "Dance Floor"
jQuery-Plugin für die Implementierung der Produktseite. Wenn Sie auf das Produktbild klicken, wird dessen Beschreibung angezeigt.
27. jQuery Plugin "3D Cloud of Places"
28. Sperrige CSS-Tasten
29. Animiertes horizontales Scrollen von Seiten
vertikaler jQuery-Bildlaufeffekt. Perfekt für die Implementierung von einseitigen Websites und Portfolio-Websites. Um den Effekt anzuzeigen, klicken Sie auf der Demoseite auf einen Menüpunkt.
30. jQuery Plugin "Bewertungssystem"
jQuery-Effekt für die Implementierung der Bewertung von etwas. Die Farbe der Kreise und der Text darunter ändern sich je nachdem, über welcher Mauszeiger sich der Mauszeiger befindet.
31. jQuery Panel Magic
Ein Plugin, das die Site-Navigation implementiert. Gleichzeitig 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, Plugin "MoogressBar"
Effektive Ladeanzeige.
33. Mootools Plugin "CwComplete"
Beim Ausfüllen des Felds werden Sie vom Plugin nach möglichen Optionen zum Ausfüllen mit Ajax gefragt, während nur die Optionen gefiltert und angezeigt werden, die dem bereits in das Feld eingegebenen Text entsprechen.
34. Großartiger Ajax-Chat mit jQuery und CSS3
Vor dem Beginn eines Gesprächs muss ein Besucher seinen Spitznamen und seine E-Mail-Adresse eingeben. Die rechte Spalte zeigt, wie viele Personen im Chat angemeldet sind. Verwendete Technologien: PHP, MySQL, jQuery, CSS.
35. Implementierung der Seite "Pro Projekt vorschlagen"
Besucher können einen neuen Vorschlag hinzufügen oder für einen vorhandenen abstimmen. Eine hervorragende Lösung für diejenigen, die die Meinung ihres Publikums über die Website erfahren möchten. Auf dieser Seite können auch neue Ideen für die weitere Entwicklung Ihres Projekts gesammelt werden. Verwendete Technologien: PHP, MySQL, jQuery, CSS
36. Implementierung einer Abstimmung / Umfrage mit PHP und jQuery
37. Abstimmung über Ajax "TinyEditor"
Sorgfältige Durchführung von Umfragen auf der Website. Verwendete Technologien: jQuery, Ajax, PHP und MySQL.
Eine sehr interessante Lösung für die Implementierung von Abstimmungen auf der Website. Durch Ziehen der Blöcke nach oben und unten und Greifen der Bilder mit der Maus 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 Sie den Block ganz unten platzieren, 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.
Einfaches Ajax-Kommentarsystem mit Validierung der Informationseingabe. Kommentare werden in der Datenbank gespeichert. Implementiert mit: PHP, MySQL, CSS, jQuery.
40. Zähler für die Anzahl der Dateidownloads
41. Hinweise auf einer Seite mit PHP
Verwendete Technologien: PHP, jQuery, CSS.
Beim Navigieren durch die Menüelemente wird der Inhalt geladen, ohne die Seite neu zu laden. Verwendete Technologien: PHP, jQuery, CSS.
43 jQuery-Website-Suche mit Technologie von Google
Implementieren der Websitesuche mithilfe der Google AJAX-Such-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 auf den Seiten der Site, sondern auch auf Bildern und Multimediadateien durchgeführt werden.
44. Überlagerungseffekt der jQuery-Beschreibung auf das Bild
Ein sehr interessanter Effekt, der bei der Implementierung eines Portfolios verwendet werden kann. Wenn Sie auf das Bild klicken, wird es mit einem durchscheinenden Hintergrund abgedunkelt, und eine Inschrift mit einer Beschreibung dessen, worauf Sie achten sollten.
45. Implementieren einer Q & A-Seite mit jQuery
jQuery-Implementierung der FAQ-Seite auf der Site. Eine Liste der Fragen wird oben auf der Seite angezeigt. Wenn Sie auf eine Frage klicken, wird die Seite reibungslos zur ausgewählten Seite verschoben, und die aktive Frage mit der Antwort darauf wird in einer anderen Farbe hervorgehoben. Außerdem wird im aktiven Antwortfeld ein Link angezeigt, um zur Liste der Fragen zurückzukehren.
46. \u200b\u200bWebsite auf Ajax. Der Inhalt wird ohne erneutes Laden der Seite geladen
47. Ändern Sie die Hintergrund- und Textfarbe mit jQuery
Die Farbe ändert sich, wenn Sie den Mauszeiger bewegen. Sie können die Farbe zufällig ändern.
48. Site Guide Verwenden von jQuery
Mit Hilfe dieses interessanten Plugins können Sie den Besucher mit den Grundfunktionen Ihrer Website vertraut machen, wenn er zum ersten Mal darauf gekommen ist. Wenn die Seite geladen wird, wird in der oberen rechten Ecke ein Block mit dem Vorschlag angezeigt, eine Tour durch die Site zu machen. Wenn ein Besucher Ihre Website zum ersten Mal besucht, kann er sich anhand eines kleinen Leitfadens mit den Hauptfunktionen vertraut machen. In diesem Fall wird die Seite abgedunkelt und die erforderlichen Blöcke werden bei jedem Schritt mit einer Markierung markiert. Wenn der Besucher bereits zuvor auf Ihrer Website war, kann er einfach das Fenster schließen und eine Tour durch die Website anbieten.
49. Virtueller Rundgang durch die Website "Joyride Kit"
Mit diesem Plugin können Sie den Besucher mit den Hauptfunktionen der Seite vertraut machen. Dies erfolgt in Form einer sequentiellen Popup-Beschreibung der Elemente. Der Besucher kann alle Tipps anzeigen, indem er auf die Schaltfläche Weiter klickt oder die Online-Tour (falls er nicht zum ersten Mal auf diese Seite gelangt) mit dem Kreuz schließt.
1 |
Wie oben erwähnt, sind Listenelemente Bilder in der Galerie. Jedes Element der Liste enthält zusammengesetzte. Dies ist das Bild selbst oder vielmehr seine Miniaturansicht sowie eine Beschreibung. Das Vorschaubild ist ein Link zum Hauptbild. Das Attribut rel ist erforderlich, um Javascript aufzurufen und das Hauptbild zu öffnen.
Vergessen Sie auch nicht zwei wichtige Dinge: Das Daten-ID-Attribut muss für das li-Listenelement eindeutig sein. Das Datentypattribut enthält die Kategorieklasse, deren Liste ich oben beschrieben habe. Es geht nur um das Markup.
CSS-Stile
Ich werde mich nicht auf Stile konzentrieren, da wir eine vorgefertigte Bibliothek verwenden Schönes Foto, die für die Vergrößerung des Bildes verantwortlich ist, und es gibt viel CSS-Code. Es ist jedoch anzumerken, dass es 5 Optionen für die Gestaltung des vergrößerten Bildes gibt, obwohl idealerweise nur 3, da bei zwei Optionen nur die Rundung entfernt wird.
Daher werde ich nur CSS-Stile für Miniaturansichten und eine Liste von Kategorien anzeigen.
1 | Portfolio-Kategorie (Rand-unten: 30px;) |
Grundsätzlich sollte bei Stilen alles klar sein. Um die Kategorien auszurichten, wird die Anzeigeeigenschaft auf Inline gesetzt. Stellen Sie die Hintergrundfarbe (weiß) und einen Versatz von 10 Pixel ein, um dem Bild einen Strich zu verleihen. Die Größen der Listenelemente werden im Portfolio-Bereich li festgelegt.
jQuery
Und schließlich das Wichtigste, wofür dann die ganze Lektion. Dies ist jQuery-Code. Beginnen wir mit dem Filtern von Bildern nach Kategorien.
1 | // Alle untergeordneten Elemente des Portfolio-Bereichs auswählen und in die Variable schreiben $ (". Portfolio-Kategorie li") .click (Funktion (e) ( var filterClass \u003d $ (this) .attr ("class") .split ("") .slice (- 1) [0]; if (filterClass \u003d\u003d "all") ( LightboxPhoto (); |
Mit der clone () -Methode und dem Selektor wählen wir alle untergeordneten Elemente des .portfolio-Bereichs aus und schreiben sie in die $ data-Variable. Als nächstes verfolgen wir den Klick auf eine der Kategorien, das li-Element in der Liste mit der .portfolio-category-Klasse. Wir machen alle Kategorien inaktiv, indem wir removeClass ("aktiv") entfernen. Wenn dies nicht erfolgt, sind im Laufe der Zeit alle Kategorien aktiv und die Filterung wird gestoppt.
Da wir auf ein Listenelement klicken, enthält der Selektor ein Listenelement, dh li, wir nehmen den Wert des Klassenattributs daraus und verwenden die Aufteilungsmethode, um den Klassennamen in mehrere Teile aufzuteilen. Der Rand ist ein Leerzeichen (dh wenn die Klasse " all active "dann erhalten wir nach dem Teilen ein Array von" all "und" active "). Anschließend wählen wir mit der Slice-Methode das erste Element des Arrays aus (in unserem Fall "all") und schreiben das resultierende Ergebnis in die Variable filterClass. Wenn kein Leerzeichen vorhanden war, ändert sich der Name der Klasse nicht.
Als nächstes prüfen wir, ob die Variable filterClass die Zeichenfolge enthält allesAnschließend wählen wir mit der .find-Methode alle Elemente mit der Klasse Portfolio-Element2 aus dem oben beschriebenen $ data-Array aus. Die ausgewählten Elemente (und dies sind alle Elemente der Liste, dh alle Bilder) werden in die Variable filteredData eingefügt.
Andernfalls, wenn filterClass nicht gleich ist allesIn der Variablen filterData werden dann nicht alle Elemente der Liste platziert, sondern nur diejenigen, deren Datentypattribut mit der Kategorieklasse übereinstimmt. Kurz gesagt, Artikel gehören nur zu einer Kategorie.
Und am Ende übertragen wir die resultierende Variable in die Bibliothek jquery Treibsand, die Bilder filtert. Hier dreht sich alles um das Filtern.
Nun zur Vergrößerung des Bildes im Popup. Hier ist alles viel einfacher.
1 | jQuery ("a") .prettyPhoto (( |
Ein Klick wird auf einen Link verfolgt, dessen rel-Attribut mit prettyPhoto beginnt. Dann kommt die Bibliothek ins Spiel schönes Fotound das Bild wird auf wundersame Weise vergrößert. Übrigens übergeben wir auch einige Parameter. Wie Animationsgeschwindigkeit - schnell, Diashow-Verzögerung - 5 Sekunden, Facebook-Thema (es gibt insgesamt 5 Themen im Ordner images / prettyPhoto) und das Verbieten, den Namen des Bildes anzuzeigen und den Mauszeiger zu vergrößern. Vollständige Dokumentation für schönes Foto kann gefunden werden
Abonnieren Sie, um über die neuesten Artikel und Lektionen auf dem Laufenden zu bleiben
Ich habe lange Zeit ein Thema für das heutige Thema gewählt. Infolgedessen ist mir aufgefallen, dass wir mit noch keine Auswahl getroffen haben bildergalerien... Meiner Meinung nach ein tolles Thema, da galerien sind auf vielen Websites vorhanden. Um ehrlich zu sein, sind sie nicht alle sehr attraktiv. Berücksichtigung der aktuellen Entwicklungstrends jquery, html5 und so weiter. Ich dachte, dass die Lösungen bereits viel attraktiver sein sollten als die, denen ich zuvor begegnet bin. So. Nachdem ich einen Tag verbracht hatte, gelang es mir, eine große Anzahl von Skripten zu finden. Von diesem ganzen Berg habe ich mich entschieden, nur auszuwählen, weil ich liebe, wie Sie bereits aus früheren Beiträgen bemerkt haben.
Bildergalerie gilt nicht nur für den Fall mit Fotoalben... Das Skript kann verwendet werden, ich denke, es wird noch korrekter sein, als portfolio für Fotografen, Designer usw. Jquery-Effekte wird dazu beitragen, die Aufmerksamkeit der Besucher auf sich zu ziehen und Ihrer Website Eleganz zu verleihen.
So. Zu Ihrer Aufmerksamkeitssammlung jquery Bildergalerie Plugins für die Website.
Vergessen Sie nicht zu kommentieren und sich zu erinnern, um diese Sammlung nicht zu verlieren, können Sie sie zu Ihren Favoriten hinzufügen, indem Sie auf den Stern am Ende des Artikels klicken.
FOTOBOX
Kostenlose, leichte und reaktionsschnelle Bildergalerie, in denen alle Effekte, Übergänge mit css3 gemacht werden. Ideal zum Erstellen einer Foto-Website.S Galerie
Attraktiv Jquery Bildergalerie Plugin... Die Animation funktioniert mit CSS3.DIAMONDS.JS
Original plugin zum Erstellen einer Bildergalerie... Miniaturen sind wie geformt diamantdas ist im Moment sehr beliebt. Dieses Formular wird mit css3 erstellt. Der einzige Nachteil dieser Galerie ist das Fehlen eines Leuchtkastens, mit dem ein Foto in voller Größe geöffnet werden kann. Das heißt, Sie müssen das Lightbox-Plugin mit Krabben verschrauben. Dieses Skript generiert ein ansprechendes rautenförmiges Bildraster.Superbox
Moderne Bildergalerie mit Jquery, CSS3 und HTML5... Wir sind alle daran gewöhnt, dass beim Klicken auf die Vorschau das vollständige Bild in einem Leuchtkasten (Popup-Fenster) geöffnet wird. Die Entwickler dieses Plugins haben entschieden, dass der Leuchtkasten veraltet ist. Die Bilder in dieser Galerie werden unterhalb der Vorschau geöffnet. Schauen Sie sich die Demo an und stellen Sie sicher, dass diese Lösung viel moderner aussieht.|