3 tabloya göre bir 3 görüntüleri koymak nasıl?

3 Cevap php

Php / mysql kullanılarak, ve görüntü url ile bir veritabanı tablosu var duyuyorum. Ben nasıl onları her td veritabanından görüntü url dayalı farklı bir görüntü gösterecektir böyle, bir 3 x 3 tablo ile bir php sayfada koyabilirsiniz bilmek istiyorsunuz?

Ben alfabe görüntüleri vardır böyle bir şey, yaratmak istiyorum:

|a|b|c|
|d|e|f|
|g|h|i|

Şimdiye kadar, ben sadece böyle bir şey oluşturmak için ise yapmanız kullanmak mümkün duyuyorum:

|a| | |
|b| | |
|c| | |

Teşekkürler.

3 Cevap

Bu genel yaklaşım olacaktır:

$query = "SELECT url FROM images LIMIT 9";
$resource = mysql_query($query);

# Get the number of images
$count = mysql_num_rows($resource);

$i = 0;
$per_row = 3;

# Start outputting the table
echo '<table><tr>';
while($row = mysql_fetch_assoc($resource)) {
    # The image cell
    echo '<td><img src="'.$row['url'].'" /></td>';
    # If three cells have been printed, and we're not at the last image
    if(++$i % $per_row == 0 && $i > 0 && $i < $count) {
        # Close the row
        echo '</tr><tr>';
    }
}

# If the last row isn't 'full', fill it with empty cells
for($x = 0; $x < $per_row - $i % $per_row; $x++) {
    echo '<td></td>';
}
echo '</tr></table>';

Yani, sonuçlar normal ama her üçüncü madde üzerinde, bir satır değişikliği yankı sadece döngü (</tr><tr>). Sadece bu nedenle ek koşullar, başında veya sonunda fazladan satır değişiklikleri baskı yok emin olun.

Oluşan tablo, böyle bir şey (satır sonları eklendi) olmalıdır:

<table>
    <tr>
        <td><img src="image.jpg1" /></td>
        <td><img src="image.jpg2" /></td>
        <td><img src="image.jpg3" /></td>
    </tr>
    <tr>
        <td><img src="image.jpg4" /></td>
        <td><img src="image.jpg5" /></td>
        <td><img src="image.jpg6" /></td>
    </tr>
    <tr>
        <td><img src="image.jpg7" /></td>
        <td><img src="image.jpg8" /></td>
        <td><img src="image.jpg9" /></td>
    </tr>
</table>

Zaten görüntülenen kaç görüntüleri izlemek, ve sadece </tr><tr> her 3 görüntüleri yayan bir sayaç kullanın. İpucu: $count % 3

Eğer gerçekten tablolar ile bunu yapmak gerekmez (düşünmek, sadece bir tablo içinde bir şey görüntülemek için çalışıyoruz, gerçekten şeylerin bir tablo oluşturmak için çalışıyoruz değil).

Biraz CSS ile bunu şöyle yapın (MSIE için html5-Shiv kullanmak eğer uygun HTML5 öğelerini kullanabilirsiniz) yapabilirsiniz:

<div class="figure">
<img src="mypic.jpg" alt="">
<div class="description">Description goes here</div>
</div>

ve CSS:

.figure {
float: left;
margin-right: 10px; /* for space between the columns */
padding: 5px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.figure .description {
margin-top: 1em;
font-variant: italic;
}

Hepsi aynı boyutta ve bir NxN ızgara onları zorlamak istiyorsanız, (class = "grid") bir div sarılmasıdır böyle bir şey (3x3 ızgara, 100px iç şekil genişliği (yani 90px görüntü genişliği yapmayın) )

.grid {
padding-left: 10px; /* to mirror the right margin of the last .figure in the row */
width: 350px; /* 3*100px + 2*10px margin + 3*2*5px padding */
}
.figure img {
width: 90px;
}

Bu şekilde (sarma CSS tarafından işlenir satırları sarmak için nerede hakkında endişelenmenize gerek kalmadan bir döngü içinde sırayla görüntüleri sadece çıktı, siz maksimum genişliğe sahip ızgara zorlamayın, eğer at kaydırılır Tarayıcı penceresinin sağ ucu).

etiketler