Colorbox iframe sorunu

Bu sayfaya geldiğinize göre büyük ihtimal colorbox’ı bilmeğiniz yoktur. Bilmeyenler için kısa anlatacak olursak. Jack Moore‘un geliştirdiği bir lightbox eklentisidir. Kullanımı kolay ve arayüzü istediğiniz şekle sokabilirsiniz. Yani bir lightbox yerine popup olarak açılan üye girişi arayüzü de yapabilirsiniz.

Bu güzel eklentiyi iframe içinden açtırmak istersek sorun çıkmaktadır. Aşağıdaki kod ile bu sorunu kolayca çözebiliriz. Bu kodu iframe sayfasına ekleyiniz.

Burada yaptığımız işlem colorbox kütüphanesini parent ile index.html içinde çalıştırmış olduk. Fark ettiyseniz normal kullanımda olduğu gibi $(“.galeri”) şeklinde  yapmadık doğrudan colorbox’a parametreleri girip çalıştırdık.


$(document).ready(function(){
	//Resim için
		$('.resim').click(function (e) {
			e.preventDefault(); // varsayılan işlemi pasif ediyoruz.					
			var image=$(this).attr("href"); //url alınıyor.
			
			parent.$.colorbox({transition: "elastic", href: image }); //colorbox fonksiyonunu parent olarak çalıştırıyoruz.
		});
		
	//İframe için
		$('.iframe').click(function (e) {
			e.preventDefault();					
			var url=$(this).attr("href");
			
			parent.$.colorbox({transition: "elastic", href: url, iframe:true, open: true, width:'600px', height:'300px'});
		});
		
	//Youtube video için
		$('.youtube').click(function (e) {
			e.preventDefault();				
			var video=$(this).attr("href");
			
			parent.$.colorbox({transition: "elastic", href: video, iframe:true, open: true, width:'600px', height:'500px'});
		});
});

Önizleme

İndir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir