Fancybox für Wordpress – schöne Bilder und funktionale Inhalte mit einem Klick. Webdesign und Suchmaschinenoptimierung

Hallo zusammen! Heute werden wir mit Ihnen über ein so leistungsstarkes und nützliches Tool wie die FancyBox-Bibliothek sprechen. Dieses jQuery-Plugin bietet die Möglichkeit, ein System von Popup-Fenstern, auch bekannt als Lightboxes, modale Fenster oder Popups, zu Website-Seiten hinzuzufügen. Das Popup-Fensterformat ist in der Webentwicklung sehr beliebt und wird für verschiedene Zwecke verwendet. Mit der Bibliothek können Sie: HTML-Code und TXT-Dateien, Formulare und Informationsnachrichten öffnen, Inhalte aus anderen Quellen mithilfe von Ajax-Anfragen in Popups öffnen, Skripte ausführen, Videos von YouTube, Vimeo-Diensten und Flash-Videos abspielen.

Und die häufigste Art, FancyBox in einem WordPress-Blog zu verwenden, ist das Vergrößern von Bildern, sowohl einzeln als auch kombiniert in einer Galerie. Beispiele für die Implementierung aller oben genannten Optionen finden Sie auf der offiziellen Website des Plugins – fancybox.net. Und in diesem Artikel schauen wir uns an, wie wir die Bibliothek mit den Plugins FancyBox For WordPress und Easy FancyBox ganz einfach in unseren Blog integrieren und deren Grundeinstellungen vornehmen können. Außerdem erfahren Sie, wie Sie FancyBox ohne Plugin mit WordPress verbinden.

FancyBox für WordPress: Bilder und Galerien wunderschön anzeigen

Wenn Sie in WordPress bereits mit Bildern gearbeitet und diese in Beiträgen und Seiten platziert haben, dann ist Ihnen aufgefallen, dass die Vorlage Bilder bei einer großen Erweiterung verkleinert. Und manchmal beeinträchtigt dies die korrekte Anzeige der Informationen, die Sie übermitteln wollten, da nicht alles analysiert werden kann. Sie können dem entgegenwirken, indem Sie in der Mediendatei einen Link zu Ihrer Person hinzufügen. Wenn Sie in diesem Fall jedoch auf das Bild klicken, wird es je nach Einstellung entweder im selben Fenster als ganze Seite oder in einem neuen Tab geöffnet. Stimmen Sie zu, beide Optionen sind nicht die bequemsten und erfordern völlig unangemessen zusätzliche Aktionen und Zeit vom Benutzer.

Um diese Unannehmlichkeiten zu beseitigen und die Anzeige von Bildern in einem WordPress-Blog zu verbessern, wurde ein spezielles Plugin, FancyBox For WordPress, entwickelt. Es dient dazu, dass der Besucher auf das Bild klicken und es über anderen Fenstern öffnen kann. So:

Lassen Sie uns das Plugin für unsere Website aus dem WordPress-Repository installieren.

Wir aktivieren FancyBox für WP und es beginnt sofort zu funktionieren und wendet es an Grundeinstellungen. Wir können dies überprüfen, indem wir zu unserem Blog gehen, ihn aktualisieren und auf eines der verfügbaren Bilder klicken.

In diesem Fall wird das Bild auf skaliert große Größen und wird in einem Popup-Fenster über dem restlichen Inhalt platziert, der leicht abgedunkelt ist. Um das modale Fenster zu schließen, können Sie entweder auf das Kreuz in der oberen rechten Ecke oder irgendwo auf der Seite außerhalb des Bildes klicken.

Wenn FancyBox For WordPress nicht funktioniert bzw. die Bilder nicht anklickbar sind, überprüfen Sie, ob die Einstellungen für die Dateianzeige richtig eingestellt sind, wenn Sie im Editor ein Bild zum Hochladen auswählen. Das Feld „Link“ muss auf „Medien“ eingestellt sein.

Zusätzlich zu den voreingestellten Optionen bietet FancyBox For WordPress auch flexiblere Einstellungen. Wir finden sie in der VI-Konsole im Menüpunkt „Einstellungen“ – „FancyBox for WP“. Wenn wir auf den Link klicken, sehen wir große Menge Registerkarten, die für die Bearbeitung bestimmter Parameter verantwortlich sind. Sie sind hauptsächlich mit der Veränderung des Aussehens der Bilder verbunden. Leider ist das Plugin komplett auf Englisch. Aber jetzt schauen wir uns die interessantesten Punkte an, die Sie möglicherweise benötigen, wenn die Standardeinstellungen nicht Ihren Anforderungen entsprechen.

Der Startreiter ist „Info“. Hier finden Sie Links zu Informationen über die Entwickler und das Produkt als Ganzes. Die Ersteller des Plugins sagen, dass die Basisversion der Einstellungen auch ohne diese ein recht attraktives Ergebnis liefert, wenn man sich nicht mit allen vorgeschlagenen Einstellungen befassen möchte. Sie bitten Sie auch darauf zu achten, dass, wenn Sie nach der Bearbeitung Änderungen nicht sofort bemerken, dies oft nicht bedeutet, dass FancyBox für WordPress nicht funktioniert. Wenn Sie beispielsweise ein Caching-Plugin installiert haben, müssen Sie nach dem Speichern von Änderungen den Cache leeren oder das Plugin deaktivieren, während Sie an den Einstellungen arbeiten.

Die nächste Registerkarte ist „Aussehen“. Auf dieser Seite können wir die grundlegenden Optionen anpassen, für die wir verantwortlich sind Aussehen Pop-ups. Wenn das Kontrollkästchen aktiviert ist, ist die Funktion aktiviert, andernfalls ist sie deaktiviert:

„Rand“ – Wählen Sie aus, ob ein Rahmen um das modale Fenster angezeigt werden soll. Der Standardwert ist Nein. Wenn wir die Option „Ja“ wählen, erscheint ein zusätzliches Feld zur Auswahl der Rahmenfarbe im Hexadezimalformat (#000000). Es gibt keine Möglichkeit, die Rahmenbreite anzupassen.
„Schließen-Schaltfläche“ – wir legen fest, ob die Lightbox eine Schaltfläche zum Schließen des Fensters (ein Kreuz) haben wird und wo sie sich befindet (Links (links) / Rechts (rechts) / Unten (unten) / Oben (oben)). Startwert – oben rechts;
„Padding“ – dieses Element ist dafür verantwortlich, in FancyBox für WordPress die Farbe und Breite des Abstands vom Rand des Popup-Fensters bis zum darin platzierten Bild festzulegen. Der Standardwert ist Weiß, 10 Pixel;
„Overlay-Optionen“ – Legen Sie die Eigenschaften des Hintergrunds fest, der unter dem Popup-Bild erscheint und den Inhalt der gesamten Seite abdeckt. Ursprünglich definiert: als Farbe – Grau, als Transparenz (Opazität) – 0,3. Die Transparenzeigenschaft liegt zwischen 0,0 und 1,0. Je niedriger der Wert, desto transparenter ist der Hintergrund. Wenn Sie dementsprechend den hinter dem modalen Fenster verbleibenden Inhalt vollständig ausblenden möchten, können Sie die Deckkraft auswählen: 1;
„Titel“ – wir legen fest, ob und wie die Bildunterschrift (d. h. der Wert des Titelattributs des Bildes) angezeigt wird. Hier können Sie die Position des Titels relativ zum Abstand des Popup-Fensters (Innen/Außen/Oben) und seine Farbe konfigurieren. Mit den Werten „Innen“ und „Außen“ wird der Text am unteren Rand des modalen Fensters bzw. darunter platziert. Und wenn Sie die Option „Über“ auswählen, wird der Titel über dem unteren Einzug, über dem Bild selbst auf einem dunklen, durchscheinenden Hintergrund platziert;
„Navigationspfeile“ – Wählen Sie, ob Navigationspfeile angezeigt werden sollen oder nicht. Sie erscheinen, wenn Sie mit der Maus über ein Bild fahren.

Gehen Sie zur Registerkarte „Animationen“. Hier konfigurieren wir die Funktionen, die für die Steuerung der Animation von Popup-Fenstern verantwortlich sind:

Bitte beachten Sie, dass diese Einstellungen nur auf die sich öffnenden/schließenden modalen Fenster angewendet werden können, deren Parameter „Übergangstyp“ auf „elastisch“ eingestellt ist.

Direkt nach den Feldern mit den Beschleunigungseinstellungen laden uns die Autoren von FancyBox For WP ein, den Links zu folgen und zu sehen, wie die von ihnen vorgeschlagenen Optionen für die Beschleunigungsfunktion funktionieren. (Der erste Link ist derzeit nicht verfügbar.)

Die nächste Registerkarte ist „Verhaltenseinstellungen“. Es ist für die Einstellung des Verhaltens des Popup-Fensters verantwortlich und hat den Status „mittel“. In diesem Zusammenhang warnen uns die Entwickler von FancyBox For WordPress, dass es besser ist, alles auf dieser Seite so zu lassen, wie es ist, es sei denn, wir wissen wirklich, wie man mit den hier aufgeführten Parametern umgeht. Daher werden wir nicht im Detail auf alle Optionen eingehen. Wofür jeder von ihnen verantwortlich ist, geht aus dem Screenshot hervor:

Die fünfte Registerkarte ist „Galerien“. Dies ist eine erweiterte Einstellungsebene für Bildergalerien:

„Eine Galerie für alle Bilder auf der Seite erstellen (Standard)“ – erstellt eine Galerie für alle Bilder auf der Seite (Standard). Das heißt, wenn sich mehrere Bilder auf der Seite befinden, werden diese standardmäßig vom Plugin zu einer Galerie zusammengefasst. Wenn wir also eines davon in einem modalen Fenster öffnen, können wir alle anderen sehen, indem wir durch die Bilder scrollen;
„Gruppieren Sie Bilder in der Galerie nicht automatisch (verwenden Sie diese Option, wenn Sie Galerien manuell mit erstellen möchten rel Attribut)“ – Bilder werden nicht automatisch in der Galerie zusammengeführt (verwenden Sie diese Option, wenn Sie eine Galerie manuell mithilfe des rel-Attributs erstellen möchten). Ich schlage vor, genauer zu erfahren, wie man diese Option von FancyBox für WordPress in der Praxis nutzt.

Nehmen wir an, dass Sie auf Ihrer Seite Material haben, das herkömmlicherweise in mehrere semantische Blöcke unterteilt ist. Zum Beispiel: Auf einer Seite platzieren Sie Bilder zur Veranschaulichung und auf der nächsten Seite Beispiele der erfolgreichsten Verkaufsseiten. Und Sie möchten, dass diese beiden Bildgruppen nicht in einem modalen Fenster gemischt werden, sondern in unterschiedlichen Leuchtkästen angezeigt werden. Um Ihren Plan umzusetzen, wählen Sie zunächst die Plugin-Option „Bilder in Galerie nicht automatisch gruppieren“ aus.

Öffnen Sie nun die gewünschte Publikation im Editor und wechseln Sie in den „Text“-Modus, also in den Modus, in dem der HTML-Code angezeigt wird. Finden Sie die erste Bildergruppe und alle Links (tag A), in dem jedes der Bilder eingeschlossen ist (tag Bild), weisen Sie ein Attribut mit einem Wert zu, der für alle gleich ist. Beispiel: rel = „gal1“.

Wiederholen Sie für die zweite Gruppe von Mediendateien dieselben Schritte, jedoch mit einem anderen rel-Wert, zum Beispiel: rel = "gal2";

„Erstellen Sie eine Galerie für jeden Beitrag (funktioniert nur, wenn Ihr Thema Folgendes verwendet). Klasse = « Post» auf jedem Beitrag, was in WordPress üblich ist)“ – Erstellen Sie eine Galerie für jeden Beitrag (funktioniert nur, wenn Ihr Theme die „Post“-Klasse für jeden Beitrag verwendet, was typisch für WordPress ist);
„Verwenden Sie einen benutzerdefinierten Ausdruck, um FancyBox anzuwenden“ – wenden Sie einen benutzerdefinierten jQuery-Ausdruck an, um FancyBox für WordPress zu konfigurieren, falls die vom Plugin angebotenen Optionen nicht zu Ihnen passen und Sie flexiblere individuelle Einstellungen benötigen. Es ist besser, diese Option nicht zu nutzen.

