I want to create an HTML page which has the following:
There are 10 slots for image and there are 3 images, any one of the three image has 50% chance so it will acquire 50% (5 slots) and the rest two will take the left over 5 slots.
Is there any way to do this in js/php?
Any help would be appreciated!
Here's a snippet in PHP that probably helps you find a solution.
<?php
$images = array(
array( 'title' => 'mytitle1', 'path' => 'path/to/image1.png', 'slots' => 0 ),
array( 'title' => 'mytitle2', 'path' => 'path/to/image2.png', 'slots' => 0 ),
array( 'title' => 'mytitle3', 'path' => 'path/to/image3.png', 'slots' => 0 ),
// array( 'title' => 'mytitle4', 'path' => 'path/to/image4.png', 'slots' => 0 ),
// array( 'title' => 'mytitle5', 'path' => 'path/to/image5.png', 'slots' => 0 ),
// array( 'title' => 'mytitle6', 'path' => 'path/to/image6.png', 'slots' => 0 ),
// array( 'title' => 'mytitle7', 'path' => 'path/to/image7.png', 'slots' => 0 ),
// array( 'title' => 'mytitle8', 'path' => 'path/to/image8.png', 'slots' => 0 ),
);
// Calculate # of slots to use per image
$nimages = count($images); // # of images
$nslots = 10; // # of slots
$rimags = $nimages - 1; // # remaining images
$images[0]['slots'] = floor($nslots * 0.5); // # slots 1st image
$rslots = $nslots - $images[0]['slots']; // # remaining slots
$xslots = floor($rslots / $rimags); // slots / image
$xtra = ($rslots % $rimags); // extra slots
for ($xi=1; $xi<$nimages; $xi++) {
$images[$xi]['slots'] = $xslots + (($xtra>0) ? 1 : 0);
if ($xtra>0) $xtra--;
}
// Generate HTML code
echo '<div id="image_panel">' . PHP_EOL;
$nslot = 1;
foreach ($images as $img) {
if ($img['slots']<1) continue;
for ($xi=0; $xi<$img['slots']; $xi++) {
echo ' '.$nslot.': <img src="'.$img['path'].'" title="'.$img['title'].'" alt="'.$img['title'].'" id="'.$xi.'" />' . PHP_EOL;
$nslot++;
}
}
echo '</div>' . PHP_EOL;
?>