The images are displayed different with PHP and HTML -
i have website , built function displays photos.
the problem when display gallery php function ...
<?php function gallery_1() { $picture_ids = array( 1,10,100,101,102,103, 104,105,106,107,108,109, 11,110,111,112,113,114, 115,116,117,118,119,12, 120,121,122,123,124,125, 126,127,128,129,13,130, 131,132,133,134,135,136, 137,138,139,14,140,141, 142,143,144,145,146,147, 148,149,15,150,151,152, 153,154,155,156,157,158, 159,16,160,161,162,163, 164,165,166,167,168,169, 17,170,171,172,173,174, 175,176,178,18,19,2, 20,21,22,23,28,29, 3,30,31,32,33,34, 35,36,37,38,39,4, 40,41,42,43,44,45, 46,47,48,49,5,50, 51,6,69,7,8,86, 87,88,89,9,90,91, 92,93,94,95,96,97, 98,99); $n = 6; // number of pictures in each row echo '<div class="row">' . php_eol; ($i = 0; $i < count($picture_ids); $i++) { // start new row after each $n pictures if (($i > 0) && ($i % $n === 0)) { echo '</div>' . php_eol; echo '<div class="row">' . php_eol; } echo '<article class="6u 12u$(xsmall) work-item" style="width: 40%;">' . php_eol; echo '<a href="images/originals/' . $picture_ids[$i] . '.jpg" class="image fit thumb"><img src="images/thumbs_large/' . $picture_ids[$i] . '.jpg" alt="" /></a>' . php_eol; echo '</article>' . php_eol; } echo '</div>' . php_eol; } ?> ... gallery looks this: gallery php
but if write same code in html, ...
<div class="row"> <article class="6u 12u$(xsmall) work-item" style="width: 40%;"> <a href="images/originals/1.jpg" class="image fit thumb"><img src="images/thumbs_large/1.jpg" alt="" /></a> </article> <article class="6u$ 12u$(xsmall) work-item" style="width: 40%;"> <a href="images/originals/10.jpg" class="image fit thumb"><img src="images/thumbs_large/10.jpg" alt="" /></a> </article> <article class="6u 12u$(xsmall) work-item" style="width: 40%;"> <a href="images/originals/100.jpg" class="image fit thumb"><img src="images/thumbs_large/100.jpg" alt="" /></a> </article> <article class="6u$ 12u$(xsmall) work-item" style="width: 40%;"> <a href="images/originals/101.jpg" class="image fit thumb"><img src="images/thumbs_large/101.jpg" alt="" /></a> </article> <article class="6u 12u$(xsmall) work-item" style="width: 40%;"> <a href="images/originals/102.jpg" class="image fit thumb"><img src="images/thumbs_large/102.jpg" alt="" /></a> </article> <article class="6u$ 12u$(xsmall) work-item" style="width: 40%;"> <a href="images/originals/103.jpg" class="image fit thumb"><img src="images/thumbs_large/103.jpg" alt="" /></a> </article> </div> ... gallery looks this: gallery html
notice white space when it's displayed php? doing wrong? if need other code or want se live in action on website let me know.
thank help. :)
in html code 2n article tags(2nd, 4th,...) has "6u$" class instead of "6u". if change php code below think work want.
echo '<div class="row">' . php_eol; ($i = 0; $i < count($picture_ids); $i++) { // start new row after each $n pictures if (($i > 0) && ($i % $n === 0)) { echo '</div>' . php_eol; echo '<div class="row">' . php_eol; } if($i % 2 === 0) { echo '<article class="6u 12u$(xsmall) work-item" style="width: 40%;">' . php_eol; } else { echo '<article class="6u$ 12u$(xsmall) work-item" style="width: 40%;">' . php_eol; } echo '<a href="images/originals/' . $picture_ids[$i] . '.jpg" class="image fit thumb"><img src="images/thumbs_large/' . $picture_ids[$i] . '.jpg" alt="" /></a>' . php_eol; echo '</article>' . php_eol; } echo '</div>' . php_eol;
Comments
Post a Comment