Fancybox nedir ve neden kullanılmalıdır?

Fancybox, web sayfalarında görselleri, videoları ve HTML içeriğini zarif bir şekilde (lightbox) görüntülemeyi sağlayan, JavaScript tabanlı, mobil uyumlu ve yüksek performanslı bir kütüphanedir. Kullanıcı deneyimini (UX) artırır.

Fancybox SEO uyumlu mudur?

Evet, doğru yapılandırıldığında SEO dostudur. İçeriklerin taranabilirliğini engellemez ve kullanıcıların sitede kalma süresini artırarak dolaylı yoldan SEO'ya katkı sağlar. 2026 Core Web Vitals standartlarına uygundur.

Fancybox lisansı ücretli mi?

Fancybox, açık kaynaklı projeler ve kişisel kullanım için genellikle ücretsizdir ancak ticari projeler için lisans satın alınması gerekmektedir.

Fancybox Entegrasyonu ve Kullanım Rehberi - Premium Medya Lightbox Çözümü 2026 - Eka Sunucu | Der führende Anbieter für digitale Dienstleistungsautomatisierung in der Türkei

Fancybox Nedir ve Neden Önemlidir?

Web sitenizdeki medya içeriklerini bir üst seviyeye taşıyan modern teknoloji.

Kusursuz Galeri Deneyimi

Kullanıcılarınızın sayfadan ayrılmadan görselleri yüksek kalitede, yakınlaştırarak ve kaydırarak incelemesini sağlar. Dokunmatik cihazlarda doğal hareketleri destekler.

Modern ve Hafif

Gereksiz kod yığınlarından arındırılmış, modüler yapısı sayesinde sitenizin açılış hızını etkilemez. CDN hizmetimiz ile birleştiğinde ışık hızında çalışır.

Erişilebilirlik (A11Y)

Klavye navigasyonu ve ekran okuyucu desteği ile tüm kullanıcılar için erişilebilir bir deneyim sunar. W3C standartlarına tam uyumluluk sağlar.

Kurulum ve Entegrasyon

Projenize Fancybox'ı dahil etmenin en hızlı ve güvenli yolları.

1. CDN Yöntemi (Önerilen)

En hızlı entegrasyon için CDN bağlantılarını kullanabilirsiniz. Bu yöntem sunucu yükünü azaltır.

HTML

<!-- CSS Dosyası -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"/>

<!-- JS Dosyası (Body sonuna ekleyin) -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
                    

Eka Sunucu İpucu: Yüksek trafikli siteleriniz için Profesyonel SSD Hosting paketlerimizi kullanarak statik dosyalarınızı maksimum hızda sunabilirsiniz.

2. NPM / Modüler Kullanım

Modern JavaScript projeleri (React, Vue, vb.) için paket yöneticisi kurulumu.

BASH / JS

# Kurulum
npm install @fancyapps/ui

// Projenize Dahil Etme
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

// Başlatma
Fancybox.bind("[data-fancybox]", {
  // Ayarlarınız
});
                    

Örnek Kullanım Senaryoları

Görsellerden videolara, iframelerden AJAX içeriklere kadar geniş kullanım alanı.

Basit Resim Galerisi

HTML

<a href="buyuk-resim-1.jpg" data-fancybox="gallery" data-caption="Resim Açıklaması 1">
  <img src="kucuk-resim-1.jpg" alt="Thumbnail" />
</a>

<a href="buyuk-resim-2.jpg" data-fancybox="gallery" data-caption="Resim Açıklaması 2">
  <img src="kucuk-resim-2.jpg" alt="Thumbnail" />
</a>
                    

Gelişmiş JS Yapılandırması

JavaScript

Fancybox.bind("[data-fancybox='gallery']", {
  loop: true,
  thumbs: {
    autoStart: true,
  },
  toolbar: {
    display: [
      "zoom",
      "slideshow",
      "fullscreen",
      "download",
      "close",
    ],
  },
  on: {
    ready: (fancybox) => {
      console.log("Galeri Hazır!");
    },
  },
});
                    

2026 SEO Standartları ve Performans

Görsel yoğunluklu sitelerde SEO performansını nasıl korursunuz?

Lazy Loading (Tembel Yükleme): Fancybox, görselleri sadece ihtiyaç duyulduğunda yükleyerek sayfa açılış hızını (LCP) optimize eder. Resim optimizasyonu ile birleştirin.
CLS (Cumulative Layout Shift) Önleme: Görsellerin boyutlarını (`width` ve `height` attribute) HTML'de belirterek düzen kaymalarını engelleyin. Bu, Google sıralaması için kritiktir.
Erişilebilirlik: `alt` etiketleri ve `data-caption` kullanımı, arama motorlarının görsellerinizi anlamasına yardımcı olur.
Sunucu Yanıt Süresi (TTFB): Scriptlerin hızlı yüklenmesi için VPS veya Cloud Hosting altyapısı kullanın.

Performans İpucu

Web sitenizde çok sayıda yüksek çözünürlüklü görsel kullanıyorsanız, Eka Sunucu'nun NVMe SSD diskli sunucularını tercih edin. Yüksek I/O hızı, galeri yüklemelerindeki gecikmeleri ortadan kaldırır.

Hosting Paketlerini İncele

Sıkça Sorulan Sorular (SSS)

Fancybox kullanımı ve entegrasyonu hakkında merak edilenler.

Fancybox jQuery gerektirir mi?

Hayır, Fancybox v4 ve v5 sürümleri tamamen bağımsız (vanilla JS) olarak çalışır ve jQuery gerektirmez. Ancak jQuery projenizde varsa onunla da uyumlu çalışabilir. Modern web standartları (ES6 Modules) için optimize edilmiştir.

Mobil cihazlarda dokunmatik hareketleri destekler mi?

Evet, Fancybox tamamen mobil uyumludur. Sürükleme (swipe), çimdikleyerek yakınlaştırma (pinch-to-zoom) ve dokunmatik navigasyon özelliklerini doğal olarak destekler. Responsive tasarım ilkelerine uygundur.

Videoları (YouTube, Vimeo) lightbox içinde açabilir miyim?

Kesinlikle. Fancybox; YouTube, Vimeo, HTML5 videoları, Google Haritalar ve hatta PDF dosyalarını bile lightbox içerisinde sorunsuz bir şekilde görüntüleyebilir. Sadece `href` özelliğine video linkini vermeniz yeterlidir, sistem otomatik algılar.

SEO performansını olumsuz etkiler mi?

Hayır, aksine doğru kullanımda SEO'ya katkı sağlar. Kullanıcıların sitenizde daha fazla vakit geçirmesini (dwell time) teşvik eder. Önemli olan küçük resimlerin (thumbnail) optimize edilmiş olması ve scriptin `defer` veya `async` ile yüklenmesidir. SEO Analiz aracımızı kullanarak sitenizi test edebilirsiniz.