8 replies to this topic

[techker]

hey guys i have a pictur gallery made in php and i can't figure out how to make the images show like a picture galley instead of horizontal or verticlal?

like when you use an echo (picture)

they show like

pic pic pic pic pic

or if you add a br tag

pic
pic
pic
pic

i need pic pic pic pic

pic pic pic pic

thx!

[amrosama]

i dont understand, do you mean that you want to show one pic at a time and then when a user clicks a button or the pic it changes itself?
if no, please post the code

[techker]

i just want to add css to my page so the pics can show like an image gallery instead of all horizontal

softcoredesign.com check in tattoo's

[Orjan]

I really don't know how to do it in css, but this I think is most commonly done in the scripting language? here's an example for php.

Two options, but both works the same way.
with tables, you need to make a new row using an extra </tr><tr> every fourth picture
otherwise, you ad a normal <br /> every fourth picture

if you want it to break row at any other number than four, just change the two fours in the examples below, or if you want it to be easy configurable, replace them with a variable set to wished number of pictures per row.

this is easiest done with a counter in the while-loop (I guess you read which pictures to show from something)

example with tables:

echo "<table><tr>";

$cnt = 0;

while (whatever) {

  echo "<td><img></td>"; // output the img tag

  $cnt++;  // increase count, as we have added a pic now

  if (($cnt % 4) == 0) {   

    // if $cnt modulus 4 equals 0, we have added 4 pictures, 

    // and makes a new line/row

    echo "</tr><tr>";     // echo end of row

  }

}

the modulus is when doing a standard integer division, but not calculate decimals, but makes a leftover that can't be divided. if the leftover is nothing, everything was divided, which means that the $cnt is fully dividable by the number per row, and it makes each 4th.

to make the last row look nice when working with tables, you use the last modulus to read out the extra number of cells you need to add

example:

for ($cell = 0; $cell < ($cnt % 4); $cell++) {

  echo "<td> </td>

}

// end the table

echo "</tr></table>";

[techker]

exacly the way i wanted it in coding..lol

but it dosn't work inless i did it wrong.

<style type="text/css">

<!--

body {

	background-color: #000000;

}

.echo { 

    color: white; 

    font-weight: bold; 

} 

-->

</style><?php

	//Include the PS_Pagination class

	include('ps_pagination.php');

	

	//Connect to mysql db

	$conn = mysql_connect('localhost','techker_techker','techker');

	mysql_select_db('techker_softcore',$conn);

	$sql = "SELECT * FROM `softcore` WHERE  `type` = 'sketch'";

	

	//Create a PS_Pagination object

	$pager = new PS_Pagination($conn,$sql,5,3);

	

	//The paginate() function returns a mysql result set 

	$rs = $pager->paginate();

	

	echo "<table><tr>";

$cnt = 0;

while ($row = mysql_fetch_assoc($rs)) {

  echo '<td><a href="/admin/pic_view.php?id='. $row['id'] .'" target="_blank" >

<img src="/admin/art/'. $row['thumb'] .'" border="0" alt="" />

</a></td>'; // output the img tag

  $cnt++;  // increase count, as we have added a pic now

  if (($cnt % 4) == 0) {   

    // if $cnt modulus 4 equals 0, we have added 4 pictures, 

    // and makes a new line/row

    echo "</tr><tr>";     // echo end of row

  }

}

	//Display the full navigation in one go

	//echo $pager->renderFullNav();

	

	//Or you can display the inidividual links

	//echo "<br />";

	

	//Display the link to first page: First

	echo $pager->renderFirst();

	

	//Display the link to previous page: <<

	echo $pager->renderPrev();

	

	//Display page links: 1 2 3

	echo $pager->renderNav();

	

	//Display the link to next page: >>

	echo $pager->renderNext();

	

	//Display the link to last page: Last

	echo $pager->renderLast();

?>

it is a Pagination script to.

[techker]

ok cool i modifed it abit to remove the " for ' seems to work better..

echo '<table><tr>';
$cnt = 0;
while ($row = mysql_fetch_assoc($rs)) {
echo '<td><a href="/admin/pic_view.php?id='. $row['id'] .'" target="_blank" >
<img src="/members/GYMGRAPH/PICS/'. $row['pic'] .'" border="0" alt="" />
</a></td>'; // output the img tag
$cnt++; // increase count, as we have added a pic now
if (($cnt % 4) == 0) {
// if $cnt modulus 4 equals 0, we have added 4 pictures,
// and makes a new line/row
echo '</tr><tr>'; // echo end of row
for ($cell = 0; $cell < ($cnt % 4); $cell++) {
echo '<td> </td>';
}
// end the table
echo '</tr></table>';
}
}

[Orjan]

Yeah, it's easier that way, at least on the rows that have inline quotation marks.

good that you got it to work. feel free to ask more if you run into more problems.

[techker]

thx alot for the quick help !!

[Orjan]

Well, you gave me the reason to write a text that could work on a wiki page here on codecall, so thanks for 5 new points to the contest :-)

I'll write a page on the modulus function.