Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

Ajax XML Ticker Secmece Tv (yazı galerileri için)

Konu, 'Javascript' kısmında gevv tarafından paylaşıldı.

  1. gevv

    gevv Yeni Üye

    Kayıt:
    20 Haziran 2008
    Mesajlar:
    8
    Beğenilen Mesajlar:
    0
    Meslek:
    tekniker
    Şehir:
    istanbul
    [​IMG]

    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


    [​IMG]

    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

    Kod:
       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ı

    Kod:
       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

    Kod:
       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 :D 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ı

    Kod:
    <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

    Kod:
    <script type="text/javascript" src="http://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ı

    Kod:
    #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

    Kod:
    <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 :) uzun süre uğraştığım çözemediğim sorunuda Yakup Hacam Tamamladı Artık verileri Rastgele görüntüleyebiliyor
    şuan secmece tv kullanıyorum :) buradan görebilirsiniz sağ menüde