Es ist auch besser, die folgenden Registerkarten nicht zu bearbeiten, da sie nur für fortgeschrittene Benutzer verständlich und nützlich sind.

Ich bin mir sicher, dass alle oben genannten Anweisungen ausreichen, um FancyBox For WordPress erfolgreich in Ihr Blog zu integrieren und Bilder effektiv in einem Popup-Fenster anzuzeigen.

Man kann jedoch nicht umhin, darauf zu achten, dass im Internet regelmäßig Benutzerbeschwerden über die Schwachstelle des Plugins auftauchen, die dazu führen, dass Websites auch ohne Zugriff auf den Admin-Bereich und das Hosting von WordPress mit Viren infiziert werden. Wenn Sie mit dem Problem konfrontiert sind, dass Ihre Webressource gehackt wird, ist es wichtig, das Problem so schnell wie möglich zu beheben. Ich möchte Ihnen eine alternative Möglichkeit zur Darstellung von Bildern in Leuchtkästen anbieten. Und dann machen wir uns mit dem Plugin vertraut, das der Hauptkonkurrent von FancyBox für VP ist. Dies wird auf den Seiten meines Blogs verwendet.

Easy FancyBox: Hauptfunktionen des Plugins

Wie das vorherige Plugin beginnt Easy FancyBox für WordPress sofort nach der Standardinstallation auf dem CMS für alle Bilder zu funktionieren. Wenn Sie die Einstellungen „für sich selbst“ anpassen möchten, finden Sie auf der Seite unter der Adresse in der Konsole „Einstellungen“ – „Mediendateien“ Optionen, die fast identisch mit den FancyBox-Optionen für WordPress sind.

Seine charakteristischen Unterschiede sind:

Oder wählen Sie in den Plugin-Einstellungen im Block „Galerie“ im Feld „Autogallery“ die Option „Alle in einer Galerie“;

Bei der Bedienung des Plugins gab es keine nennenswerten Mängel. Wenn in Ihrer VI-Vorlage jedoch eine „native“ Lightbox integriert ist, besteht eine hohe Wahrscheinlichkeit eines Konflikts und es kann sich herausstellen, dass Easy FancyBox für WordPress nicht funktioniert. In diesem Fall ist es sinnvoll, den Support zu kontaktieren.

Integration der FancyBox-Bibliothek in WordPress ohne Plugins

Wenn Sie auf dieses Problem empfindlich reagieren, machen Sie sich wahrscheinlich Sorgen um die Geschwindigkeit Ihres Blogs. Und wir wissen, dass eine große Anzahl von Plugins den Seitenladevorgang verlangsamen kann. Daher betrachten wir als nächstes die Möglichkeit, das jQuery-FancyBox-Skript ohne Plugin in WordPress zu implementieren. Diese Methode Die Verwendung wird empfohlen, wenn Sie mit Code vertraut sind und Erfahrung darin haben. Während des Prozesses kann es aufgrund der Einbeziehung bestimmter Optionen zu Konflikten mit anderen Theme-Skripten kommen. Die Lösung dieses Problems wird im Einzelfall individuell sein, daher ist es schwierig, alle Optionen im Voraus vorherzusehen.

Um die Bibliothek zu installieren, können FancyBox-Dateien unter fancyapps.com/fancybox/ gefunden und heruntergeladen werden. Öffnen Sie den Ordner im entpackten Verzeichnis Quelle und kopieren jquery.fancybox.css Und jquery.fancybox.js, legen Sie sie in einen Ordner , die zunächst im Stammverzeichnis des Themes erstellt werden muss.

Öffnen Sie in Texteditor Datei Funktionen.php, suchen Sie die Funktion zum Verbinden von Skripten und fügen Sie den folgenden Code ein:

1 2 3 4 5

// Fancybox-Stylesheet. wp_enqueue_style( "fancybox-style" , get_template_directory_uri() . "/fancybox/jquery.fancybox.css" , array () , " " ); // Fancybox-Skript. wp_enqueue_script( "fancybox-script" , get_template_directory_uri() . "/fancybox/jquery.fancybox.js" , array ("jquery" ) , " " );

// Fancybox-Stylesheet. wp_enqueue_style("fancybox-style", get_template_directory_uri() . "/fancybox/jquery.fancybox.css", array(), " "); // Fancybox-Skript. wp_enqueue_script("fancybox-script", get_template_directory_uri() . "/fancybox/jquery.fancybox.js", array("jquery"), " ");

Öffnen Sie dann die Theme-Datei zur Bearbeitung header.php und in Kopf Rufen Sie die FancyBox-Funktion auf:

1 2 3 4 5

$(document).ready(function())( $(".fancybox").fancybox(); ));

Hier ist ein Video über die Einrichtung und Verwendung von Fancybox:

Heute haben wir ein auf Websites weit verbreitetes Skript kennengelernt, mit dem Bilder in Leuchtkästen schön angezeigt werden. Um die Integration in einen Blog zu vereinfachen, wurden viele spezielle Plugins entwickelt. Wir haben uns einige der beliebtesten angeschaut: Easy FancyBox und FancyBox For WordPress, haben herausgefunden, wie sie funktionieren und was ihre Unterschiede sind. Sie sind empirisch getestet und funktionieren zuverlässig. Um zu verstehen, welches Tool am besten zu Ihren Funktionen passt, bestimmen Sie die Hauptaufgaben, die es ausführen soll. Es macht keinen Sinn, sich für ein umfangreiches Plugin zu entscheiden, um in Zukunft nur noch eine oder zwei seiner Optionen zu nutzen.

Schauen wir uns an, wie Fancybox in JQuery funktioniert, und erfahren Sie, wie Sie es konfigurieren.

Dies ist ein interessantes Plugin, mit dem beim Klicken auf Fotos diese im Vollbildmodus geöffnet werden. Unbegrenzte Möglichkeiten, Projekte zu erstellen, die einfach, niedlich und benutzerfreundlich sind. Darüber hinaus hat ein solches Plugin Einfache Einstellung und schnelle Verbindung. Laden Sie dazu Fancybox JQuery herunter und verbinden Sie es wie unten gezeigt.

So zeigen Sie ein Bild an

Dieses Plugin verfügt über mehrere Parameter, mit denen bestimmte Seitenelemente angezeigt werden können. Schauen wir uns an, wie Sie die Bildanzeige konfigurieren können. Schreiben Sie dazu den folgenden Code:

Nun tritt das Plugin selbst in Kraft. Um das Bild anzuzeigen, schreiben wir Folgendes.

Im href-Attribut müssen Sie den Pfad zum Bild und im Tag angeben eine Vorschau wird geschrieben.

So implementieren Sie eine Galerie und zeigen eine Gruppe von Bildern an

Um dieses Problem zu lösen, müssen Sie einen einfachen Schritt ausführen: Hinzufügen zum Tag spezielles Attribut, bei dem der eine oder andere Wert (notwendigerweise eindeutig) für eine separate Gruppe von Bildern angegeben wird.

Es ist auch notwendig, die Parameter für die Darstellung des Bildes im Tag anzugeben.

So können Sie die Anzahl der Bilder in einer bestimmten Gruppe zählen und auch die Nummer und den Titel des Bildes anzeigen. Dies erfordert jedoch die Präsenz im Titel des oben genannten Tags .

So zeigen Sie Inhalte an

Das Plugin, das wir in diesem Artikel betrachten, kann auch verwendet werden, um Inhalte in einem modalen Fenster anzuzeigen. Schauen wir uns ein Beispiel an:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Es ist mir wichtig, dass meine Elite zeitlich begrenzt ist. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam.

Der Standardwert ist display:none, was bedeutet, dass der Inhalt ausgeblendet ist. Wenn jedoch auf den Link geklickt wird, zeigt das Plugin das Inhalts-Div mit der ID an, die im href angegeben wurde. Achten Sie auch darauf.

Wir hoffen, dass Sie eine allgemeine Vorstellung davon bekommen. Wir werden später über andere Funktionen des Plugins sprechen.

Erfahren Sie mehr über die FancyBox-Optionen

Parameter Beschreibung des Standardparameters

Polsterung	10	Abstand zwischen Inhalt und Fancybox
Marge	20	Platz zwischen Fancybox und anderen Inhalten
Opazität	FALSCH	Schalten Sie die Transparenz während Übergängen ein oder aus
zyklisch	FALSCH	Bei der Einstellung „true“ wird die Galerie zu einer Schleife mit unendlichen Vorwärts-Rückwärts-Übergängen
Scrollen	"Auto"	Möglichkeit, die Bildlaufleiste auszublenden oder anzuzeigen, CSS-Überlaufeigenschaft
Breite	560	Die Breite für einen Inhaltstyp „IFRAME“ oder „SWF“ wird auch auf den Parameter „autoDimensions“ angewendet, wenn dieser auf „false“ gesetzt ist.
Höhe	340	Die Höhe für einen Inhaltstyp „IFRAME“ oder „SWF“ wird auch auf den Parameter „autoDimensions“ angewendet, wenn dieser auf „false“ gesetzt ist.
autoScale	WAHR	Wenn true, wird die FancyBox im Fenster skaliert
centerOnScroll	FALSCH	Wenn „true“, befindet sich FancyBox beim Scrollen der Seite in der Mitte
hideOnOverlayClick	WAHR	Wählen Sie so, dass die FancyBox geschlossen wird, wenn Sie auf die Ebene „Overlay“ klicken
hideOnContentClick	FALSCH	Wählen Sie aus, ob die FancyBox geschlossen werden soll, wenn auf den Inhalt geklickt wird
OverlayShow	WAHR	Schalten Sie die Ebene „Overlay“ ein/aus
OverlayOpacity	0.3	Ebenentransparenz (von 0 bis 1)
OverlayColor	"#555"	Farbe der Überlagerungsebene
TitelZeigen	WAHR	Ob „Titel“ angezeigt werden soll
TitelPosition	"draußen"	Titelposition „Hinter“, „innen“ oder „oben“ („außen“, „innen“, „oben“)
titleFormat	Null	Sie können HTML für die Themengestaltung verwenden
ÜbergangIn, ÜbergangOut	"verblassen"	Sie können den Effekt zwischen Übergängen einstellen oder „elastisch“, „ausblenden“ oder „kein“ ausschalten.
speedIn, speedOut	300	Übergangseffektgeschwindigkeit in Millisekunden
changeSpeed	300	Effektgeschwindigkeit
changeFade	"schnell"	Rate des Verschwindens von Inhalten beim Ändern von Galerieelementen
Nachlassen, Nachlassen	"schwingen"	Für „elastische“ Animationen verwenden
showCloseButton	WAHR	Schließen-Button anzeigen
showNavArrows	WAHR	Pfeile zur Navigation anzeigen
enableEscapeButton	WAHR	Mit der „ESC“-Taste schließen Sie FancyBox
am Start	Null	Wird zuerst aufgerufen, bevor der Inhalt geladen wird
onCancel	Null	Wird aufgerufen, nachdem der Ladevorgang abgebrochen wurde.
onComplete	Null	Wird aufgerufen, nachdem der Inhalt angezeigt wurde
onCleanup	Null	Wird vor Schließung angerufen
onGeschlossen	Null	Wird aufgerufen, nachdem FancyBox geschlossen wurde

Es gibt einen guten Konkurrenten zu Fancybox – das ist das Lightbox-Plugin, es ist ziemlich schön, Sie können es im Artikel kennenlernen –

Hallo Freunde. Jede Website verfügt über Mediendateien, um den Besuchern Informationen besser präsentieren zu können. bereits auf den Blogseiten besprochen. Mit WordPress-Plugins können Sie ein Bild vergrößern, ohne eine separate Seite aufzurufen. Es ist möglich, Bilder zu einer einzigen Galerie zu verknüpfen oder sie einzeln anzuzeigen. Werfen wir einen Blick auf eines dieser Plugins, eines der besten seiner Art. Es dauert ein wenig Zeit, aber es lohnt sich, sie in die Erledigung der Aufgabe zu investieren.

Fancybox für WordPress-Bildvergrößerungs-Plugin und Galerieverwaltung

Vielmehr wurde bei der Platzierung von Bildern auf der Website darauf geachtet, dass das installierte Template „übergroße“ Bilder komprimiert, was einen Qualitätsverlust mit sich bringt. Kleingedrucktes und Details sind nicht immer lesbar. In den Anzeigeeinstellungen können Sie die Anzeige des Bildes in einer separaten Registerkarte oder auf derselben Seite der Site festlegen. Dies kann zu Duplikaten führen und ist für den Benutzer nicht ganz komfortabel. Fancybox für WordPress öffnet das Bild auf dieser Seite über dem restlichen Inhalt.

Sie müssen Fancybox für WordPress auf die übliche Weise installieren und aktivieren. Wenn Sie vergessen haben, wie es geht, lesen Sie den Artikel. Damit Fancybox auf ein Bild angewendet werden kann, muss dies während des Downloads oder auf eine bereits heruntergeladene Datei erfolgen Bildschirmeinstellungen Datei an Punkt Verknüpfung angeben ⇒ Mediendatei.

Nach der Aktivierung erscheint ein Abschnitt – Fancybox für WordPress.

Nachdem Sie den Abschnitt aufgerufen haben, öffnet sich ein Fenster mit Registerkarten zum Bearbeiten verschiedener Parameter.

Das Plugin ist nicht russifiziert, auf Englisch, aber fast alles ist so klar, wie es ist. Jetzt werde ich eine Übersetzung aller Einstellungen bereitstellen.

Die Info. Registerkarte „Entwicklerinformationen“. Die Autoren stellen klar, dass die installierte Grundkonfiguration des Plugins durchaus ansprechend ist. In den Hinweisen wird darauf hingewiesen, dass Sie den Cache leeren müssen, damit die Änderungen wirksam werden.
Aussehen. Anpassen des Erscheinungsbilds von Popup-Fenstern.
- Rahmen: Zeigt einen Rahmen um das Popup-Fenster an, ja/nein. Wenn Ja, geben Sie die Farbe im HTML-Format an.
- Schaltfläche „Schließen“ – Schaltfläche „Schließen“. Wählen Sie die Position des Kreuzes.
- Polsterung – Passen Sie die Füllstärke und -farbe vom modalen Fenster an die Abbildung an.
- Overlay-Optionen – Transparenz des Hintergrunds. Der Koeffizient reicht von 0 bis 1. Bei der Einstellung 1 wird der Inhalt im Hintergrund überhaupt nicht angezeigt.
- Titel – der Name der Mediendatei. Wenn das Kontrollkästchen aktiviert ist, wird der Name an der ausgewählten Position angezeigt. Innen ⇒ innen, Außen ⇒ außen, Oben ⇒ oben.
- Navigationspfeile - Navigationspfeile. Zurückziehen oder nicht.

Speichern Sie Ihre Änderungen unbedingt.

Die nächsten beiden Abschnitte richten sich an fortgeschrittene Benutzer.

Sonstiges – andere Einstellungen. Automatische Größenanpassung, funktioniert nur mit Ajax.
Extra Calls – zusätzliche FancyBox-Anrufe. Hier können Sie viele zusätzliche FancyBox-Aufrufe mit unterschiedlichen Einstellungen hinzufügen. Wenn Sie beispielsweise FancyBox mit Frames oder AJAX für einen bestimmten Link verwenden möchten, können Sie diese Aufrufe hier konfigurieren, ohne die Bildeinstellungen zu beeinflussen.
Fehlerbehebung - Fehlerbehebung. Die Entwickler weisen darauf hin, dass Änderungen in diesem Abschnitt nur vorgenommen werden sollten, wenn es Probleme mit dem Betrieb von Fancybox für WordPress gibt.
Die Autoren empfehlen, die Kompatibilität mit anderen Erweiterungen wie Lightbox, Slimbox und ähnlichen zu überprüfen, indem Sie jeweils eine davon deaktivieren und prüfen. Sie müssen außerdem den Cache leeren, um nach Parameteränderungen zu suchen.
Support – Support-Service. Bietet Links zu FAQ-Seiten, der Fancybox-Google-Gruppe, dem Support-Forum und Antworten auf Fragen anderer Benutzer.
Deinstallieren – Entfernung. Wie andere Erweiterungen speichert Fancybox für WordPress seine Einstellungen in einer WordPress-Datenbanktabelle. Um ein Plugin vollständig zu entfernen, aktivieren Sie das Kontrollkästchen und speichern Sie dann die Änderungen. Nach der Deaktivierung werden alle seine Einstellungen aus der Datenbank gelöscht.

Ich hoffe, dass die Einrichtung des Plugins nach einer ausführlichen Analyse von Fancybox für WordPress keine Schwierigkeiten bereiten wird. Interessenten werden es erfolgreich umsetzen und die Anzeige von Bildern im Popup-Fenster effektiv gestalten, und die Website wird dem Auge des Autors und der Besucher gefallen.

Also, guten Tag, es ist an der Zeit, dass ich Ihnen erzähle, wie ich ein Plugin installiert habe, um ein Bild in einem neuen Fenster anzuzeigen und mehr. Schauen wir uns nun genauer an, wie man es installiert und konfiguriert.

Das Plugin heißt Easy Fancybox, es ist sehr einfach zu installieren und erfordert zunächst keine Einstellungen, es funktioniert sofort nach der Aktivierung. Nachdem Sie das Plugin aktiviert haben, öffnen sich alle Links zu JPG-, GIF- und PNG-Bildern automatisch in einem separaten Fenster.

Fancybox unterstützt:

WordPress-Galerien
PDF-Dateien
JPG-, GIF-, PNG- usw. Bilder sowie Kartenbilder
Videos von Websites wie YouTube, Vimeo und Dailmotion
Frames (sollten das Browserfenster in Teile unterteilen, die jeweils Informationen aus unterschiedlichen Quellen anzeigen.)

Um noch mehr zusätzliche Optionen zu erhalten, können Sie die PRO-Erweiterung installieren.

Mal sehen, wie die Bilder nach der Installation dieses Plugins aussehen. Wenn wir uns zum Beispiel jeden Artikel über WP-Plugins auf der Website ansehen, enthält er Bilder, aber wir sehen sie in kleiner Größe und lesen den Text darauf nicht. Klicken Sie darauf und es öffnet sich ein separates Fenster mit einem Bild in voller Größe. Am unteren Rand des Fensters befindet sich auch der Name des Bildes selbst. Beim Hochladen auf die Website können Sie ihn ändern oder ganz entfernen, um keine Störungen zu verursachen.

Fahren wir nun mit dem eigentlichen Installationsprozess fort.

Zunächst laden wir das benötigte Plugin herunter. Sie können es von wordpress.org herunterladen oder das Plugin mit der Standard-WordPress-Plugin-Datenbank installieren. Ich habe die zweite Methode gewählt (unter Verwendung der Standard-Plugin-Datenbank), sie ist die schnellste und einfachste, daher werde ich dieses Beispiel beschreiben. Um das Plugin mit dieser Methode zu installieren, müssen Sie es nicht auf Ihren PC herunterladen. Sie müssen lediglich zum Abschnitt „Plugins“ gehen und dann auf „Neu hinzufügen“ klicken.

Es öffnet sich eine Seite, auf der Sie einen möglichst vollständigen Namen für das Plugin eingeben und auf „Suchen“ klicken müssen. Geben Sie den vollständigen Namen des Plugins „Easy FancyBox“ ein und klicken Sie auf „Suchen“. Danach öffnet sich eine Seite mit einer Reihe von Plugins auf Anfrage. Suchen Sie das gewünschte aus und klicken Sie auf „Installieren“. Nach erfolgreicher Installation aktivieren Sie es. Sie können es direkt nach der Installation oder später in der Liste aller installierten Plugins aktivieren. Das war's, das Plugin ist jetzt installiert und einsatzbereit.

Damit es funktioniert, müssen Sie nun sicherstellen, dass beim Laden eines Bildes in seinen Eigenschaften im Element „Link“ „Mediendatei“ angegeben wurde, sonst funktioniert das Plugin nicht (manchmal ist dies standardmäßig aktiviert, aber in in den meisten Fällen ist dies nicht der Fall). Dort können Sie auch den Titel ändern, der beim Öffnen des Bildes unten im Fenster angezeigt wird. Nach diesen Manipulationen funktioniert das Plugin zuverlässig.

Das Plugin ist installiert und funktioniert. Jetzt erzähle ich Ihnen ein wenig über die Einrichtung.

Wir gehen zur Hauptseite der Arbeit mit der Site, klicken auf den Punkt „Plugins“, suchen dort nach dem benötigten Plugin namens Easy FancyBox und klicken auf „Parameter“. Es erscheint ein Fenster mit Parametern, die geändert werden können.

