popup – WPAdamı

jQuery ile Resim Önizlemesi

Serkan Algur — Sat, 25 Sep 2010 01:17:48 +0000

jQuery ile yapılmış birçok galeri ve resim özellikleri kodlamalarının yanında sanırım bu biraz ufak tefek ve gösterişsiz kalacak.Ama resimlerin üzerine gelindiğinde ortaya çıkan bir popup ve bunu kullanmak isteyen bazı arkadaşlar olabilir. Keza benim böyle bir ihtiyacım oldu ve oturdum bu kodlarla ilgilendim. Buraya yazma nedenim de isteyen faydalanabilsin diyedir. Zamanında tooltip ile ilgili bir jQuery plugini vardır elimde. Şimdi ise ufak bir galeri scripti var :D Neyse. Bu script size galeri olarak ya da sayfalarınızda kullandığınız thumbnail (ufak resim) resimlerinizin üzerine gelindiğinde büyük hallerinin ortaya çıkmasını ve görünebilir hale gelmesini sağlıyor. Dediğim gibi ufak bir galeri oluşturabilirsiniz bu kodlarla.

Bir diğer özelliği de büyük kodlamalardaki gibi açılan popup alanının fare imlecine olan uzaklığı. Yani siz resmin üzerine gelidğinizde popup direk resmi kapatmıyor, fare imlecinin yanında açılarak her iki resminde görünmesini sağlıyor.Kodlara geçelim isterseniz.

Öncelikle javascript kodlarımızı görelim;

Kodlar;

//Resim üzerine gelince açılan popup
//Kodu düzenleyip geliştiren : Serkan Algur
//Web Sitesi: http://wpadami.com
//Genel amaçla kullanınız. Geliştirmek size kalmış.

this.resimonizleme = function(){
    /* Düzenleme */

        xOffset = 10;
        yOffset = 30;
        // Bu iki ayar görüntülenecek popup alanının  fare imlecine olan uzaklığını değiştirir.
        // İstediğiniz Şekle Getirmek için oynamalar yapaiblirsiniz.

    /* Düzenleme Sonu */
    $("a[rel*=popupacil]").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "
" + this.t : "";
        $("body").append(""+ c +"");
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn();
    },
    function(){
        this.title = this.t;
        $("#onizleme").remove();
    });
    $("[rel*=popupacil]").mousemove(function(e){
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

// Kodları başlangıçta çağıralım
$(document).ready(function(){
    resimonizleme();
});

Yukarıdaki kodlarda görebileceğiniz gibi bir ayar alanı var. Buradan x ve y ofsetlerini ayarlayarak açılacak popup alanının fare imlecine uzaklığını ayarlayabiliyorsunuz. Bunu seçmek size kalmış. Ve diğer ayarlar da görebileceğiniz gibi resmin yolunu belirten a alanına bir rel kod atadım. Bunun adını da popupacil olarak belirledim. buraları dilediğiniz gibi değiştirebilir, benim rel olarak atadığım alanları class olarak da düzenleyebilirsiniz. Bu değişiklği yaptığınızda aşağıdaki HTML kodlarında da gerekli değişiklikleri yapın. Bir de fadeIn değer olarak sabit bir değer bıraktım . Bunun iki opsiyonu var slow ve fast. slow opsiyonu 600ms, fast opsiyonu 200ms, benim bıraktığım gibi kalırsa varsayılan gecikme değeri olarak 400ms belirlenir. Bunu değiştirmek için tırnak işaretlerini kullanarak fadeIn(“slow”) ya da fadeIn(“fast”) olarak belirtebilirsiniz.

Sonra da html dosyamızı oluşturalım ve kodlarımızı çağıralım.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



jQuery ile resim önizlemesi

Önce kodlarımızı çağıralım. jQuery kaynağı olarak kendi sitesini kullandım. Siz dilediğiniz bir adresi veya kendi sitenizdeki jQuery dosyasını çağırabilirsniz.

Sonra da araya stil kodlarımızı serpiştirelim. Burada #onizleme alanı bizim popup alanımız için ayarlanmıştır. Siz renkleri ve diğer değişkenleri istediğiniz gibi ayarlayın.

Stil kodları da bittiğine göre resimlerimizi ekleyelim. Burada unutmamanız gereken link alanındaki rel kodlamasıdır. Bütün resimlerin linklerini atarken rel=”popupacil” kodunu eklemeyi unutmayın.



    jQuery ile Resim Önizlemesi

    Resim Galerisi (alt başlık olmadan)

    
        
        
        
        
    

    Resim Galerisi (alt başlıklar ile)

    
        
        
        
        
    
    Anasayfa

Bütün işlem bundan ibaret. Canlı örnek için buraya tıklayın. İndirmek için aşağıda kaynak kodlarını ve resimleri size aktarıyorum.

Hadi Selametle.

jqrsmpopup

Siteyle birlikte açılan jQuery Popup

Serkan Algur — Tue, 31 Aug 2010 12:00:10 +0000

Bu kod kadir a ‘nın Friendfeed üzerindeki jQuery popup ile ilgili bir bilgi soran şu yazdığı yardım isteğine (silinmiş bu feed) rastlamamla ortaya çıkmış oldu. İyi de oldu. Bugün ofiste toplanması gereken iki adet masaüstü bilgisayar vardı. Onları bitirdiğimde biraz ar-ge çalışması :) yaptım. Daha önceden elimde bulunan bir popup scriptini document.ready fonksiyonuyla birleştirme firkriyle bir adım da atmış oldum. Orasıyla burasıyla oynayınca istediğim gibi de ortaya çıktı. Şimdi bunu nasıl yapabileceğinizi anlatmaktan memnuniyet duyacağım. Başlayalım…

Öncelikle açılışta siteyle beraber yüklenen javascript popuplar uzun zamandır bizimle birlikte ama kimi farklı pencerede kimi de rahatsız edici derecede kötü oluyor. jQuery nin hayatımıza girmesiyle birlikte bu işleri yapmak ve insanları rahatsız etmeden site içinde kullanmak daha basit bir hal aldı. İşte aşağıda anlattığım şekilde bunu başarabilrsiniz.

Öncelikle HMTL sayfamızı oluşturalım. Burada yukarıdaki yazıda belirtmiş olduğum document.ready komutu ile çağırma işlemini yapıyoruz. O satırları ayrı bir şekilde işaretledim. Aşağıda javascript dosyasındaki ile karıştırmayın. Burada sitenize eklemeniz gereken alanlar popupContact ve backgroundPopup adlı div alanları. Bunları da işaretledim. Bu kodlar ile açılacaktır Popup. Yapmanız gereken şey işaretli alanlardaki divleri olduğu gibi sitenizde açmak istediğiniz yere eklemek. Tabii css ve javascript dosyalarını da entegre etmeyi unutmadan :D

jQuery popup kodu

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


	
	Siteyle birlikte açılan jQuery Popup!
	
	
	



	
		Açılıyoooor :)
	
	
		x
		Siteyle birlikte açılan jQuery Popup!
		
			Bu ufak kodlar ve jQuery sayesinde harikalar yaratabiliriz.
			


			Açılışta popup gelmesi için biraz kafa yordum :D ama değdi.
			


			ESC ye popup dışına yada x e basarak kapanabilir.

