ein bild aufgeteilt in drei div container laden...

F

fredolin

Erfahrenes Mitglied
Hi Leute,

ich habe ein Problem und weiß nicht wie ich dieses lösen kann.
Problembeschreibung:
ich habe drei divs, in den ich ein bild über die gesamte breit laden möchte. Das bedeutet, in jedem div ist ein teil des gesammten bildes zu sehen. Das Bild schneide ich in Photoshop zurecht und lege die Bildteile auf den Server ab. Nun möchte ich die einzelnen Bildteile als Hintergrund in den Divs laden. Nach einigen Sec. dann ein neues Bild laden.

Kann mir da jemand helfen?


HTML: 
<slider id="slide">
   <div class="slidhdbox"></div>        // Hintergrundbild Teil1
   <div class="slidhdbox"></div>      // Hintgergrundbild Teil2
   <div class="slidhdbox"></div>    // Hintergrundbild Teil3
   <div id="slider">
     <div class="slidbox">
     
     </div>
   </div>
</slider>
<div class="clear"></div>

Ich würde mich sehr freuen, wenn ich einige Denkanstöße bekommen könnte..

Danke

LG Fredolin
 
Eigentlich brauchst Du dein Bild gar nicht zu zerschneiden, denn über eine geeignete Positionierung (negative horizontale oder vertikale Position) kannst Du in jedem Div einen anderen Teil anzeigen. Über die Anzeige als Hintergrundbild kannst Du dich hier informieren:
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm
Für das zeitgesteuerte Ändern brauchst Du einen Timer, Stichwort setInterval():
http://de.selfhtml.org/javascript/objekte/window.htm#set_interval
Am besten die Dateinamen der Bilder in einem Array ablegen und einen Index für dieses Array von Intervall zu Intervall erhöhen.
Für das Ändern des Bildes bietet sich, da Du Klassen vergeben hast, jQuery an:
Code: 
$(".slidhdbox").css("background-image", "url(" + dateiname_des_bildes + ")");
Versuch mal, ob Du mit diesen Informationen weiter kommst.
 
Zuletzt bearbeitet:
Hallo Sempervivum,
erstmal danke für deine schnelle antwort. Doch leider bekomme ich das nicht so hin. hab da nun was anderes geschrieben, wo ich ein gesamtes Hintergrundbild wechselt.
Wenn Du mir da ein kleinen Code schreben könntest, woran ich mich orientieren könnte dann wäre ich dir sehr dankbar.

Viele liebe Grüße Fredolin
 
Verstehe nicht ganz, hast Du dein Problem jetzt gelöst oder brauchst Du noch ein Skript? Wenn letzteres, dann poste doch mal dein HTML.
Was wolltest Du denn eigentlich damit erreichen, das Bild über drei Divs aufzuteilen?
 
Ich wollte gerne so einen effekt erzielen wie eine monitorwand...hätte dann so 10 div's container gemacht und dann in diesen das bild eingefade.
Nun habe ich es aber einfacher gemacht. Ich lasse ein gesamtes Bild als Background Image einfaden und wechseln.

Momentan sieht meine Code so aus:

HTML: 
Slider (Hindergrundbilder werden gewechselt und eingefadet)

<slider>
   <div id="slider" class="slidebox0 gray90"></div>
   <div id="slidText" class="sliderText opacity25">Hallo ich bin eine Versuchstext</div>
   <div class="wrapper">
     <div class="workbox">
       <div class="bullets" style="display:none;">
         <div class="kreis"><div id="0" class="bulletsclick">0</div></div>
         <div class="kreis"><div id="1" class="bulletsclick">1</div></div>
         <div class="kreis"><div id="2" class="bulletsclick">2</div></div>
         <div class="kreis"><div id="3" class="bulletsclick">3</div></div>
         <div class="kreis"><div id="4" class="bulletsclick">4</div></div>
         <div class="kreis"><div id="5" class="bulletsclick">5</div></div>
       </div>
     </div>
   </div>
</slider>
<div class="clear"></div>

HTML: 
Javascript (jQuery)

$(document).ready(function() {
var click = false;
   var anzahl = 6;
   var counter = 1;
   var timeout = 10;
   var animationtime = timeout * 1000;
   var fadeOutTime = 800;
   var fadeInTime = 800;
  
  
   if(click == false) {
     setInterval(function() {
       showSlider();
       $('.bullets').css('display', 'none');
       clearInterval;
     }, animationtime);
   } else if(click == true) {
     $('.bullets').css('display', 'block');
     $('.bulletsclick').click(function() {  
       wechselSlider($(this).attr('id'));
       if($('.bulletsclick').click){
         clearInterval;  
       }
     });
   }
  
   function showSlider() {
   //var ausgabe;
     if(counter == 0) {counter++; return }
     $('#slider').fadeOut(fadeOutTime, function() {
       $('#slider').attr('class', 'slidebox'+ counter).fadeIn(fadeInTime);
      });
     counter == anzahl ? counter = 1 : counter++;
     //ausgabe = counter;
     //$('#ausgabe').text(ausgabe)
   }
  
   function wechselSlider(id) {
     $('#slider').fadeOut(fadeOutTime, function() {
       $('#slider').attr('class', 'slidebox'+ id).fadeIn(fadeInTime);
      });
   }


})

