Zum Inhalt springen

Dynamische css background-image(s) in Verbindung mit media field?

Erstellt am 26. November 2010 · 1 Antwort · letzte Antwort am 29. November 2010

Tags: Bilder, JavaScript & AJAX, Frage

jousch ·

Hallo liebe Leute,

ich hab prinzpiell das hier gefunden: #71995

das sagt mir mal wie es praktisch mit einem Bild funktioniert.

Ich versuche allerdings das ganze über ein Javascript zu realisieren, bei dem ich als erstes einen Array mit den URLs zu den Bildern angeben muss.

//...
// Set speed (milliseconds)
var speed = 1000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'slideshow1_1.jpg'
Pic[1] = 'slideshow1_2.jpg'
Pic[2] = 'slideshow1_3.jpg'
Pic[3] = 'slideshow1_4.jpg'
Pic[4] = 'slideshow1_5.jpg'
//...

bzw. ich bin grad dran das ganze mit jQuery umzusetzen....

<script type="text/javascript">

    var bgArr = ["uploads/media/img1.jpg", "uploads/mediaasdf/img3.jpg", "uploads/mediaasdf/img4.jpg", "uploads/mediaadsf/img5.jpg", "uploads/mediaasdf/img1.jpg" ]; 
    var i=0;

    // Slideshow, nen
    setInterval(function() {
        $("#restaurante").css("background-image", "url("+bgArr[i]+")");
        (i < bgArr.length-1) ? i++ : i=0 
    }, 20000); 

    // es scheint als ob hier das forum was wegmacht ;---(
</script>

Jetzt würd ich gern wissen, wie ich das vernünftig machen kann.

Prinzipiell binde ich diese Bilder, sofern ich die IMAGE-Version brauche so ein sofern keine besonderen GIFBUILDER-Sachen darauf angewendet werden müssen:

lib.josdesign = COA
lib.josdesign {
  10 = TEXT
  10.data = levelmedia: -1, slide
  10.split {
    token = ,
    cObjNum = 1
    1 {
      10 = IMAGE
      10.file.import.current = 1
      10.file.import = uploads/media/
    }
  }
}

in wie weit muss ich das abändern, damit ich dies erstens in den <HEAD>-Tag bekomme und wie, das diese durchnummeriert gewrapped werden? :o ..da steh ich quasi a bissal an!

Bin für jeden Tipp dankbar! Vielen Dank im Voraus!

jousch ·

Die Lösung wird wohl jetzt so aussehen: (thx an Klausiiii)

page.headerData.10 = COA
page.headerData.10 {
 10 = TEXT
 10.value = Pic = new Array();
 
 20 = TEXT
 20 {
  data = levelmedia: -1, slide
  split {
   token = ,
   cObjNum = 1
   1.wrap = Pic.push("http://domain.net/uploads/media/|"); 
   1.current = 1
  }
 } 
 
 wrap = <script language="javascript">|</script>
}