Fancybox ile Mükemmel Görsel Deneyim

Web projelerinizde görselleri, videoları ve multimedya içeriklerini en zarif şekilde sunun. Eka Sunucu güvencesiyle yüksek performanslı, SEO uyumlu ve mobil dostu Fancybox entegrasyonu rehberi. 2026 Core Web Vitals standartlarına tam uyum sağlayan teknikler.

Hemen Başla Uyumlu Hosting

Mobil Uyumlu

%100 Responsive

Yüksek Hız

GPU Hızlandırma

SEO Dostu

Google Dostu Yapı

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.