JQuery Listeli Dönen Banner Galeri
Merhaba arkadaşlar sizler için düzenlediğim bir çalışmamdan bahsedeceğim. Web site çalışmalarında çok kullanılan bir Jquery çalışmasıdır. Bu çalışma ile sitenizi güzelleştirip daha ilgi çekici gösterebilirsiniz. Yapmanız gerek her zaman olduğu gibi çalışmayı indirmek ve yorum yapmak olacaktır:) size bir çok çalışma sunuyoruz sadece 1 tek yorum istiyoruz 🙂 bunuda bizden esirgemezsiniz umarım.
İlk önce çalışmamızı en aşağıdaki linkten indiriyorsunuz. Çalışmayı açtığınızda 9 adet dosya ile karşılaşacaksınız ama siz sadece İmages klasörü ve index.html dosyasını düzenleyeceksiniz:) Tabi arka plan veya yazı tipi gibi özelliklerini değiştirmek istiyorsanız css dosyasını düzenlemeniz gerekmektedir. İmages klasöründe bannerde kullanacağınız resimler bulunmaktadır.Yani resimlerim büyük halleri olacak ama şunu unutmayın; bannerdaki resimlerin boyutları önemli, klasörün içinde girdiğinizde ve resimlerin boyutlarına baktığınızda 600×300 olduğu belli oluyor zaten. Photoshop programı veya benzeri bir program kullanarak bannerda yer alacak resimleri istenilen boyuta çevirebilirsiniz. İmages klasörünün içinde ise Thumbs klasörü bulunmaktadır. O klasörde bulunan resimler ise banner ın yanındaki küçük resimlerdir zaten dikkatlice baktığınızda neyden bahsettiğimi anlayacaksınız. ( resimlerin boyutları 64×64)
Resimlerinizi ayarladıktan sonra yapmanız gereken index.html dosyasını dreamweaver programında açarak düzenlemek olacaktır. Aşağıdaki kodlarda tek bir listelenmiş dosyayı gösterdim, <img src=”images/thumbs/hk.jpg” alt=””/> kodunun olduğu yere thumbs klasöründeki resminizin adını yazmalısınız, yani h.jpg yerine koyacağınız resmin adı gelmeli. <p><span>Hong Kong</span><br/>Lorem ipsum per augue platonem gubergren at, affert signiferumque in.</p> kısmı ise küçük resmin yanında yer alan resimle alakalı yazıdır. Oradaki düzenlemeyide ona göre yapmalısınız.
Gelelim ikinci kısma; burda ise bannerda yer alacak resim ,resim yazısı ve bannerdaki büyük resme tıklandığında gidecek resim yolunu yazıyorsunuz ,
a) <a href=”images/hk.jpg”></a> bannerde yer alan resim
b) <a href=”https://www.omerbozalan.com” target=”_blank”></a> tıklandığında gidecek sayfa
c) <span>jQuery List Rotator</span><br/> resim yazısı başlığı ve içerik yazısı
Lorem ipsum eos et nonumy delenit, ea nam petentium suavitate, in utinam torquatos cum.
Tritani facilisi at pro, tation quaeque usu at, kasd ullum fuisset at nam. No sed decore.
AŞAĞIDA TAM KODLAR YER ALMAKTADIR.
<li> <div> <img src="images/thumbs/hk.jpg" alt=""/> <p><span>Hong Kong</span><br/>Lorem ipsum per augue platonem gubergren at, affert signiferumque in.</p> </div> <a href="images/hk.jpg"></a> <a href="https://www.omerbozalan.com" target="_blank"></a> <div style="top:233px; left:0px; width:600px; height:auto;"> <span>jQuery List Rotator</span><br/> Lorem ipsum eos et nonumy delenit, ea nam petentium suavitate, in utinam torquatos cum. Tritani facilisi at pro, tation quaeque usu at, kasd ullum fuisset at nam. No sed decore. </div> </li>
Yukarıdaki tek bir banner resmine ait anlatımdır. Diğer banner resimlerinide aynı şekilde düzenleyebilirsiniz.
KOLAY GELSİN
Anlatım : Ömer BOZALAN
(99)
Yorum(35)
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.
Emeğinize sağlık Ömer Hocam,örnek çalışmaya baktım ,şuan iniyor.Sayfanın altına ekleme yapabilirmiyiz?Yada üst kısma banner ekleyip alta bu kısmı alsak olabilirmi?
tabiki yeni bir index sayfası oluşturup istediğiniz gibi alabilrsiniz ama head ile head arasında olan script kodlarınıda almanız lazım.
JQuery Listeli Dönen Banner Galeri isimli çalışmanız çok güzel acaba burada fade efekti kullanabilirmiyiz. kullanılırsa nasıl
beğendiğim çalışmalardan bir tanesi hocam cok teşekkürler yayınlayıp erişme kolaylığını sağladığının için.
“hocam java kodları cakışmasın diye ne yapmak lazım yada bir sayfada farklı farklı iki tane JQuery banner galeri yayınlaya biliyormuyuz”
ÖMER HOCA CEVAP:
harika çok beğendim.emek verip paylaştığınız,bize farklı bakış açısı kazandırdığınız için de ayrıca teşekkür ederim.
rabbim ilminizi artırsın dilerim.
selam hocam bu manşet çok hoşuma gitti ama bridge ve osaka resimleri (küçük olan resimler) gözükmüyor çok uğraştım ama çalışdıramadım siz bir el atarsanız seviniriz.
Gökhanım yukarıda zaten anlattım :)ki senin çözmen gerekli:) thumbs klasörün içindeki resimler 64×64 boyutunda küçük resim olarak atıyorsun. sonra images klasörüne büyük olanını atıyorsun boyutlarına dikkat et.
sonrasında ise index.html dosyasına girip ordaki isimleri değiştiriyorsun.
Şimdi İndirdim Çok Güzel Gözüküyor Ellerinize Sağlık Tamda Aradığım Banner altına Kavuşturdunuz beni 🙂
hocam resimleri değiştirmekden bahsetmiyorum JQuery banneri indiriyorum hiç bir rar dan cıkarıyorum hiç bir şey yapmadan index sayfasını acıyorum küçük resimlerden iki danesi gözükmüyor ama sırası geldiğin de büyük resimi acıyor orjinali olan küçük resimlerden iki tanesi gözükmüyor
benim için artık burlar sorun değil hocam 🙂
küçük resimler acmasa bile JQuery banner 12 resimden oluyor ben acmayanları düzenleyip 10 resime indirdim orjinali 12 resim daha iyi gözüküyordu saygılar sayın hocam
hocam yeni kursa kidiyorum çok şey öğrendim ama kimse anladım da sizin kadar başarılı değil
Hocam Bunu Nasıl Değiştirebiliriz? (Soldaki Menü Panelini Sağ Tarafa Almak İstiyorum) Yardımcı Olabilir misiniz? Veya Tüyo Verebilir misiniz?
cemil arkadaşım bu tür bannerları tam anlamıyla tabikide anlatmamız mümkün değil. Böyle yazılımlarda az çok css bilgisine sahip olman lazım. O yüzden kendini bu konuda geliştir derim. Her zaman bizler olmayabiliriz:) kısa bir açıklamadan sonra anlatıma geçeyim:) belki diğer arkadaşlarada yardımcı oluruz.
Yapman gereken preview stil dosyasını dreamweaver prg. yardımıyla aç ve aşağıdaki satırda şu düzenlemeyi yap.
item_width:250,
item_height:75,
item_display:4,
list_align:”right”,
left olan kısmı right olarak düzenledikten sonra istediğin gibi olacaktır
kolay gelsin.)
Selamlar
Ben bunu ekledim yalniz panel divinin boyu cok uzun bu divi css ile degistireyim dedim 852 width veriyo tamam height’de bir veri yok yani nereden boyu kisaltiriz yardimci olursaniz sevinirim.
saygilar
mehmet arkadaşım küçük kutucukların yanındaki resmin alan boyutunu büyültmek küçültmek istiyorsan
prewiev.js den
screen_width:600, screen_height:300, ” yükseklik ve genişlik ayarlama”
küçük kutucukların botuyunu büyültüp küçültmek istiyorsan
prewiev.js den
item_width:250, item_height:75, ” yükseklik ve genişlik ayarlama”
TABİ BU AYARLARI DEĞİŞTİRDİĞİNDE YAZI TİPLERİ KÜÇÜLTÜLMELİ, SONRASINDA YAZI YAZILMIŞ ALANIN EFEKT YERLERİDE DEĞİŞMİŞ OLACAKTIR ONLARDA DÜZELTİLMELİ. DOLAYISIYLA BOYUT KÜÇÜLTTÜĞÜNÜZDE TÜM CSS’LERİ AYRI AYRI DÜZENLEMELİSİNİZ.
hocam bu menuyu tam sol tarafa ve en uste yaslamak istiyorum hangi kodlari degiştirmem gerekiyor bulamadım yardımcı olursan cok sevinir.ALLAH senden razı olsun emeklerin için
yusuf sol üst köşede yeni bir div açıp içeriği oraya aktarmakla bunu başarabilirsin.
süpeeeeeeeeerrr :))
Hocam çok teşekkürler
bunu haber sitesinde kullanmam için küçükler sabit olmalı.scrol yada mouse ortasıyla yer değişmeli mümkün mü.nasıl yaparım.teşekkürler
göksel arkadaşım sabit kalmasını istiyorsan o alana fazla resim koymayacaksın. bu kadar basit fazla resim koyduğunda scroll oluyor.
Hocam ben haber sitelerindeki gibi sadece kaymasını istemiyorum 4 tane nasıl yapabilirim yardımcı olurmusunuz lütfen?? 123456789 diye haber manşetlerindeki gibi nasıl yazarım ??
çok detay istedim hocam cevaplarsanız saolun biz kodlardan öğrenemye çalışıyoruz ne yapalım;:)
Merhaba hocam ben bu bannerin kodunu alıyorum kendi sayfama eklemeye çalışıyorum ama sayfa benim sayfamın kodunu değiştiriyor tam olarak hngi kodları almam gerektiğini açıklarmısınız lütfen.
Teşekkürler…
< div class="l-rotator" > satırı ve bu satıra ait div bitiş kodunu alıyorsunuz. Head ile head arasındakileri zaten kesin almalısınız.
olmadı efendim arka plan ayarlarımı yine değiştiriyor.
birde aldığım sayfada küçük resimler geliyor ana resim gelmiyor.
yardımcı olursanız sevinirim.
TEŞEKKÜRLER…
salman arkadaşım arkaplanını tabiki değiştirir. Dosyaların için css uzantılı bir dosya var. Onun içindekileri kendi sitene göre düzenleyeceksin. Fazla kodları kaldıracaksın.
onu ayarlamam nasıl olacak ? kısaca anlatabilirmisinz.
Sitenizi bilmeden görmeden nasıl ayarlayabilirim? En iyisi css komutlarını öğrenmeye bakın derim. Google dan css dersleri diye aratırsanız, videolu derslere ulaşabilirsiniz.
tamam teşekkürler hocam 🙂
Merhabalar,
Öncelikle emeğiniz için teşekkürler. Bir sorum olacak, sharepoint sitesine örneğinizi nasıl ekleyebilirim fikriniz var mı acaba?
Sayın hocam; öncelikle teşekkürler. Gerçekten ilaç gibi paylaşımlarınız var. İsteğim mümkün müdür bilemiyorum ama benim de bir sorum olacak.
Ben bu sliderı tam sayfa yapmak istiyorum. Ve aslında yaptım da. Fakat büyük resimlerin boyutları ne olursa olsun tam sayfaya genişletilmesini istiyorum. aslında bunu da main-img’ten yaptım. Fakat js resmi efektli bir şekilde açarken orjinal boyutuna göre açıyor. Acaba js kodlarında da resmi ekran boyutuna göre genişletmemiz mümkün müdür?
İbrahim arkadaşım, o kodların içinde boyutlarla alakalı kodlamalar olması gerekli. Siz o kodları da tam ekran boyutunda çalıştırmanız. Daha doğrusu büyük boyutlar girmelisiniz. Resmin sınırsız boyutu olmadığı için büyük boyutlu resim olarak boyut girmelisiniz.
Allah razı olsun ustad, yalnız sizden birşey rica edeceğim. Ben resimlerimi veritabanından çekeceğim için resim boyutları bazen büyük olabiliyor bu durumu düzeltebilmek için nasıl bir yol izlemem gerekiyor ustadim. Teşekkürler..
Zülfikar eklediğin sayfada resim boyutlarını belirtmişsen, sorun olmayacaktır.