Websitenizi ilk kez ziyaret edenler için duyuru yapmak veya e-mail kaydı almak için kapanabilir pencere yapımını anlatmaya çalışacağım. Burada yapılmışı var.
Bu yazıyı hazırlarken kullandığım kaynaklar: yensdesignve simplexdesign‘dan.
İlk once HTML sayfasına bakalım:
Sayfanın başına başlık, css dosyası ve js dosyalarını ekleyelim
AviaSlider; birçok farklı benzersiz geçiş efektine sahip birçok projede farklı amaçlarla kullanabileceğiniz harika bir jquery slider uygulamasıdır. Interaktif olarak kullanabileceğiniz AviaSlider, diğerlerinin aksine farklı efekler sunarak ziyaretçilerinizi etkiler.
8 benzersiz geçiş efetli olan aviaslider’ı web sitenizde manşet veya resimleriniz için küçük bir galeri olarak kullanabilirsiniz. jQuery 1.32 ile hazırlanan bu uygulamayı istediğiniz gibi biçimlendirebilir html5 ve css3 ile renklendirebilirsiniz.
Sadece 8KB boyuntaki bu ufak uygulama içerisindeki farklı efektleri farklı sayfalarda kullanabilir ve tooltip eklentisi sayesinde resimlerin büyük hallerini sayfa içerisinde açılan küçük bir pencereden ziyaretçilerinize gösterebilirsiniz. Bu pencere açılırken resim harici sayfaya uygulanan karartma efekti sayesinde ziyaretçilerinizin resime dikkat çekmelerini sağlayabilirsiniz.
Wordpress kullananların sayısı arttıkça wordpress için yapılan web uygulamalarının da sayısı oldukça artıyor. Wordpress ile yazılar yazmak dışında manşet atma, galeriler oluşturma gibi birçok işlemi de yapabilirsiniz. Aşağıdaki tamamen ücretsiz uygulamaları test edebilir ve kullanabilirsiniz. Wordpress için jQuery Galeri Eklentileri;
Snazzy Archives, günlük olarak kategorilenmiş bir arşiv sistemidir. Her yılı tek sayfada göstermesi sayesinde işiniz oldukça kolaylaşır. Web sitenizdeki tüm içeriği bu şekilde kategorileyerek kolaylıkla ziyaretçilerinize sunabilirsiniz.
Web sitenizdeki resimlerin daha büyük halini aynı sayfada göstermeyi sağlayan bu jquery tooltip uygulamasını kolaylıkla entegre edebilirsiniz.
Aşağıda yer alan basit ama kullanışlı jQuery uygulamaları her web servisinde kullanılabilir. Basit arayüzlü ve kullanımlı olan aşağıdaki tasarımaları web siteniz ile uyumlu hale getirebilir ve ücretsiz olarak kullanabilirsiniz. işte muhteşem 5 jQuery uygulaması;
Image Blur, her web uygulamasında kullanılabilecek oldukça hoş bir jQuery uygulamasıdır. Resimlere ilginç bir bulanıklık efekti veren bu uygulama resmin üzerine gidildiğinde netleşmeye başlayarak eski haline dönüyor. Tam tersinin yapılması ve geliştirilmesi muhtemel bir uygulama.
Seahorse gelişmiş bir form denetim uygulamasıdır. Bu muhteşem uygulama ile web sitenize yerleştireceğiniz tüm formları kontrol edebilirsiniz. En fazla kaç karakter yazılacağı, istediğiniz karakterleri engelleme, metin veya sadece sayı bulunması gibi seçenekleri etkileyebildiğiniz gibi herhangi ek işleme css kodlarına gerek formlardaki yazı renklerini anında değiştirmeniz mümkün. Ayrıca ip adresi, e-mail adresi kontrolü de yapabilmekte. Bu ve buna benzer bir çok denetime bu uygulama ile sahip olabilirsiniz.
resimler web sayfalarının yönetilmesi en zor öğelerindendir. jquery gün geçtikçe daha da zengin uygulamalar üretmemize olanak sağlamakla kalmıyor, görsel anlamda da bir çok kolaylık sağlıyor.
bunun bir diğer örneği aşağıda tanıtacağımız visual lightbox isimli bir masaüstü programdır. program bilindik lightbox eklentilerinde ne varsa hepsini bünyesinde barındırmakla kalmıyor üstelik onlarca tema * * * desteği sunuyor. mesela facebook, mac ve vista bunlardan sadece bir kaçı.
Diğer özellikleri arasında resimlerinizi galeri yapıp sırayla göstermek, sayfa kaydırıldığında göstericiyi ekranda animasyon eşliğinde odaklamak, resim değişimlerinde zoom-in efekti kullanması olarak sayabiliriz. yazılımın web sitesine gitmek için tıklayın.
Video Lightbox adından da anlaşılacağı gibi LightBox uygulamasının videolu hali. Video LightBox sayesinde sitenize videoları güzel bir popup efektiyle ekleyebilirsiniz. Altyapı olarak lightbox JS kullanan sistem oldukça şık bir görünüme sahip. Bu programın diğerlerinden farkı ise sitenize hiçbir kod eklettirmemesi. Programı buradan indirip kurun.
<--------------------------------------------------------------->
İlk adım; video ekleme. YouTube, Google Video, MySpace, Vimeo, Metacafe veya kendi videonuzun (flv,mp4, 3gp) linkini kopyalayıp Video Url kısmına yapıştırın.
<--------------------------------------------------------------->
ikinci adım; videoda kullanmak istediğiniz şablonu seçin. buradan önizleme resminin ve videonun kalitesini ve boyutlarını belirleyebilirsiniz.
Web sitenizde fotoğraf veya resimlerinizi farklı yöntemler ile ziyaretçilerinize sunmak isteyebilirsiniz. jQuery ile hazırlanan jQuery.popeye sayesinde web sitenizdeki tüm görselleri kişiselleştirebilirsiniz. Gelişmiş interaktif görseller için hazırlanan jQuery.popeye sayesinde fotoğraflarınız ile slayt gösterileri hazırlayabilir, fotoğraflarınızın altına notlar yazabilir veya fotoğrafınızın orjinal/büyük halini aynı sayfada yayınlayabilirsiniz.
jQuery.popeye sayesinde web sitesinin akışını bozmadan (yeni sayfa yüklemeden) farklı işlemler uygulayabilirsiniz. Sayfada yayınladığınız görselin orjinal (büyük) halini tooltip özelliği sayesinde yayınlayabilirsiniz.
Selamlar dostlar
Yine kodaman da aslında pek çok istenmeyen bir yazımsı ile karşınızdayım. Bu seferki yazı Jquery ile resim gösterme teknikleri ve yeni çıkan bir plugin hakkında olacak hemencecik girizgahımızı yapalım
Efenim jquery hepimizin malumu; web geliştiricilerine çok büyük özgürlükler sağlayan bir framework çatısı. Flash gibi çoğu geliştiriciyi kastıran bir uygulamadansa tek satır kod ile aklınızda olan her türlü efekti (bounce, smoot,) ve uygulamayı yaptırtan (ajax, json …) eğlenceli bir o kadarda insanın ufkunu açan bir framework
jQuery günümüzde oldukça popüler ve genişlemiş bir kütüphane. css3 ise yeni bir dil olmasına rağmen oldukça kullanışlı ve görsel olarak muhteşem. Bu ikisi birleşince ortaya çok güzel çalışmalar çıkabiliyor. Fakat css3 çalışmaları tam olarak tamamlanmadığından tarayıcıların daha alt sürümlerinde çalışmayabilir. Aşağıdaki uygulamaları web sitenize ekleyebileceğiniz gibi uygulamalar ilham kaynağınız olup kendiniz farklı çalışmalar yapabilirsiniz;
Polaroid photo viewer with CSS3 and jQuery | demo
Polaroid photo viewer, css3 ve jQuery ile yapılmış farklı bir uygulamadır. Farklı birçok resmi ekranda yayar ve mouse ile taşınmasını sağlar.
Sweet AJAX Tabs With jQuery 1.4 | demo
Sweet AJAX Tabs, css3 ve jQuery ile hazırlanmış bir tab uygulamasıdır. Bu uygulama sayesinde web sayfanızda yeni sayfa yüklemesine gerek kalmadan diğer sayfalar arası geçişi sağlayabilirisiniz. Bu sayede ziyaretçileriz daha az bağlanma sorunu yaşamış olurlar.
İnternet sayfası tasarımcıları çoğu zaman kendi işlerini kendileri görmek zorunda kalıyorlar. Ancak günümüzda vakit çok önemli keşfedilmiş yerleri tekrar keşfetmeye hiç gerek yok. Bu gönderide “slideshow” ihtiyacınızı karşılayacak kodları/eklentileri bulacaksınız. Eklentiler farklı dillerde yazıldığı için kendi sisteminizie uygun bir çözümü bulabileceğinizi umuyorum.
Buyurun;
Bu ücretsiz açık kaynak kodlu yazım için Christopher Einarsrud’e teşekkür ediyoruz.
