Siteye Profesyonel Galeri Ekleme ( Fancybox Galeri)
Merhaba arkadaşlar, daha önceki derslerimizde Fancybox Galeriyi ( web galeri ) siteye ekleme yöntemini yazılı olarak anlatmıştık. Anlattığımız yönetem facybox’ın eski sürümüydü. Şimdi ise sitenize daha güzel efektler barındıran ve web sitenizin galerisini daha da profesyonel hale getiren facybox galerinin son sürümünü videolu şekilde anlatmaya çalıştık. Bu anlatımı gerçekleştirirken de sitemizde yayınladığımız css ve html ile yapılmış site örneğini kullandım.Dolayısıyla elinizde bulunan CSS veya Html ile yapılmış bir siteye nasıl Fancybox galeri ekleyeceğinizi öğrenmiş olacaksınız. Video hakkındaki düşünceleriniz veya anlamadığınız yerleri sn veya dk olarak bildirirseniz sevinirim.
Hayırlı seyirler.
Videoyu izleyemiyorsanız Youtube.com engellenmiştir.
Çözüm için DNS adreslerinizi aşağıdaki gibi değiştirin.
Tercih edilen DNS Sunucusu: 8.26.56.26
Diğer DNS Sunucusu : 8.20.247.20
.
(993)
Yorum(60)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
hocam keşke indirme dosyasınıda ekleseydiniz sayfanın altına
zuhal youtube’den indirme imkanınız vardır. İnternetten araştırın youtube’den video indirme diye 🙂 kolay gelsin olmadı burdan devamlı izlersiniz 🙂
Emeğinize sağlık Ömer Hocam,gerçekten çok yararlı bir paylaşım olmuş,sitelerini yapmaya yeni başlayan arkadaşlar bu tür galerilerin kıymetini ileride anlayacaklar.Bu arada videoyu izleyipte hala yapamayan varsa ne demeli bilemiyorum:))
Tşk ederim Hacer hanım. videoda birçok şeyden bahsettik aslında . Galeri için değilde bazı şeyleri öğrenmek için bile izlenebilir. mesela jquery çakışmasında yapılması gerekenleri öğrenebilirsiniz. 🙂 neyse inşallah yerine ulaşmıştır.
Elinize sesinize sağlık ömer hocam bu fancy galerisiniz php de sayfalama mantığında yada function içinde nasıl kullanabiliriz yada siz daha önce kullandınızmı acaba teşekkürler ?
hocam selam ben resimleri siteme ekledim oluyor ama yeni pencerede acıyor dedigniz gibi js dosyalarının hepsini sildim sayfamdaki ama yine yeni pencerede acıyor bana bu konuda yardımcı olursanız sevinirim
yusuf bey kendi sitenizden önce sadece galeri çalışması yapın. yani içerikte hiçbişey olması sadece resimler olsun. ordan yaptığınız hatayıda görürsünüz. yoksa çalışmaması mümkün değildir.
hocam eline saglık bu galeri yi 4 satır alt alta yapıcagımız zaman tablolarla mı yapsak daha iyi olur yoksa div lerle mi? tablolar daha mı karışık olur? şimdiden teşekkürler
serkan galeriyi tablolarla da yapabilirsin divlerle de hiçbir sorun olmaz. zevkine bağlı yani. hangisi hoşuna giderse onunla yap.
sagolun hocam yazılarınızı severek takip ediyorum sayenizde çok yol kat ettim. site içi arama kodları ile ilgili bi yazınız var mı acaba. arama kutusu tasarımını yaptım fakat sadece içinde bu kodlar var.
fakat arama yapmıyor
Hocam ben web programlama okudum. Ama bana öğretilenler hep yarım yarım oldu. Ama bu sitede bu eksikleri fazlasıyla kapatıyorum. Şu galeri işini de sayenizde çözdüm. Emeğinize sağlık
Ensar bey tşkler. Elimizden geleni yapmaya çalışıyoruz. Bunda da başarılı oluyorsak ne mutlu bize.
Teşekkürler Aradıgım Bunun Gibiydi Buldum.
hocam ben bundan önceki fancybox videosunu izledim ve yaptım ama dreamweaverde kod hatası verdiğine rağmen doğru çalışıyor sorun çıkarmı ?
reto arkadaşım dreamweaver da nasıl bir hata veriyor. videoda izlediğin şekilde düzgün yapabildin mi?
hocam fancybox da küçük resimleri ve tıklayınca büyüyen resimleri sistem kodlarla küçültüp büyütüyormu yoksa resimleri ayrı ayrı o ölçülere mi getirmemiz lazım? her resmin ölçüsü aynı olmadıgı için farklı tiplere geliyor çirkin oluyor?
serkan arkadaşım boyutlandırma işlemine program karışmıyor. sen küçük boyutunu koyuyorsun sonra büyük boyutunu o senin belirlediğin boyutlara göre küçük veya büyük oluyor. kısacası demem o ki bütün küçük resimlerini photoshop programı ile aynı boyutlarda yapman sayfa düzeni açısından önemlidir yoksa sayfada farklı boyutlarda küçük resimler kötü görünüm oluşturur.
kendi temama galeri yapamıyorum. videodaki herşeyi harfiyen yerine getirdim herhangi bir sürüm çakışması olmamasına rağmen galeriye dönüşmüyor.
Onur facebook grubumuzdan dosyayı gönderebilirsin. ordan incelerim
jquery gözümden kaçmış sağlıklı bir şekilde çalışıyor şuan teşekkürler paylaşım için 🙂
Ben galeri kısmında yaptımda alttaki scriptte olan jquery ile cakısıyor. Sorunu anlamadım hocam. Aynı problemi lightbox’tada yapıyor.
Bir yardımcı olabilir misiniz?
Erkan arkadaşım çakışma problemi sitemizde bulunmaktadır. İncelemenizi tavsiye ederim.
Bir çok siteden baktım çakısma problemi neden olabilir diye. Fakat sorunu çözemedim.
Müsait oldugunuz zaman yardımcı olabilir misiniz hocam?
Erkan başka sitelerde arama dedimya bizim sitede var. Al işte linki http://www.omerbozalan.com/jquery-ve-lightbox-cakismasi-cozumu.html incele.
hocam ben site yapıyorum bu flashı attıgımda galeri sekmeme boyutlar değişiyor sitenin ne yapmam gerekiyo
ersin arkadaşım bu flash değil . Boyutları da kullandığın resimlere bağlı. Videoyu tam olarak izlersen belirttiğin div boyutu kadar alan dışına çıkmaz.
hocam ben uzun zaman sonra bu videoyu tekrar izledim ilk izleyişimde de aynı sorun çıkmıştı ama çözmüştüm bu seferde aynı sorun çıktı çözemiyorum lütfen yardım edin
sorun şu resme tıklayınca yeni sekmede açıyor ne yapabilirim?
hocam benim videoda anlamadığım şey şu siz fancyboxın script kodlarını kopyalayıp kendi sitenize yapıştırdığınız anda orda önceden var olan script kodlarınız var bizde onlar yok orada kafam karıştı daha sonra zaten önceden var olan script kodlarından birtanesini siliyorsunuz açıklık getirin lütfen 🙂
reto arkadaşım html sayfada daha önceden olan jquery kodlarını siliyorum çünkü çakışma oluyor eski kodlarla o yüzden bahsettiğin gibi farklı sekmede açıyor. O yüzden eski kodları silip fancybox kodlarını koyuyoruz videoda da zaten onu söylüyorum.
gercekten çok işe yaradı anlattıkların tşk ederım kardesım
siteye resim ararken ne buldum:)emeğinize yüreğinize sağlık Ömer bey
hocam emeğine sağlık güzel bır paylaşım. benim bir sorunum var hocam. dreamweaver da yaptğım çalışmada temam gorunuyor. hiç bir sorun yok ama ön izleme yaptığımda tema gorunmuyor grı bir sayfa gorunuyor. resımlerımde bir sorun yok. açılıp kapanıyor. hatta ilave bile yaptım. resımlerım kayıyor ekranda mesela. ama tema olayını çözemedim. bir yorum bekliyorum ilginize şimdiden teşekkürler…
basri arkadaşım burdan sorunu anlayamam mümkün değil görmem lazım. Facebook grubumuzdan bana dosyayı atarsan ancak o şekilde yardımcı olabilirim. Kolay gelsin.
Merhabalar, yapılanları birebir uyguladım. Önizlemede herhangi bir problerm yok. Fotolar videodaki gibi açılıyor fakat servere yüklediğim zaman ufak fotolara tıkladığım zaman “The requested content cannot be loaded.
Please try again later.” uyarısını veriyor. Neden olabilir acaba? Cevap için şimdiden teşekkürler.
(Tüm dosyaları eksiksiz servere yükledim)
yavuz bey küçük fotoğrafların uzantıları nedir. o fotoları uzantılarını kontrol edin birde yollarını kontrol etmeniz gerekmektedir.
Güzel anlatım çok yardımcı oldu siteme aynen uygulayabildim ancak logo dahil fotoğrafların dışında border çıkmaya başladı. Onu nasıl giderebilirim?
cimdemonur arkadaşım, yapmanız gereken border oluşan resmin satırına border=0 eklemeniz.
örnek:
şeklide kullanmalısınız.
hocam dün gece yorum yazmıştım yorumu bulamadım :/
bi sorunum vardı
bende yorum yazdığın email adresinden sana dönüş yaptım. Emailini okumanı tavsiye derim.
tmm hocam allah razı olsun gördüm 🙂
SORUN SİZCE NE OLABİLİR HOCAM
s.a hocam sitem için hazırladığım şablon da çalışıyor fakat şablondan oluşturduğum yeni sayfalarda ”10 satırında sözdizimi hatası var.Bu hata düzeltilinceye kadar kod ipuçları çalışmayabilir” uyarısı alıyorum ve ön izlemede küçük resimler gözüküyor ancak büyük resimler hata veriyor
10.satır;
!window.jQuery && document.write(”);
yardımcı olurmusunuz
İsmail arkadaşım, sitende birden fazla jquery kodu olduğu için çalışmayabilir. O yüzden sitemizde jquery çakışması diye aratırsan ve orda yer alan konuyu okursa sorunu çözeceğine inanıyorum. Kolay gelsin.
hocam anlatımınız çok güzel 2 saat dir bir video dinledim ama anlamadım sizi anlatımızı dinledim 1 saatimi almadan yaptım. size bir sorum olacak iframe kullanarak nasıl yapacağız. yani anasayfadaki görünümün yanışını.
Sara, iframe artık kullanılmıyor. Hem sen ne yapmak istiyorsun onu bilmeden birşy söyleyemem
tarım ile ilgili bir site
hocam ben bunu ekledim ancak benim bannerimde link vardı bu kodları ekleyince bannerimin içinde bulunduğu tablo bozuldu yani bannerin kenarında boşluklar oluştu bannerin yanında bulunan resimle duruş orantısı bozuldu muhtemelen sayfaya ekleyeceğim her resimde linkli olanlarda bu sorun olacak bu sorunu nasıl aşabilirim
Doğan arkadaşım, galerinin kendi style.css dosyası var. O dosyadaki resimlerin sağ sol boşluklarını sıfırlamalısın. Kısacası biraz css bilgisi istior.
teşekkür ederim hocam ellerinize sağlık 🙂
ömer hocam kayan resimlere böyle bir uygulama yapa bilirmiyiz tıklayınca büyüyeceği şekilde
Burak Bey tabiki de yapılabilir. Farklı bir uygulama yapılması lazım.
Ömer hocam yine çok güzel anlatımınızla bir eksiğimi daha tamamladım.
Teşekkürler
iyide hocam bunun dosyalarını nerden indirecez ?
asma tavan modelleri arkadaşım 🙂 videoyu izlemediğin belli. Videoda hangi siteden indireceğin yazıyor. isminle uğraşacağına videoyu izlesen :))
Hocam merhaba.Kolay gelsin.
Sayfa klasörümdede style.css dosyası var.Ne yapmam gerekir.Acil bir çalışma için uğraşıyordum.Maile yanıt rica edebilirmiyim?
İyi çalışmalar.
Levent arkadaşım, çok genel bir soru sordun. Ne yapacağını söylemiyorsun ki… Ben ne diyeyim şimdi. 🙂
Ömer hocam.İlginize teşekkür ederim.Galeri bölümü olmayan bir temadaki herhangi bir kullanmayacağım html dosyasını galeriye çevirmek istemiştim.Bu html dosyasına fancybox eklemek istedim.Dosyaları yüklerken temanında css dosyası olduğunu gördüm.Fanybox dosyalarını ana klasör yerine ayrı bir fancybox klasörü olarak kullanabilirmiyiz veya sanırım çok zor olur fakat fancybox dosyasındaki tüm kodları temadaki css kodlarının altına ekleyebilirmiyiz şeklinde sormak istemiştim.Meşgul ediyorum kusura bakmayın.
Levent,evet fancybox style.css kodlarını kopyalayıp kendi style.css dosyana yapıştırabilirsin. Diğer söylediğinde olur. Ama fancybox style.css dosyasının ismini değiştireceksin. Sonra html dosyasından da ismini değiştirmen gerekiyor.
güzel bir konuya değinmişsiniz merak ettiğim bir konuydu paylaşım için teşekkürler sitenizi takipteyim 🙂