Sonra da siteye eklediğimiz popup.js özelliklerine göz atalım. Unutmayın ki javascript dosyasını ben yazmadım. Sadece ona uygun olarak bazı değişiklikler yaptım.

jQuery popup javascript dosyası

Popup sisteminin aktifliğini belirleyelim.

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

Yükleme ve devredışı bırakma komutları

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.7"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

Ortalayalım…

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6

	$("#backgroundPopup").css({
		"height": windowHeight
	});

}

E tabii yükleme safhasında olacakları belirleyelim. Buradaki document.ready bir butona tıklama durumunda kullanılabilecek düzeyde hazırlanmıştı. Benim kullandığım fonksiyon HTML dosyasında. Yazdım yukarıda.

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

	//LOADING POPUP
	//Click the button event!
	$("#button").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});

	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});

});

Sonrasında CSS dosyasını irdeleyelim. Burada kodlarla ilgili body için de düzenleme yapmıştım. Siz ihtiyacınıza göre cssleri sitenize ekleyebilirsiniz.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

Bir günlük Çerez bırakarak açmak

Aşağıdaki bir ve birden çok yoruma istinaden çok sorulan bir soruyu da yanıtlayayım böylelikle. Popup u çerez kullanarak günde bir kere açmak için aşağıdaki scripti /head alanından önce ekleyin. Bu kodu eklediğinizde lütfen ilk kodda paylaştığım document.ready içeren scripti tamamiyle kaldırın. Çerez kodunun çalışmama ihtimali var kaldırmazsanız. Buna ek olarak ilk verdiğim cookie kodu çalışmamıştı. Bundan dolayı özür dilerim. Ancak çalışan bir tane yazmayı başardım. Kodda çok bir değişiklik göremeyebilirsiniz ancak ek olarak body alanına bir adet onload kodu eklemeniz gerekmekte. Bunu da kodun altına ekledim.

Not: Ekteki dosyada bu verdiğim kodu bulamazsınız. Onun için buradan kopyalayıp yapıştırın lütfen.

body alanına onload olarak eklediğinzde şu şekilde görünmesi gerekir.

Örneğe bakalım :) tıklayın bu yazıya.

Bir kere açılan örneğe bakalım :).

Örneklerde de nasıl çalıştığını görebilrisiniz. Eğer kafanıza yatmayan bir kısım varsa yorum bırakabilirsiniz. En kısa sürede size cevap veririm.Örnekteki Dosyaları indirmek için aşağıdaki indirme linkine tıklayın.

Hadi Selametle…

Dosyayı Ek Alanından İndiriniz

Popup