Der HTML-Code-Generator für Fancybox-Galerien.Erstellung beeindruckender Galerien

FancyBox

Tool zur Anzeige von Inhalten in einer "Lightbox"

FancyBox ist ein Tool, das sich auf die Anzeige von Bildern, HTML-Inhalten und Multimedia-Inhalten in einer eleganten "Lightbox" spezialisiert hat, die dem Design der Benutzeroberfläche von Mac-Systemen ähnelt und über dem Inhalt der Webseite schwebt. Es wurde mit der jQuery-Bibliothek erstellt und ist unter einer doppelten Lizenz erhältlich - MIT und GPL.

Eigenschaften:

1. **Vielseitigkeit:** FancyBox ermöglicht die Anzeige verschiedener Inhalte, einschließlich Bilder, HTML-Elemente, SWF-Dateien, iframe-Rahmen und Ajax-Anfragen.

2. **Anpassbarkeit:** Das Tool kann durch Einstellungen und CSS-Stylesheets an individuelle Bedürfnisse angepasst werden.

3. **Gruppierung und Navigation:** Es gruppiert automatisch zusammenhängende Elemente, was die Navigation zwischen ihnen erleichtert.

4. **Mausereignis-Unterstützung:** Wenn auf der Seite ein Mausrad-Plugin vorhanden ist, reagiert FancyBox auf Ereignisse im Zusammenhang mit der Bewegung dieses Geräts.

5. **Fantasievolle Übergänge:** Das Tool bietet eine effiziente Übergangsunterstützung unter Verwendung eines dedizierten Plugins.

6. **Schatten unter dem Element:** Es fügt dem vergrößerten Element einen ästhetischen Schatten hinzu, was die Lesbarkeit verbessert.

7. **Inline-Erkennung:** Automatische Erkennung von Breite und Höhe für im Inline-Modus angezeigte Elemente.

8. **Modales Fenster:** Die Möglichkeit, Inhalte in Form eines modalen Fensters anzuzeigen.

9. **Ajax-Unterstützung:** Ermöglicht das Übergeben von benutzerdefinierten Daten über Ajax-Technologie.

10. **iFrame-Unterstützung:** Unterstützt die Anzeige von Inhalten in iFrame-Rahmen mit der Möglichkeit, ihre Größe anzupassen (z. B. 75% Breite und Höhe).

11. **SWF-Format-Unterstützung:** Ermöglicht die Anzeige von Multimedia-Inhalten im SWF-Format.

12. **Beispielhafte Callbacks:** Definierte Szenarios für die Behandlung, wie die Behandlung eines nicht vorhandenen Bildes, einer URL-Adresse, einer Google-Karte (iFrame) und von Videos von YouTube (iFrame).

FancyBox ist ein umfassendes Tool zur Präsentation verschiedener Inhalte auf Websites und bietet ästhetische und funktionale Lösungen für Benutzer.

Die Installation der Fancybox-Galerie

Die Fancybox-Galerie hat in den letzten Jahren aufgrund ihrer vielseitigen Anwendung an Popularität gewonnen. Aus diesem Grund gibt es im Netz viele Artikel über Installationsmethoden und Möglichkeiten, Links zu Miniaturbildern und Originalgrafiken hinzuzufügen. Einige dieser Artikel enthalten jedoch fehlerhafte Informationen, was die Installation dieser Galerie entmutigen kann.

Zur ordnungsgemäßen Funktion der Galerie genügt im Wesentlichen eine JS-Datei, da die meisten CMS-Systeme bereits eine solche Datei haben:

`<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>`

Zusätzlich wird eine CSS-Datei mit geringer Größe und eine Start-JS-Datei benötigt:

`<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />`

Die Bilder müssen sich nicht in zwei Verzeichnissen befinden oder dieselben Erweiterungen haben. Sie können Bilder von Ihrem eigenen Server oder von externen Servern wie Google hinzufügen. Es ist jedoch eine bewährte Praxis, zumindest Miniaturbilder von Ihrem eigenen Server hinzuzufügen.

Sie können die JS- und CSS-Dateien direkt von den Entwicklerseiten herunterladen, aber es wird empfohlen, sie auf Ihrem eigenen Server zu speichern.

Wenn Sie Probleme beim Herunterladen der JS- und CSS-Dateien haben, können Sie unser Download-Programm verwenden. Dieses Tool ist geschützt gegen das Herunterladen von Dateien von verdächtigen Websites. Es funktioniert, indem es einen entsprechenden Befehl an den Browser sendet, um das Anzeigen der Dateien zu verhindern, aber das Herunterladen zu ermöglichen. Sie können das Programm hier herunterladen.

Auch wenn heutzutage praktisch niemand einzelne HTML-Dateien verwendet, sondern eher Vorlagen, finden Sie unten einen Beispiel-HTML-Code.

Wie funktioniert der Generator?

Der FancyBox-Galeriegenerator funktioniert auf einfache Weise - Sie fügen einfach Links zu Miniaturbildern und Originalbildern sowie optional Beschreibungen hinzu, und erhalten dann den fertigen HTML-Code zum Einfügen auf Ihrer Website.
Sie können beliebige Links zu Bildern hinzufügen, eigene oder von anderen Websites.
Dieser Generator erfordert nicht das Erstellen von Verzeichnissen oder das Benennen von Bildern von 01 bis 20.
Da solche Vorschläge existieren, die meiner Meinung nach lächerlich und unrealistisch für die Verwendung in CMS-Vorlagen sind.
Diese Lösung ist ideal für diejenigen, die keine Zeit mit manuellem Erstellen von Bildergalerien verschwenden möchten.

Integracja mit Ihrer Website

Um den FancyBox-Galeriegenerator zu nutzen, müssen Sie zuerst die entsprechenden JavaScript- und CSS-Dateien zu Ihrer Website hinzufügen. Diese Dateien sind für das ordnungsgemäße Funktionieren der Galerie erforderlich. Für den FancyBox-Galeriegenerator können Sie die folgenden Dateien verwenden:

  <!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria fotografii </title>
    <meta name="description" content="Online-Generator für Fancybox-Galerien.">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css' />
<link rel='stylesheet' type='text/css' href='https://use.fontawesome.com/releases/v5.15.4/css/all.css'/>    
</head>
<body>
<div class="photo-album">
//Hier fügen Sie den generierten HTML-Code ein.//
</div>
<script defer><br> $(document).ready(function(){
$(".photo a").fancybox({
  protect: true,
  loop: true,
  smallBtn: false,
  buttons: [
    "close"
  ],
  idleTime: 3,
  image: {
    preload: true,
  },
  btnTpl: {
    arrowLeft:"<button data-fancybox-prev class='fancybox-button fancybox-button--arrow_left' title='Poprzednie zdjęcie'><i class='fas fa-angle-left'></i> </button>",
    arrowRight:"<button data-fancybox-next class='fancybox-button fancybox-button--arrow_right' title='Następne zdjęcie'><i class='fas fa-angle-right'></i> </button>",
    close:"<button data-fancybox-close class='fancybox-button fancybox-button--close' title='Zamknij podgląd'><i class='fas fa-window-close'></i></button>"
  }
 })
})
</script>
</body>
</html> 
</body>
</html>

Wie benutzt man den Bildergalerie-Generator?

Die Verwendung des Bildergalerie-Generators ist äußerst einfach. Es genügt:

Eine Liste von Bildern vorzubereiten.
Ihre eigenen Bilder hochzuladen oder aus einer vorhandenen Bibliothek auszuwählen.
Beschreibungen, Links und andere Elemente zu den Bildern hinzuzufügen, falls erforderlich.
Die Galerieoptionen nach Belieben anzupassen.
Den HTML-Code der Galerie zu generieren.
Den HTML-Code auf Ihrer Website einzufügen und die beeindruckende Bildergalerie zu genießen.

Für das CMS PHP Fusion

Obwohl diese Galerie nicht ausschließlich für das CMS PHP Fusion geschrieben wurde, ist sie unabhängig davon, ob es sich um v7 oder v9 handelt, wahrscheinlich die beste Lösung. Es handelt sich nicht um ein weiteres Plugin, nicht um ein weiteres Panel, das auf allen Unterseiten eines ausgewählten Moduls angezeigt wird.
Das hat manchmal Verwunderung ausgelöst und nicht selten auch Gelächter, wenn jemand ein Bild sah, das nichts mit der Nachricht oder dem Blog zu tun hatte. Es handelt sich um ein Add-On, das es ermöglicht, ein Bild an jeder beliebigen Stelle einer Nachricht, eines Artikels oder eines Blogs anzuzeigen. Wenn Sie nur einen Link zu einem Bild hinzufügen, wird es in einem schönen Rahmen angezeigt.
Wenn Sie mehr als ein Bild hinzufügen, wird automatisch eine Fotogalerie erstellt.
Auf der rechten Seite wird ein zusätzliches Navigationsmenü angezeigt,
wie:
1. Automatisches Scrollen.
2. Vergrößerung des Bildes.
4. Möglichkeit, Videos hinzuzufügen.
5. Tooltips.
Darüber hinaus können Sie es selbst testen. Da das CMS PHP Fusion V9 eines der besten CMS-Systeme ist, die es auf der Welt gibt, ist die Installation kinderleicht.
Es ist nicht einmal erforderlich, alle JS-Dateien hinzuzufügen.
Denn PHP Fusion hat das alles seit über 20 Jahren. Allerdings müssen Sie die JS- und CSS-Dateien hinzufügen.
Sie können eine der vielen Methoden zum Hinzufügen von JS- und CSS-Dateien auswählen und sie einfach hinzufügen. Obwohl ich seit einigen Jahren keine Panels mehr verwende, habe ich versucht, ein solches zu erstellen. Wenn etwas nicht funktioniert, geben Sie bitte Ihr Feedback ab.
Dieses Panel richtet sich eher an Menschen, die es gerne unkompliziert mögen.
Anstelle von JS-Dateien finden Sie hier Links. Ich empfehle jedoch, diese Dateien auf Ihrem eigenen Server in einem beliebigen Verzeichnis zu platzieren, das zur Fusion-Definition hinzugefügt wurde. Bei Fragen können Sie sich immer im Forum, hier oder im offiziellen PHP Fusion Forum melden.

Artykuły