Ajax XML Ticker Secmece Tv Yayında (yazı galerisi için)

Gördüğüm kadarı ile bu sıralar bloglarda yazı galerileri moda kimi eklentiler ile kimi flash ile galerilerini oluşturuyor bende uzun süredir bu olaya kafayı taktım flash ile bir galeri yapmıştım fakat görüntü stediğim gibi olmadı nede olsa hazır program ile yapmıştım ara ara bir kaç deneme oldu ama işe yaramadı en son Ajax XML Ticker (txt file source) scripti buldum txt dosyasından verileri çekip görüntülüyordu bu tam benlik dedim database bağlantısı yok çalışmalara başladım Şuan Sağ menüde bulunan Secmece Tv Haline nasıl geldiğini merak ediyorsanız buyrun
Script Ajax tabanlı benim scriptler hakkında hiç bir bilgim yok sadece kullanmasını biliyorum görümünü güzel efektli geçişleri var aşağıda resimde görüldügü gibi ilgili linkin başlığı ve kısa bir açıklama. ilk etapda bu şekilde kullanacaktım




bu bilgilerin çekildiği txt dosyasında ise aşağıdaki kodlar var her mesaj için ayrı kod şimdi neler yapmalıyım nasıl temama uygun hale getirim ?

tickercontent.txt dosyasında bulunan kodlar

   1. <div class="message"><a rel="nofollow" href="http://www.javascriptkit.com" target="_new">JavaScript Kit</a>  
   2. Comprehensive JavaScript tutorials and over 400+ free scripts!</div>

ilk olarak başlık biraz büyütulmeli renk değiştirilmeli scriptin css kodlarına çeşitli font kodları ekledim dene yanıl olmadı düşündüm temamda yan menüde bölüm başlıkları h2 etiketleri arasında bulunuyor son yorumlar,kategoriler vb. bende txt dosyasında başlığı h3 etiketi içine alırım olur biter dedim işlemi yaptım temamın style.css dosyasına sidebar h2 kodlarını kopyaladım h3 yaptım başlık sorununu çözdüm

devamında arka plandaki sarı renk bunuda temada yan menünün rengine uygun yaptım ki o sırada bu rengi belirleyen kodun yerine resim göstermek için gerekli kodu eklesem ne olur dedim uyguladım sarı arka plan rengi yerine arka plan resmi ekledim

ajaxticker css kodları

   1. #ajaxticker1{  
   2. width: 200px;  
   3. height: 100px;  
   4. border: 1px ridge black;  
   5. padding: 5px;  
   6. background-color: #FEEEB8;  
   7. }

buradaki background-color: yerine

   1. background:  url(images/dell_lcd.jpg) ;

fakat resim biraz garip göründü altta resmin bir parçası daha vardı sebebi eksik olan no-repeat Erhan Abinin bir yazısından aklıma geldi resmin tekrar etmemesi için bu kodun eklenmesi gerekli bakınız CSS ile Arkaplan Resmi

ilk aklıma gelen Elektronik devrelerde kullanılan LCD Resmi oldu geriye yazıyı lcd içinde uygun yere oturtmak kaldı padding: margin: kodları ile biraz oynama yaptım oldu birde txt dosyasında
div class= message etiketlerinin içinde bir link ve açıklama var bunu 3 adet yaptım her seferinde 3 link görüntülendi açıklama yazılarını kaldırdım neyse

fakat bir türlü uygun lcd görseli bulamadım birde görselde köşeler kalın olduğundan yazı alanı dar oluyordu elimdeki arşivi karıştırıken eski tüplü bir televizyon resmi gördüm güzel olur enteresan onu kullandım oda olmadı yıl 2008 teknolojik olsun LCD Televizyon görsel avına çıktım sizlerlede paylaştığım Dell image bank sayfasına ulaştım aradığım resmi buldum photoshop ile biraz işlemek gerekli

Photoshop ile yapılan işlemlerin Videosunu hazırladım Buradan indirebilirsiniz

birde LCD Tv ekranının içinde karıncalanma görüntüsü olsa daha değişik olur dedim tv karıncalanma görüntüsü avına çıktım pardus-linux forumlarından buldum biraz kes biç işlemi ve LCD Ekrana yerleştirme Videoda gördüğünüz gibi