PHP: 
PHP (Script um dynamisch das CSS an zu passen und die Bilder aus einem Ordner zu laden)

header('Content-type: text/css');
$ordner = '../../img/slider/';
$serverpath = '../../img/slider/';
$i = 0;
//$maxwidht = '500';
//$maxheight = '326';
$handle = opendir($ordner);
while($galerie = readDir($handle)) {
   if($galerie != '.' && $galerie != '..' && !is_dir($galerie)) {
     if(strstr($galerie, 'png') || strstr($galerie, 'jpg') || strstr($galerie, 'gif') || strstr($galerie ,'jpge')) {
       $imageinfo = getImageSize($serverpath . $galerie);
       $i = $i+1;
       $imagesarray[] = array('background-image:url('.$serverpath.$galerie.')');
       $anzahl[] = array($i);
       echo $i;       
     }
   }
}
closeDir($handle);
//ksort($imagesarray);
$result = array_merge($anzahl, $imagesarray);
echo '<style type="text/css" media="screen">';

foreach($imagesarray AS $key => $value){
   echo '.slidebox'.$key.'{margin:0;padding:0;'.$value[0].';background-repeat:no-repeat;background-position:center top;
     box-shadow:0 8px 6px #BABABA;
     -webkit-box-shadow:0 8px 6px #BABABA;
     -khtml-box-shadow:0 8px 6px #BABABA;
     -moz-box-shadow:0 8px 6px #BABABA;
     filter:progid:DXImageTransform.Microsoft.Shadow(color="#BABABA", Direction=90, Strenght=4);
   }';
}
echo '</style>';
HTML: 
CSS

#slider       {margin:0;padding:0;width:100%;height:551px;float:left;overflow:hidden;}

.slidebox0     {margin:0;padding:0;background-image:url(../../img/slider/slidepic_01.jpg);background-repeat:no-repeat;background-position:center top;}
.sliderText     {margin:0 auto;padding:20px;width:920px;height:511px;background-color:#FDF5E6;display:block;}

.bullets     {margin:-65px auto 0 auto;width:300px;z-index:10;}
.kreis       {margin-right:10px;width:24px;height:24px;border-radius:18px;-moz-border-radius:18px;-khtml-border-radius:18px;-webkit-border-radius:18px;border:3px solid #2A2A2A;background-color:#FFDEAD;float:left;text-align:center;}
.bulletsclick   {margin:4px 0 0 1px;padding:0;text-align:center;width:20px;border:0px solid #add;cursor:pointer;}
.kreis:hover   {background-color:#8B795E;border:3px solid #EEEEE0;}

So das ist mein Code. Ich verwende es auf dieser Seite: www.business.webslay.de

Was ich auch gerne hätte, das wäre wie ich Text dazu einbelden kann.
Ich habe da schon etwas herum probiert und könnte mir vorstellen, um Text zu den richtigen Bildern ein blednen zu lassen das ich hier an diser Stelle was einfügen müss
HTML: 
Javascript (Ausschnitt für das automatik slide)

function showSlider() {
   //var ausgabe;
     if(counter == 0) {counter++; return }
     $('#slider').fadeOut(fadeOutTime, function() {
       $('#slider').attr('class', 'slidebox'+ counter).fadeIn(fadeInTime);
       $('#slidText').text('Ich bin ein Beispieltext'); // Hier weiß ich nun nicht mehr weiter???
      });
     counter == anzahl ? counter = 1 : counter++;
     //ausgabe = counter;
     //$('#ausgabe').text(ausgabe)
   }

Wenn DU mir da auch helfen kannst wäre super.. Auch wenn Du mir zeigen könntest wie ich ein Hintergrundbild in mehreren DIvs einblenden lasse.

Gruß Fredolin
 
Hier kannst Du dir ansehen, wie Du ein Hintergrundbild auf mehrere Divs verteilst. Wie Du siehst, kann man mit einer Programmzeile den Hintergrund in allen Divs wechseln:
http://jsfiddle.net/Sempervivum/yofdjbup/1/
Was den Bildwechsel betrifft, überleg doch mal, ob Du nicht besser ein fertiges Skript, wie z. B. Cycle2, verwendest. Weil es davon so viele gibt, lohnt es sich eigentlich nicht, einen Bildwechsel selbst zu programmieren. Bullets und Texte sind damit auch möglich.
Den Effekt der Monitorwand kannst Du auch erreichen, indem Du ein Gitter über den Slider legst.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück