1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

[ASk] Auto Change Background image di CSS

Discussion in 'Pemrograman Web' started by in_foku, Jul 29, 2013.

  1. in_foku

    in_foku Ads.id Pro

    Joined:
    Aug 4, 2011
    Messages:
    265
    Likes Received:
    9
    Location:
    Yogyakarta
    Siang mastah CSS mohon pencerahnnya

    Ane lagi buat slider background image cuma ada kesulitan buat ambil background-image di css nya langsung dari folder dan otomatis berubah tiap ada upload terbaru.
    ane pake kode ini
    Nah bagaimana mengganti background imagenya biar bisa otomatis ambil dari folder image dan bisa otomatis ambil gambar terbaru di dalam foldernya.

    ane udah uplek2 mb google masih belum nemu pencerahan...
    ada yang taukah ? pakai php atau jquery atau apa ya?

    mohon bantuannya mastah...

    web yang baru ane coba : _www.daunlontar.com/vote
     
  2. mp3online

    mp3online Super Hero

    Joined:
    Jul 19, 2011
    Messages:
    2,228
    Likes Received:
    294
    Location:
    jakarta
    bikin css nya pake php aja boss biar lebih gampang :)
     
  3. airul

    airul Super Hero

    Joined:
    Nov 11, 2011
    Messages:
    2,256
    Likes Received:
    668
    Location:
    Magetan
    bner kata mastah diatas, ane dulu pernah buat jg.
     
  4. 4winner

    4winner Super Hero

    Joined:
    May 13, 2008
    Messages:
    6,038
    Likes Received:
    423
    Location:
    SEMINYAK BALI
    pakai php gan paling pas
     
  5. mp3online

    mp3online Super Hero

    Joined:
    Jul 19, 2011
    Messages:
    2,228
    Likes Received:
    294
    Location:
    jakarta
    contoh kalau pake php
    PHP:
    <?php
    header
    ('content-type: text/css');
    function 
    gambar_baru() { blababla...... }
    ?>
    .cb-slideshow li:nth-child(2) span {
    background-image: url(../images/<?php gambar_baru(); ?>);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    bisa disimpan dengan ext php atau css
    kalau pake ext css, htaccessnya tambahin ini (pilih salah 1 yg cocok dengan konfigurasi servernya)

    AddType application/x-httpd-php5 .css
    atau
    AddType application/x-httpd-php .css
    atau
    AddHandler application/x-httpd-php .css

    CMIIW
     
  6. andank

    andank Hero

    Joined:
    Oct 2, 2010
    Messages:
    511
    Likes Received:
    6
    Location:
    Banjarbaru, Kalimantan Selatan. Indonesia
    Idem sam agan mp3online
     
  7. in_foku

    in_foku Ads.id Pro

    Joined:
    Aug 4, 2011
    Messages:
    265
    Likes Received:
    9
    Location:
    Yogyakarta
    nah mastah blablanya bisa dijarin ?

    soalnya ane udah buat :
    kalau jalan sendiri bisa manggil gambar terakhir tapi kalau di panggil di css kok ndak muncul...

    mohon pencerahannya mastah...
     
  8. in_foku

    in_foku Ads.id Pro

    Joined:
    Aug 4, 2011
    Messages:
    265
    Likes Received:
    9
    Location:
    Yogyakarta
    kalau pake ini kok ndak berhasil ya mastah apa yg salah ?
    PHP:
    <?php
    header
    ('content-type: text/css');
    function 
    get_images1() {

    $exts 'jpg jpeg png gif';

    $str ''$i = -1// Initialize some variables
    $folder './bg7';

    $handle opendir($folder);
    $exts explode(' '$exts);
    while (
    false !== ($file readdir($handle))) {
        foreach(
    $exts as $ext) { // for each extension check the extension
            
    if (preg_match('/\.'.$ext.'$/i'$file$test)) { // faster than ereg, case insensitive
                //$str .= $file;
                
    $str .="<img src='bg7/"$file ."' alt='" $file "' />";
                
    //if ($str) $str .= '|';
                
    ++$i;
            }
        }
    }
    echo 
    $str;
    closedir($handle); // Were not using it anymore
    return $str
    }
    ?>
    [PHP]
     
  9. mp3online

    mp3online Super Hero

    Joined:
    Jul 19, 2011
    Messages:
    2,228
    Likes Received:
    294
    Location:
    jakarta
    aku bukan mastah, masih newbie jg :)
    dicoba sndiri dulu ya, soalnya aku lagi pake hp
    PHP:
    <?php
    header
    ('content-type: text/css');
    $dir 'images';
    $files scandir($dir1);
    $picture $files[0]; 
    ?>
    .cb-slideshow li:nth-child(2) span {
    background-image: url(../images/<?php echo $picture?>);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    }
    ini kayaknya yg paling sederhana, tp ngasih nama filenya hrs urut.

    kalau nama filenya ngacak, bisa disortir berdasar tanggal filenya.
    mungkin ini bisa buat referensi kalau mau bikin yg sortir file terbaru berdasar tanggal filenya
    hxxp://php.net/manual/en/function.filectime.php
     
    Last edited: Jul 31, 2013

Share This Page