Der Overlay-Parameter legt den Hintergrund beim Öffnen des Bildes fest; Sie können die Farbe und Transparenz ändern. Zum Beispiel schwarze Farbe (#000000 – geben Sie im Element „Farbe“ ein) und ändern Sie die Transparenz von 0 auf 1 im Element „Deckkraft“. Je höher der Wert, desto weniger transparent wird der Hintergrund; beim Einstellen von Wenn Sie den Wert auf 1 setzen, ist der Hintergrund völlig undurchsichtig.

Fensterparameter, hier ändern wir das Fenster selbst, in dem die Bilder geöffnet werden. Hintergrundfarbe – Hintergrundfarbe

Opazität – Transparenz

Rand – Rahmen.

Sie können auch die Breite, Höhe und den Rahmen selbst ändern, die Standardwerte sind jedoch 560x340x10 (die Reihenfolge bleibt erhalten).

Verhalten – Verhalten sozusagen. Hier würde ich nicht empfehlen, etwas zu ändern, außer der Geschwindigkeit des Öffnens und Schließens des Fensters (Öffnungsgeschwindigkeit und Schließgeschwindigkeit), der Standardwert ist 300.

Bildparameter. Automatische Erkennung – Bildformate, die mit dem Plugin funktionieren, werden aufgelistet, Sie können Ihre eigenen hinzufügen.

Ich würde nicht empfehlen, den Punkt „Verhalten“ zu ändern; alles ist so gut wie möglich konfiguriert.

„Titel anzeigen“ ist die Bildunterschrift; sie kann entfernt oder belassen werden.

Das ist alles. Vielen Dank, dass Sie den Artikel gelesen haben. Abonnieren Sie den Newsletter und empfehlen Sie meine Website Ihren Freunden, indem Sie auf die Social-Buttons unten klicken.

Bis bald, viel Glück! Eduard Tichonow

brainteam.ru

Optionen zum Einbetten eines Links in ein Formular:

1. Direkt in die Vorlage einbetten:

Rückkopplung

2. Betten Sie es in eine Seite oder einen Beitrag ein

Rückkopplung

3. Betten Sie es in ein Seitenleisten-Widget ein

*Sie müssen die Shortcode-Unterstützung in der Datei „functions.php“ aktivieren (nicht alle Vorlagen unterstützen Shortcodes in Seitenleisten-Widgets). Fügen Sie dazu die Zeile zur Datei „functions.php“ hinzu:
add_filter("widget_text", "do_shortcode");
Jetzt funktioniert jeder Shortcode im „Text“-Widget.
Fügen Sie den Code* in das „Text“-Widget ein:

Rückkopplung

4. Aufruf des Formulars Rückmeldung beim Klick auf das Bild:

Ein Beispiel dieser Form finden Sie auf der Website unseres Kunden: Abgehängte Decken in Kiew

5. Um mehrere Formulare auf einer Seite aufzurufen, müssen Sie unterschiedliche IDs verwenden, um das Formular aufzurufen.
Ein Beispiel für den Aufruf zweier Feedback-Formulare in einem Popup-Fenster:

Anrufformular 1

Anrufformular 2

Beachten Sie in diesem Fall zum Aufrufen mehrerer Formulare die folgenden Teile des Codes:

6. Ausgabe des Feedburner-Abonnementformulars

JETZT ABONNIEREN

Sie können diesen Code für Ihr Abonnementformular verwenden, indem Sie lediglich die Feed-Adresse https://feedburner.google.com/fb/a/mailverify?uri=Cms-info in Ihre eigene ändern.

Fügen Sie den folgenden Code hinzu, wenn Sie ein Plugin mit Fancybox verwenden, z. B. Easy Fancybox:
on_sent_ok: $.fancybox.close();
im Abschnitt „Zusätzliche Einstellungen“ für Ihr Formular.

Wenn es einen Fehler gibt: Der angeforderte Inhalt kann nicht geladen werden. Bitte versuchen Sie es später noch einmal

Möglicherweise liegt dieser Fehler vor letzte Version WordPress-Engine, es wird empfohlen, die Klasse im Link zu ändern:
Rückkopplung
ändern:
Rückkopplung

Wir haben fancybox in fancybox-inline geändert.

Aufgetretene Probleme und Lösungen:

2. Wenn Sie eine Galerie angeschlossen haben (z. B. NextGEN Gallery) oder ein Theme, das bereits einen „Lightbox“-Effekt installiert hat, passiert Folgendes: Fotos werden mit der integrierten Lightbox und auch mit einer Lightbox von EasyFancy Box geöffnet Das heißt, Sie müssen sie dann zweimal schließen.
Um dies zu vermeiden, deaktivieren Sie in den EasyFancy Box-Einstellungen das Kontrollkästchen Bilder und ersetzen Sie oben im Popup-Formularcode die Klasse fancybox durch fancybox-inline . Ihr Code wird so aussehen:.

Rückkopplung

Das ist alles, wenn Sie sich bei unserer IT-Community „bedanken“ möchten, haben Sie diese Möglichkeit: Auf der rechten Seite finden Sie Spendenmöglichkeiten für den Aufbau des Portals. Oder teilen Sie den Artikel über die unten aufgeführten Dienste in Ihren sozialen Medien.

it-media.kiev.ua

Funktionen von Easy Fancybox in WordPress

Zusätzlich zu den Basisgrafiken stehen die Formate Webp und SVG zur Verfügung.
Sie können Videos von Vimeo, Youtube, Dailmotion im Popup-Fenster anzeigen;
unterstützt PDF- und Flash-Dateien;
kann mit normalem HTML-Code und dem Inhalt externer Seiten arbeiten;
Kompatibel mit der Basis-WordPress-Galerie sowie NextGEN;
Sie werden keine Probleme mit Imagemaps, endlosem Jetpack-Scrollen und dem Einrichten einer Lightbox für Menüelemente haben;
Die automatische Bildverarbeitung wurde oben bereits erwähnt;
Zu den weiteren Funktionen gehört das automatische Auslösen eines Popups beim Laden von Seiten einer Webressource;
kann als modales Fenster für Contact Form 7 verwendet werden – eine Alternative zu Easy Modal (Anweisungen in der Beschreibung im Repository);
In den Einstellungen können Sie Öffnungseffekte, Farbe und transparente Überlagerung sowie einige andere visuelle Parameter auswählen.

Das Fancybox-Plugin gibt es als Premium-Version für 12 Dollar + anschließendes Abonnement für 4 Dollar pro Jahr. Zu den herausragenden Funktionen gehören: zusätzliche Gestaltungsmöglichkeiten und automatische Auslösung des Popups, Diashow-Effekte, Anzeige des Titels beim Hover usw. Wenn Sie die Grundfunktionen erweitern möchten, lesen Sie genauer darüber. Für mich persönlich Freie Version Genug mit deinem Kopf.

Auch auf der offiziellen Seite des Moduls gibt es ein paar Optionen, warum Fancybox in WordPress nicht funktioniert, diese könnten sein:

Konflikte mit ähnlichen Lösungen;
Fehlen von wp_footer() in der Fußzeile;
einige Probleme mit Plugins: All in One SEO Pack, jQuery Updater sowie Google Analytics auf WordPress und einigen anderen;
Konflikte mit Vorlagen – oft haben Premium-Vorlagen ihr eigenes Skript für einen ähnlichen Effekt (ich werde diese Situation weiter unten besprechen);

Darüber hinaus gibt es im Repository auf wordpress.org eine Checkliste zur Überprüfung mögliche Fehler und welche Schritte unternommen werden müssen, um sie zu korrigieren. Dies ist eine der wenigen Erweiterungen, für die so viel Zeit aufgewendet wird mögliche Probleme und Gründe für Fehlfunktionen. Wenn Ihnen etwas Ähnliches passiert ist, empfehle ich Ihnen, es zu lesen.

Installation und Konfiguration von Easy Fancybox

Der Installationsprozess ist Standard – manuell von hier herunterladen oder über das Admin-Panel aktivieren. Die Lightbox stellt sofort eine Verbindung zu den auf der Website verfügbaren Bildern und Galerien her (Links zu öffnenden Bildern müssen als Mediendateien festgelegt werden).

Alle zur Bearbeitung verfügbaren Parameter befinden sich im Abschnitt „Einstellungen“ – „Mediendateien“ unter dem Hauptinhalt.

Hier gibt es mehrere Unterpunkte:

Medien: Wählen Sie Dateitypen aus, mit denen das Modul arbeiten soll.
Overlay – Farb-/Transparenz- und Overlay-Ausgabe (Abdunkeln des Hintergrunds).
Fenster – Optionen für Rahmen, Titel, Schaltfläche zum Schließen und Fensterverhalten.
Verschiedenes (Verschiedenes) – automatische Treffer- und Kompatibilitätsoptionen mit Themes/Plugins.
Bilder – legt die auszulösenden Bilderweiterungen, einige Designfunktionen und Galerien fest.

Generell rate ich dir, alle Optionen kurz durchzuschauen, damit du weißt, was es alles gibt. Ehrlich gesagt ändere ich hier in den meisten Fällen nichts – standardmäßig funktioniert alles einwandfrei. In der Nähe einiger Elemente befinden sich Links wie „Weitere Optionen“, die auf die vorhandenen zusätzlichen Funktionen in der Premium-Version hinweisen.

Viele interessante Dinge finden Sie in der offiziellen Beschreibung des Easy Fancybox-Plugins – scrollen Sie nach unten zum FAQ-Bereich. Es geht darum, ein PDF aufzurufen, ein Kontaktformular zu öffnen, ein reguläres modales Fenster, Youtube-Video usw.

Deaktivieren des Skripts auf der Seite

Eine der Premium-Vorlagen, mit denen ich gearbeitet habe, verfügte über einen internen Lightbox-Mechanismus. Um Konflikte zu vermeiden, musste Fancybox daher nur an einer bestimmten Stelle auf der Website geladen werden.

Dies wird durch den folgenden Code in der Funktionsdatei des Themes (functions.php) implementiert:

Dies prüft!is_page_template('page-menu.php') mit einer separaten Seitenvorlage, Sie können jedoch auch andere bedingte Operatoren verwenden – is_single, is_home, is_category usw. Wenn Sie die Variable auf „False“ setzen, wird das Modul deaktiviert.

Gesamt. Ich verwende das Fancybox-Plugin in WordPress fast immer, wenn ich Bildern und Galerien eine einfache Lightbox hinzufügen muss. Es funktioniert in der Regel sofort nach der Installation, kollidiert nicht mit anderen Skripten, verfügt über einige Einstellungen und wird regelmäßig aktualisiert. Im Prinzip ist von ihm nichts mehr nötig.

Übrigens, wenn Sie andere Lösungen für dieses Problem verwenden, schreiben Sie, es wäre interessant, etwas anderes auszuprobieren.

wordpressinside.ru

Einführung

Die sofort einsatzbereite WordPress-Installation verfügt über hervorragende Tools zum Arbeiten mit Fotos und zum Platzieren von Fotos und anderen Mediendateien in Site-Materialien. Mit der Entwicklung von WordPress verbessert sich auch die Darstellung von Fotos und Galerien auf der Seite. Es gibt fast alle Möglichkeiten, Fotos anzuzeigen: Galerien mit automatischer Größenänderung von Miniaturansichten erstellen, Fotos auf einer neuen Seite und in einem neuen Tab anzeigen, Fotogrößen ändern usw. Es gibt alles, aber es gibt keine Anzeige von Fotos in modalen Fenstern – Fenstern, die in einem separaten Fenster über dem Artikel erscheinen.

Einfaches modales FancyBox-Fenster-Plugin für WordPress-Site-Mediendateien

WordPress ist nicht ohne Plugins, die die Anzeige von Fotos und anderen Mediendateien in Site-Artikeln verbessern. Leider werden nicht alle Plugins rechtzeitig aktualisiert und passen sich an Systemaktualisierungen an. Dies führt dazu, dass modale Fenster nicht mehr funktionieren und das Plugin muss neu installiert werden.

Im Artikel „14 Plugins für den Lightbox-Effekt auf einer WordPress-Site“ habe ich über Popup-Plugins geschrieben. Ich habe die meisten davon installiert und neu installiert, bis ich das Easy FancyBox-Plugin ausprobiert habe. Wir werden weiter darüber reden.

Laden Sie das Plugin herunter und installieren Sie es

Wir installieren das Plugin im Verwaltungsbereich der Website auf der Registerkarte Plugin→Hinzufügen neu. Wenn eine solche Installation nicht möglich ist, laden Sie das Plugin von der offiziellen Plugin-Seite herunter: https://wordpress.org/plugins/easy-fancybox/, entpacken und in das Verzeichnis /plugins hochladen.

Nach der Aktivierung des Plugins erscheint es in der Konsole nicht als separate Zeile. Sie können die Einstellungen über die Registerkarte eingeben Plugins→Easy FancyBox→Einstellungen oder Media-Dateien.

Organische Integration der Easy FancyBox-Einstellungen in Allgemeine Einstellungen WordPress-Mediendateien, fesselt und erhöht das Vertrauen in das Plugin.

Nachdem wir die Einstellungsseite geöffnet haben, sehen wir, dass alle notwendigen, minimalen Einstellungen vorgenommen wurden. Es gibt eine ganze Reihe von Einstellungen, aber wenn Sie sie verwenden, müssen Sie bedenken, dass einige davon das Laden der Seite auf der Clientseite erhöhen.

Nach der Aktivierung des Plugins werden alle in Artikel eingefügten Fotos (JPEG, PNG, GIF) in modalen Fenstern über dem Artikel angezeigt, wenn:

Beim Einfügen eines Fotos wird ein Link zur Mediendatei und nicht zur Anhangseite bereitgestellt;
Die Fotogröße wurde im Vergleich zum Original verkleinert.

Konfigurierbar:

Auswahl von drei Effekten zum Öffnen/Schließen eines modalen Fensters;
Möglichkeit, ein Fenster im Overlay-Modus auszuwählen;
Anzeige einer Miniaturgalerie auf den Seiten der Website;
Sehen Sie sich die Galerie an, indem Sie mit dem Mausrad scrollen.

Einfache FancyBox-Plugin-Einstellungen

Abschließend ist anzumerken, dass in den Einstellungen des Easy FancyBox-Plugins modale Fenster für Videos von YouTube, Dailymotion, Vimeo, PDF-Dokumente, SWF, SVG. Sie können einen iFrame für eine andere Ressource erstellen. Diese Optionen sind jedoch nur Pro-Versionen für 10 $ für eine Domain.

©www.wordpress-abc.ru

www.wordpress-abc.ru

Oft müssen Sie ein effektives Popup-Kontaktformular erstellen. Es kann sich um eine Bewerbung oder um Ihre Lieblingssache in der Kopfzeile der Website „Rückruf bestellen“ handeln.
Dies ist mit nur zwei Plugins möglich,
und Kontaktformular

Alles wird wie gewohnt aus dem offiziellen WordPress-Repository gesucht und installiert – es gibt keine Geheimnisse.
Kommen wir nun zu den Einstellungen,
Zuerst konfigurieren wir das Plugin
Gehen Sie zu Einstellungen – Mediendateien und aktivieren Sie das Kontrollkästchen unter „Inline-Inhalt“. (Ich empfehle Ihnen, das Kontrollkästchen unter „Bilder“ zu deaktivieren, da die meisten Themen bereits über eigene Popup-Fenster und eigene Stile verfügen. Um Konflikte zu vermeiden, entfernen wir diese.)
» data-lazy-original=»http://wpwh.ru/wp-content/uploads/2015/04/fansybox-300×171.jpg» alt=»fansybox» width=»300″ height=»171″ / >

Das war's mit diesem Plugin. Fahren wir mit der Erstellung des Formulars selbst fort. Gehen Sie zum Kontaktformular-Plugin „Erstellen“. neue Uniform und fügen Sie die benötigten Felder hinzu. Im Prinzip generiert das Plugin selbst ein Testformular, was für manche völlig ausreichend ist.

Wir sind alle mit der Plugin-Einrichtung fertig. Wir werden den Knopf selbst machen.
Um es zu testen, gehen Sie zu einem beliebigen Beitrag und fügen Sie diesen Code ein

Wenn direkt im Vorlagencode, dann verwenden Sie diesen Code

Um die Schaltfläche schön zu gestalten, können Sie „styles.button1“ hinzufügen. Dieser Code dient als Beispiel. Sie können Ihren eigenen Stil schreiben. Er sollte kopiert und in die Datei „style.css“ Ihres Themas eingefügt werden

Der vollständige Code sieht folgendermaßen aus

Ein Beispiel dafür, wie das alles funktioniert, finden Sie auf der Website http://antiseptic.tv/. In der Kopfzeile befindet sich ein grüner Button.

Für diejenigen, die die Fehlermeldung „Der angeforderte Inhalt kann nicht geladen werden“ erhalten. Bitte versuchen Sie es später noch einmal“ (dies passiert bei den neuesten Versionen der WordPress-Engine), es wird empfohlen, die Klasse im Link zu ändern:

ändern:

wpwh.ru

Installation und Einstellungen

Die Installation erfolgt standardmäßig und das Plugin selbst kann aus dem kostenlosen Repository heruntergeladen werden WordPress-Plugins. Nun, oder installieren Sie es direkt über das Admin-Panel, wie ich in diesem Artikel beschrieben habe. Nach der Installation und Aktivierung funktioniert das Plugin ohne weitere Einstellungen, was als „out of the box“ bezeichnet wird. Alle Fans des „Bastelns und Optimierens“ sollten in den Bereich „Einstellungen – Mediendateien“ gehen. Hier entsteht Easy FancyBox zusätzliche Einstellungen. Alle sind in mehrere Hauptabschnitte unterteilt:

Medien— Liste aller unterstützten Dateiformate und -typen. Standardmäßig sind nur Bilder enthalten, Sie können aber auch PDF, YouTube, Vimeo, iFrames und andere einbinden.

Überlagerung— Seitenhintergrundeinstellungen bei der Anzeige von Bildern. Sie können es ganz entfernen oder Ihre eigene Farbe und Transparenz festlegen. Schließen des Bildes beim Klicken auf den Hintergrund deaktivieren.

Fenster- alles, was die Parameter des Fensters mit dem Bild selbst betrifft. Farbe, Abmessungen, Transparenz, Rahmen usw.

Bilder– Legen Sie alle benötigten Bildformaterweiterungen fest. Im Unterabschnitt Verhalten Passen Sie die Ausgabeanimation an. Konfigurieren Sie die Anzeige des Mauszeigers, wenn Sie mit der Maus über ein Bild fahren. Bestimmen Sie, ob Sie einen Titel anzeigen und Standard-WordPress-Galerien unterstützen müssen? Wenn Sie Galerien von Drittanbietern verwenden, ist es besser, die Unterstützung zu deaktivieren, um eine doppelte Bildausgabe zu vermeiden.

Wenn Sie im ersten Abschnitt zusätzlich zu Bildern beispielsweise einige andere Dateitypen angeben, erscheinen in den Einstellungen dementsprechend zusätzliche Einstellungen dafür. Für ein YouTube-Video können Sie beispielsweise die Fensterabmessungen angeben.

Und schließlich, wenn die Möglichkeiten hier gering erscheinen, schlägt der Autor vor, für 10 Euro eine Premium-Erweiterung für das Plugin zu kaufen, die noch mehr Funktionen hinzufügt.

wpnice.ru

FancyBox für WordPress: Bilder und Galerien wunderschön anzeigen

Lassen Sie uns das Plugin für unsere Website aus dem WordPress-Repository installieren.

Wir aktivieren FancyBox für WP und es beginnt sofort zu arbeiten und wendet seine Grundeinstellungen auf die Bilder an. Wir können dies überprüfen, indem wir zu unserem Blog gehen, ihn aktualisieren und auf eines der verfügbaren Bilder klicken.

In diesem Fall wird das Bild groß skaliert und in einem Popup-Fenster über dem restlichen Inhalt platziert, der leicht abgedunkelt ist. Um das modale Fenster zu schließen, können Sie entweder auf das Kreuz in der oberen rechten Ecke oder irgendwo auf der Seite außerhalb des Bildes klicken.

Zusätzlich zu den voreingestellten Optionen bietet FancyBox For WordPress auch flexiblere Einstellungen. Wir finden sie in der VI-Konsole im Menüpunkt „Einstellungen“ – „FancyBox for WP“. Wenn wir auf den Link klicken, sehen wir eine große Anzahl von Registerkarten, die für die Bearbeitung bestimmter Parameter verantwortlich sind. Sie sind hauptsächlich mit der Veränderung des Aussehens der Bilder verbunden. Leider ist das Plugin komplett auf Englisch. Aber jetzt schauen wir uns die interessantesten Punkte an, die Sie möglicherweise benötigen, wenn die Standardeinstellungen nicht Ihren Anforderungen entsprechen.

Der Startreiter ist „Info“. Hier finden Sie Links zu Informationen über die Entwickler und das Produkt als Ganzes. Die Ersteller des Plugins sagen, dass die Basisversion der Einstellungen auch ohne diese ein recht attraktives Ergebnis liefert, wenn man sich nicht mit allen vorgeschlagenen Einstellungen befassen möchte. Sie bitten Sie auch darauf zu achten, dass, wenn Sie nach der Bearbeitung Änderungen nicht sofort bemerken, dies oft nicht bedeutet, dass FancyBox für WordPress nicht funktioniert. Wenn Sie ein Caching-Plugin wie Hyper Cache installiert haben, müssen Sie nach dem Speichern der Änderungen den Cache leeren oder das Plugin deaktivieren, während Sie an den Einstellungen arbeiten.

Die nächste Registerkarte ist „Aussehen“. Auf dieser Seite können wir grundlegende Optionen für das Erscheinungsbild von Popup-Fenstern anpassen. Wenn das Kontrollkästchen aktiviert ist, ist die Funktion aktiviert, andernfalls ist sie deaktiviert:

„Rand“ – Wählen Sie aus, ob ein Rahmen um das modale Fenster angezeigt werden soll. Der Standardwert ist Nein. Wenn wir die Option „Ja“ wählen, erscheint ein zusätzliches Feld zur Auswahl der Rahmenfarbe im Hexadezimalformat (#000000). Es gibt keine Möglichkeit, die Rahmenbreite anzupassen.
„Schließen-Schaltfläche“ – wir legen fest, ob die Lightbox eine Schaltfläche zum Schließen des Fensters (ein Kreuz) haben wird und wo sie sich befindet (Links (links) / Rechts (rechts) / Unten (unten) / Oben (oben)). Startwert – oben rechts;
„Padding“ – dieses Element ist dafür verantwortlich, in FancyBox für WordPress die Farbe und Breite des Abstands vom Rand des Popup-Fensters bis zum darin platzierten Bild festzulegen. Der Standardwert ist Weiß, 10 Pixel;
„Overlay-Optionen“ – Legen Sie die Eigenschaften des Hintergrunds fest, der unter dem Popup-Bild erscheint und den Inhalt der gesamten Seite abdeckt. Ursprünglich definiert: als Farbe – Grau, als Transparenz (Opazität) – 0,3. Die Transparenzeigenschaft liegt zwischen 0,0 und 1,0. Je niedriger der Wert, desto transparenter ist der Hintergrund. Wenn Sie dementsprechend den hinter dem modalen Fenster verbleibenden Inhalt vollständig ausblenden möchten, können Sie die Deckkraft auswählen: 1;
„Titel“ – wir legen fest, ob und wie die Bildunterschrift (d. h. der Wert des Titelattributs des Bildes) angezeigt wird. Hier können Sie die Position des Titels relativ zum Abstand des Popup-Fensters (Innen/Außen/Oben) und seine Farbe konfigurieren. Mit den Werten „Innen“ und „Außen“ wird der Text am unteren Rand des modalen Fensters bzw. darunter platziert. Und wenn Sie die Option „Über“ auswählen, wird der Titel über dem unteren Einzug, über dem Bild selbst auf einem dunklen, durchscheinenden Hintergrund platziert;
„Navigationspfeile“ – Wählen Sie, ob Navigationspfeile angezeigt werden sollen oder nicht. Sie erscheinen, wenn Sie mit der Maus über ein Bild fahren.

Gehen Sie zur Registerkarte „Animationen“. Hier konfigurieren wir die Funktionen, die für die Steuerung der Animation von Popup-Fenstern verantwortlich sind:

Die fünfte Registerkarte ist „Galerien“. Dies ist eine erweiterte Einstellungsebene für Bildergalerien:

„Eine Galerie für alle Bilder auf der Seite erstellen (Standard)“ – erstellt eine Galerie für alle Bilder auf der Seite (Standard). Das heißt, wenn sich mehrere Bilder auf der Seite befinden, werden diese standardmäßig vom Plugin zu einer Galerie zusammengefasst. Wenn wir also eines davon in einem modalen Fenster öffnen, können wir alle anderen sehen, indem wir durch die Bilder scrollen;
„Gruppieren Sie Bilder in der Galerie nicht automatisch (verwenden Sie diese Option, wenn Sie Galerien manuell mit erstellen möchten rel Attribut)“ – Bilder werden nicht automatisch in der Galerie zusammengeführt (verwenden Sie diese Option, wenn Sie eine Galerie manuell mithilfe des rel-Attributs erstellen möchten). Ich schlage vor, genauer zu erfahren, wie man diese Option von FancyBox für WordPress in der Praxis nutzt.

Nehmen wir an, dass Sie auf Ihrer Seite Material haben, das herkömmlicherweise in mehrere semantische Blöcke unterteilt ist. Zum Beispiel: In einem davon platzieren Sie Bilder, um den Entstehungsprozess zu veranschaulichen Landingpage auf WP und im Folgenden - Beispiele der erfolgreichsten Verkaufsseiten. Und Sie möchten, dass diese beiden Bildgruppen nicht in einem modalen Fenster gemischt werden, sondern in unterschiedlichen Leuchtkästen angezeigt werden. Um Ihren Plan umzusetzen, wählen Sie zunächst die Plugin-Option „Bilder in Galerie nicht automatisch gruppieren“ aus.

Wiederholen Sie für die zweite Gruppe von Mediendateien dieselben Schritte, jedoch mit einem anderen rel-Wert, zum Beispiel: rel = "gal2";

„Erstellen Sie eine Galerie für jeden Beitrag (funktioniert nur, wenn Ihr Thema Folgendes verwendet). Klasse = « Post» auf jedem Beitrag, was in WordPress üblich ist)“ – Erstellen Sie eine Galerie für jeden Beitrag (funktioniert nur, wenn Ihr Theme die „Post“-Klasse für jeden Beitrag verwendet, was typisch für WordPress ist);
„Verwenden Sie einen benutzerdefinierten Ausdruck, um FancyBox anzuwenden“ – wenden Sie einen benutzerdefinierten jQuery-Ausdruck an, um FancyBox für WordPress zu konfigurieren, falls die vom Plugin angebotenen Optionen nicht zu Ihnen passen und Sie flexiblere individuelle Einstellungen benötigen. Es ist besser, diese Option nicht zu nutzen.

Es ist auch besser, die folgenden Registerkarten nicht zu bearbeiten, da sie nur für fortgeschrittene Benutzer verständlich und nützlich sind.

Ich bin mir sicher, dass alle oben genannten Anweisungen ausreichen, um FancyBox For WordPress erfolgreich in Ihr Blog zu integrieren und Bilder effektiv in einem Popup-Fenster anzuzeigen.

Man kann jedoch nicht umhin, darauf zu achten, dass im Internet regelmäßig Benutzerbeschwerden über die Schwachstelle des Plugins auftauchen, die dazu führen, dass Websites auch ohne Zugriff auf den Admin-Bereich und das Hosting von WordPress mit Viren infiziert werden. Wenn Sie mit dem Problem konfrontiert sind, dass Ihre Webressource gehackt wird, ist es wichtig, Viren auf der Website so schnell wie möglich zu überprüfen und zu entfernen. Ich möchte Ihnen eine alternative Möglichkeit zur Darstellung von Bildern in Leuchtkästen anbieten. Und dann machen wir uns mit dem Plugin vertraut, das der Hauptkonkurrent von FancyBox für VP ist. Dies wird auf den Seiten meines Blogs verwendet.

Easy FancyBox: Hauptfunktionen des Plugins

Seine charakteristischen Unterschiede sind:

Oder wählen Sie in den Plugin-Einstellungen im Block „Galerie“ im Feld „Autogallery“ die Option „Alle in einer Galerie“;

pro-wordpress.ru

Hallo Freunde! Heute sprechen wir darüber, wie Sie mithilfe eines Plugins eine wunderschöne Fotogalerie erstellen, mit der Sie Fotos, Videos und andere Mediendateien in wenigen Minuten wunderschön gestalten können.

In diesem Artikel erfahren Sie, wie Sie das Easy FancyBox-Plugin installieren, es auf einer Website mit WordPress richtig konfigurieren und in einem anderen Artikel mehr über andere interessante Lösungen erfahren – Fotogalerie auf Wordpress – was könnte einfacher sein?!

Es tut mir übrigens leid, dass ich lange nicht geschrieben habe, ich hatte überhaupt keine Zeit zum Bloggen! Ich habe meine Arbeitsfreigabe bestanden, wie ich es nenne – ein Tag der Schande im Jahr. Jetzt können Sie sich entspannen und weiterarbeiten!

Meine neugeborene Tochter Yana hat ständig Bauchschmerzen. So leiden meine Frau und ich, wir schaukeln und schaukeln die ganze Nacht, und am Morgen gehen wir ins Bett. Es ist eine Kolik, man sagt, der Magen gewöhnt sich daran – wenn er sich nur schnell wieder normalisieren würde! Na ja, wir werden das auch überleben...

Ich habe auch die Arbeit am adaptiven Layout einer Kunden-Website bzw. eines Online-Shops abgeschlossen – insgesamt ist es großartig geworden. Im Internet tauchen immer mehr adaptive Seiten auf, was mich persönlich sehr freut – die Qualität der Ressourcen verbessert sich, das ist wunderbar!

Über meine Neuigkeiten werde ich in einem separaten Artikel ausführlicher schreiben, freue mich außerdem auf ein neues Gewinnspiel mit coolen Preisen! Abonnieren Sie meinen Blog, um immer auf dem Laufenden zu bleiben. Nun zurück zum Thema Galerie erstellen...

Installation des Easy FancyBox-Plugins für WordPress

Die Fotogalerie wird standardmäßig über das Verwaltungsfenster installiert. Gehen Sie zum Abschnitt „Plugins“ und klicken Sie auf „Neu hinzufügen“.
Kopieren Sie den Namen des Plugins in die Suchleiste und klicken Sie auf „Suchen“. Wählen Sie unser Plugin aus der Liste aus und klicken Sie auf „Installieren“.

Sie können direkt auf Ihre Website gehen und sehen, wie das Plugin funktioniert. Großartig, nicht wahr?! Jetzt haben alle Fotos ein schickes Design. Was sehr erfreulich ist!

Einfache FancyBox-Plugin-Einstellungen

Im Prinzip ist alles bereits standardmäßig konfiguriert, Sie können jedoch ein wenig herumspielen und das Plugin nach Ihrem Geschmack anpassen. Gehen wir hierher: Und geh zu feine Einstellungen Einfache FancyBox:
Hier können Sie auswählen, für welche Dateitypen die Plugin-Unterstützung aktiviert werden soll, modale Fenster visuell gestalten und andere technische Probleme lösen.

Darüber hinaus können Sie den Hintergrund bei der Anzeige des Bildes sowie die Farbe und Transparenz anpassen. Sie können das Kreuz, das die Funktion zum Schließen des Bildes übernimmt, und die Taste zum Durchblättern des Bildes entfernen. Anschließend kann der Benutzer mit dem Mausrad durch die Bilder scrollen.

So erstellen Sie eine einfache FancyBox-Fotogalerie für WordPress

Lassen Sie uns nun herausfinden, wie Sie mit diesem Plugin eine Fotogalerie erstellen. Gehen Sie dazu auf „Bearbeiten“ des Beitrags und klicken Sie auf „Mediendatei hinzufügen“.

Öffnen Sie die Dateibibliothek und klicken Sie auf die Schaltfläche „Galerie erstellen“.
Wählen Sie als Nächstes aus der Dateibibliothek die Bilder aus, die wir in der Galerie sehen möchten. Klicken Sie auf das Bild und daneben erscheint ein Häkchen. Bei Bedarf können Sie weitere Bilder hochladen. Unten auf der Seite sehen Sie die Gesamtzahl der ausgewählten Dateien.

Alle ausgewählten Bilder werden angezeigt Bestandteil Galerien. Für jedes einzelne Bild können Sie einen Titel, eine Bildunterschrift und eine Beschreibung erstellen.

Klicken Sie nach allen Einstellungen auf „Neue Galerie erstellen“. Im erscheinenden Abschnitt können Sie durch stellenweises Verschieben der Bilder eine eigene Nummerierung erstellen. In den Galerieeinstellungen können Sie die Anzahl der Spalten auswählen. Nun, im Prinzip gibt es hier nichts Kompliziertes, ich denke, Sie werden es herausfinden ...

Das ist alles! Wir haben gerade die Easy FancyBox-Fotogalerie für WordPress installiert und jetzt sollte alles schön aussehen. Ich frage mich, ob Sie andere ähnliche Plugins verwenden? Teile deine Erfahrung!

Wenn Sie Fragen haben, schreiben Sie diese in die Kommentare! Ich freue mich, dass du meinen Blog liest – Respekt und Respekt dir gegenüber

savme.ru

FancyBox ist ein jQuery-Plugin, mit dem Sie Fotogalerien erstellen und andere Inhalte in schönen modalen Fenstern anzeigen können. Wenn Sie eine Fotogalerie auf Ihrer Website planen und einige Inhalte in modalen Fenstern platzieren, achten Sie auf dieses Skript.

Wir verbinden die Plugins jquery, jquery.easing und jquery.fancybox sowie das Stylesheet jquery.fancybox.css

Wir erstellen eine Fotogalerie.
Zuerst müssen wir fancybox aufrufen und die Objekte angeben, an denen wir es aufhängen möchten. Zwischen den Head-Tags fügen wir Folgendes hinzu:

$(document).ready(function() (
$("a.gallery").fancybox();
});

FancyBox - Fotogalerie
Einzelbild

Bildergruppe (Bildergalerie)

Man muss lediglich darauf achten, dass die Fotos zur gleichen Galerie gehören; sie müssen alle die gleiche Klasse (im Beispiel class="gallery") und das rel-Attribut (im Beispiel rel="group") haben. Im Beispiel hat das erste Foto kein rel-Attribut. Das Titelattribut ist optional, dient jedoch, sofern vorhanden, als Bildunterschrift für das Foto.

Schauen wir uns nun die Optionen an, die wir beim Aufruf von fancybox festlegen können und die sich auf das Erscheinungsbild und Verhalten der Fotogalerie auswirken. Für unser Experiment erstellen wir einen ähnlichen HTML-Code (ich werde kein Beispiel nennen, er ist absolut identisch mit dem oben angegebenen), mit dem einzigen Unterschied, dass alle Tags vorhanden sind Weisen wir die Klasse gallery2 zu und schreiben die folgende Funktion dafür (die wir auch mit Head-Tags platzieren):

$("a.gallery2").fancybox(
{
"Polsterung": 20,
„imageScale“: falsch,
„zoomOpacity“: falsch,
„zoomSpeedIn“ : 1000,
„zoomSpeedOut“ : 1000,
„zoomSpeedChange“ : 1000,
"frameWidth" : 700,
„frameHeight“: 600,
„overlayShow“: wahr,
„overlayOpacity“: 0,8,
"hideOnContentClick" :false,
„centerOnScroll“: falsch

Was bedeutet das alles:
Polsterung – Einrückung des Inhalts (Fotos) von den Fensterrändern. In der Demo habe ich es auf 20 Pixel eingestellt, was natürlich etwas viel ist, aber es ist klar;
imageScale – nimmt den Wert true an – der Inhalt (Bilder) wird so skaliert, dass er in das Fenster passt, oder false – das Fenster wird gestreckt, um in den Inhalt zu passen. Standard: wahr;
zoomOpacity – Ändert die Transparenz des Inhalts während der Animation (Standard: false). Denken Sie daran, dass die Transparenz zwischen 0 und 1 liegt.
zoomSpeedIn – Animationsgeschwindigkeit in ms beim Vergrößern eines Fotos (Standard 0);
zoomSpeedOut – Animationsgeschwindigkeit in ms beim Verkleinern eines Fotos (Standard 0);
zoomSpeedChange – Animationsgeschwindigkeit in ms beim Wechseln von Fotos (Standard 0);
FrameWidth – Fensterbreite, px (425px – Standard);
frameHeight – Fensterhöhe, px(355px – Standard);
overlayShow – (Standardwert true) Wenn true, wird die Seite unter dem Popup-Fenster verdeckt. Die Farbe wird in jquery.fancybox.css – div#fancy_overlay festgelegt
overlayOpacity – Deckkraft der Schattierung (standardmäßig 0,3);
hideOnContentClick – Wenn true, wird das Fenster geschlossen, wenn Sie auf einen beliebigen Punkt klicken (außer auf Navigationselemente). Standardwert wahr;
centerOnScroll – Wenn true, wird das Fenster auf dem Bildschirm zentriert, wenn der Benutzer auf der Seite scrollt.
Wie wir sehen, verfügen wir über ein sehr flexibles Tool zum Erstellen von Fotogalerien und mehr ...

Aber bei diesem wunderbaren Plugin geht es nicht nur um Galerien. Mit fancybox können wir nicht nur Fotos, sondern auch andere Inhalte ganz einfach in schönen Fenstern anzeigen.
Video von YouTube (rutube, video.mail usw.)

Video von youtube.com in einem modalen Fenster

Alles ist sehr einfach. Wir sind im Tag spezifizierte die Galerieklasse mit der #testube-Kennung im href-Attribut. Der Code für das YouTube-Video wurde im Container div#testube abgelegt.

Sollen wir es googeln?

Es stimmt, es gibt ein „aber“. Die Klasse muss iframe heißen. Dementsprechend müssen wir fancybox an diese Klasse anhängen

$("a.iframe").fancybox(
{
"frameWidth" : 800, // Fensterbreite, px (425px - Standard)
"frameHeight" : 600 // Fensterhöhe, px(355px - Standard)
});

Modale Fenster mit eigenem Inhalt:

Ähnlich wie im vorherigen Beispiel implementiert:

Weinen

Die Datei content.html enthält HTML-Code, der im modalen Fenster angezeigt wird. Bitte beachten Sie, dass die Datei content.html selbst keine CSS-Stile oder Links zu diesen enthält. Auf der Demoseite habe ich zwischen den Head-Tags eine Klasse.green und einen Text in einem modalen Fenster erstellt (eingeschlossen in

) wurde grün.

Wir können PHP auch im href-Attribut angeben. Lassen Sie uns das umsetzen. Dazu erstellen wir eine einfache PHP-Datei content2.php:

Sie haben Fenster Nr. geöffnet.

Und auf der Seite mit unseren Beispielen schreiben wir:

Ihr Inhalt im modalen Fenster Option 2.
Erstes Fenster

Zweites Fenster

Wir sehen, dass die Links einen GET-Parameter haben und content2.php entsprechend der Nummer in diesem Parameter beliebige Aktionen ausführen kann. So können Inhalte aus der Datenbank in einem modalen Fenster angezeigt, ein Feedback-Formular implementiert werden usw . usw.

Nun zu einer großen Nuance bei der Anzeige Ihrer Inhalte in modalen Fenstern.
Weil Suchmaschinen verstehen kein JavaScript, für sie sind unsere modalen Fenster einfach neue Seite. Wir sollten sicherstellen, dass keine Suchmaschine jemandem einen direkten Link zu einer solchen Seite gibt, gleichzeitig aber der Inhalt modaler Fenster ordnungsgemäß indiziert werden kann.
Du kannst das:

Ihr Inhalt im modalen Fenster Option 2 mit Duplizierung.
Erstes Fenster

Zweites Fenster

Wobei for_spider.php eine normale Site-Seite mit angehängten Stilen und Skripten ist. Auf dieser Seite zeigen wir den gleichen Inhalt wie im modalen Fenster an. Lassen Sie es von Suchmaschinen indizieren und lassen Sie es von unzureichenden Besuchern mit deaktiviertem Javascript besuchen. . Und für normale Menschen werden wir einen Ersatz schaffen. MIT mit jquery Wir werden for_spider.php durch content2.php ersetzen. Zwischen den Head-Tags schreiben wir nach „$(document).ready(function()“ den folgenden Code:

Url = $("a.modalbox").attr("href").replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{
"frameWidth" : 400,
„frameHeight“: 400

Was machen wir hier? Bei Tags Wir „ziehen“ den Link heraus, ersetzen darin „for_spider“ durch „content2“ und fügen ihn der URL-Variablen hinzu. Dann ersetzen wir das href-Attribut derselben Tags durch ein neues (den Wert der URL-Variablen). Nun, dann sind wir bereits mit dem Starten des Fancybox-Plugins vertraut. Sobald ein Besucher unsere Seite besucht, werden alle Links zu for_spider.php in content2.php umgewandelt – zu unseren modalen Fenstern.

Das ist alles für heute, es war eine lange Lektion, aber ich denke, sie war nützlich. Vielen Dank für Ihre Aufmerksamkeit und ein schönes Wochenende!