buraya kadar tamam ama bir türlü içime sinmedi çok garip göründü sonradan bir lcd tv ekranda yazı linkleri ne yapsam acaba link yerine resim gösterilebilirmi ama txt dosyasından resim kodu olurmu dene gör aşağıda gördüğünüz resim kodunu ekledim (html) wordpressde yazılarımıza eklediğimiz resimlerin kodu visual editör yerine html kullandığınızda göreceksiniz

html resim kodları

<img src="http://localhost/wordpress/wp-content/uploads/2008/06/_dmos-pcb.jpg" alt=""  title="_dmos-pcb" width="416" height="340" class="alignnone size-full wp-image-356" />

iyi resim görüntülendi süper ama resmi televizyon ekranına oturtmam gerek uğraşdur olmadı enson yahu yazıları h3 etiketi içine almıştım resim kodunuda h3 içine alayım belki olur eğer tutarsa istediğim gibi yön veririm resime denedim oldu ayrıca ekrana yerleştirdiğim karıncalanma resmi ile geçiş efektti çok iyi anlaştılar sonrasında resimleri hazırladım bu iş için PhotoFiltre Studio kullandım resim düzenlemede kolaylık sağladı

yapılan işlemlerin Videosunu Buradan indirebilirsiniz

ekranın içine yerleşecek beyaz resmin genişliği max 275x yüksekliği ise max 171x olacak beyaz resmin içine yerleşek olan yazı resminin ise genişlik max 275x yükseklik maz 150x resimlerimi pages.google sitesinden aldığım alana yükledim malum trafik limiti sonrasında txt dosyası düzenlendi ben resim kodları için wordpress kullandım resimleri toptan upload edip yazı alanına ekledim sonrasında görsel editöre geçip (visual) resimlerin linklerini ekledim tekrar html editöre geçip kodları kopyalayıp txt dosyasına attım enson resim adersleri değişti h3 etiketleri eklendi vb. tebiki bunları toptan değiştirdim notepad++ programında sol üstte ara bölümünde değiştiri seçin ilgili değerleri girin ve hepsini değiştire tıklayın

gelelim wordpress temanızda nasıl kullanabilirsiniz

önce ajaxticker.js ve tickercontent.txt doayasını sunucumuza göneriyoruz tema klasörüne atın header.php dosyamızı açıp aşağıdaki kodu title tagının altına ekliyoruz

header.php dosyasına eklenen kod

<script type="text/javascript" src="https://www.r10.net/wordpress/<?php bloginfo('template_directory'); ?>ajaxticker.js"></script>

sonra style.css dosyamıza aşağıdaki kodları ekliyoruz

değiştirilen css kodları

#ajaxticker1{
width: 294px;
height: 236px;
padding: 5px;
background:  url(images/dell_lcd.jpg) no-repeat;
}
#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
}
#sidebar h3{
margin: 5px 5px 52px;
}

LCD Resminide temanızın resim klasörüne atın ismi farklı ise (genelde images olur) style dosyasına eklediğiniz kodlarda background bölümünden ismini değiştirirsiniz

sonrasında galerinin görüneceği yerin php dosyasına aşağıdaki kodları ekliyoruz ben yan menüde kullandım (sidebar.php)

Sidebar.php dosyasına eklenen kodlar

<script type="text/javascript">
var xmlfile="http://localhost/tickercontent.txt" //path to ticker txt file on your server.
//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", 10000, "fade")
</script>

kodlar arasında var xmlfile bölümü txt dosyasının yolunu gösteriyor kendi sitenize göre düzenleyin 10000 ise geçiş süresi bu düzenleme işlemlerini Notepad++ programı ile yapmanızı öneririm

bu kadar şuan bence en büyük eksik verileri rastgele gösteremesi bu özellik eklenebilirmi bilmiyorum araştırmalar devam ediyor bakınız umarım olur tamamlanmış halini buradan görebilirsiniz sağ menüde

gerçekten güzel teşekkürler

Sağolsun Yakup Hocamız rastgele görüntüleme için script üzerinde değişilik yaptı artık rastgele sorunuda çözüldü tam oldu verileri rastgele görüntülemek için ekteki dosyayı kullanırsınız ilk verilen sırası ile görüntülüyor

gevv süper bişey anlatmışın emegine teşekkürler

dell televizyonu değiştirdim tux tv aldım



tux tv yayında

arkadaşlar bende türkçe karakter sorunu oluşuyor nasıl çözebilirim index.php'de tr karakter kodu ekli yani sorun yok fakat ajaxticker'dan gelen veride TR karakteri göstermiyor.