CODEWITHSUNDEEP
php
Gian Martins
Gian Martins

Reputation: 5

Two divs with different backgrounds within the same loop

this code causes the images to be displayed on a rotating basis within the page.

<?php
$myImagesList = array (
  'image1.png' ,
  'image2.png' ,
  'image3.png' ,
  'image4.png' ,
  'image5.png' ,
  'image6.png' ,
  'image7.png' ,
  'image8.png' ,
  'image9.png' ,
  'image10.png'
);

shuffle ($myImagesList);


for ($i=0; $i<10; $i++) {
    if ($i == 5)
        echo '<div style="background:#939393;clear:both;width:760px;height:500px;">CONTENT</div>';
    echo '<img src="/imagens/' . $myImagesList[$i] . '" width="200" height="140" border="0" />';
}

?>

But how do I get these images, which have a "element (div)" separating them, have different (and different backgrounds) divs

EXAMPLE

how the code displays displays the content: IMAGE1

something like :

<Div style = "background: # 0600ff" id = "div02">
image6.png image2.png image5.png image1.png image10.png

<Div style = "background: # 939393">
CONTENT
</ Div>

image3.png image4.png image7.png image9.png image8.png
</ Div>



As I would like it to be displayed: IMAGE2

something like :

<Div style = "background: # 0600ff" id = "div02">
image6.png image2.png image5.png image1.png image10.png
</ Div>

<Div style = "background: # 939393">
CONTENT
</ Div>

<Div style = "background: # 0600ff" id = "div02">
image3.png image4.png image7.png image9.png image8.png
</ Div>

Upvotes: 1

Views: 59

Answers (2)

Indrasis Datta
Indrasis Datta

Reputation: 8618

Modifying your code with multiple if statements, you can try this:

shuffle ($myImagesList);
echo '<div style = "background: #0600ff" class = "div02">';
for ($i=0; $i<10; $i++) {
    if ($i < 5) {
        echo '<img src="/imagens/' . $myImagesList[$i] . '" width="200" height="140" border="0" />';
    }
    if ($i == 5) {
       echo '</div>';
       echo '<div style="background:#939393;clear:both;width:760px;height:500px;">CONTENT</div>';
        echo '<div style = "background: #0600ff" class = "div02">';
     }  
     if ($i > 5) {
        echo '<img src="/imagens/' . $myImagesList[$i] . '" width="200" height="140" border="0" />';
      }
  }
 echo '</div>';

Upvotes: 0

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

You can easily use 2 loops:

First 5 images :

echo '<Div style = "background: # 0600ff" id="div02">';
for($i=0; $i<5; $i++) {
    echo $myImagesList[i];
}
echo '</DIV>';

The content:

echo '<Div style = "background: # 939393"> CONTENT </ Div>';

Then the last 5 images:

echo '<Div style = "background: # 0600ff" id="div02">';
for($i=5; $i<10; $i++) {
    echo $myImagesList[i];
}
echo '</DIV>';

Please note that the id div02 is duplicated, this may cause some problems with javascript.

Upvotes: 2

Related Questions