PHP MySQL Database Images Toggler - php

Question

I have built a little uploader that works fine, uploading the images file path to my DB, and storing the image in a folder.
Now I also have made a call that will call only images with the same ID as the Property ID it has assigned.
Where I have trouble is the Image display, I am looking for a simple way to toggle between the images in the database, but even before that, I need to know why the Database call only displays one of the images stored in the DB.
Here is my code so far :
PHP
if ($id) {
$query = "SELECT houses.*, gallery_photos.* " .
"FROM houses LEFT JOIN gallery_photos " .
"ON $id = gallery_photos.photo_category";
$result = mysql_query($query) or die(mysql_error());
}
// Print out the contents of each row into a table
while ($row = mysql_fetch_array($result)) {
$images_dir = "houses";
$photo_caption = $row['photo_caption'];
$photo_filename = $row['photo_filename'];
$photo_id = $row['photo_id'];
}
and the display happens withing a larger ECHO command, I will add a little of it so you get the idea :
Within the ECHO
echo "
<li>
<div id='imagizer'> <img src='" . $images_dir . "/" . $photo_filename ."?id=" . $photo_id . " ' title='$photo_caption'/></div>
</li>
There are many more elements within the li element that work fine, like Title, Price, Summary, etc etc.... But I can simply not accomplish 3 thing here :
Getting all the images to display (I only get one, which would be fine if the toggler worked).
Making a toggler to display the next image that has the same category_id.
Optional (An image slider)
UPDATE
This is kind of working, but I get various duplicate entries! It seems that for every picture I get 1 entry on the list. So if 4 pics, 4 entries, if 2, only 2 entries.
function showShort() {
$houses = #mysql_query('SELECT houses.*, gallery_photos.*
FROM houses LEFT JOIN gallery_photos
ON houses.id = gallery_photos.photo_category');
if (!$houses) {
die('<p> Error retrieving Propertys from database!<br />' . 'Error: ' . mysql_error() . '</p>');
}
while ($house = mysql_fetch_array($houses)) {
$id = $house['id'];
$title = htmlspecialchars($house['title']);
$ref = $house['ref'];
$summary = htmlspecialchars($house['summary']);
// $content = $house['content'];
$price = $house['price'];
$houseorder = $house['houseorder'];
$pool = $house['pool'];
$bedrooms = $house['bedrooms'];
$bathrooms = $house['bathrooms'];
$aircon = $house['aircon'];
$basement = $house['basement'];
$location = $house['location'];
$floorm = $house['floorm'];
$aream = $house['aream'];
$garage = $house['garage'];
$furbished = $house['furbished'];
$images_dir = "houses";
$photo_caption = $house['photo_caption'];
$photo_filename = $house['photo_filename'];
$photo_category = $house['photo_category'];
$photo_id = $house['photo_id'];
if ($garage == 'Yes') {
($garage = "Garage : Yes<br>");
} elseif ($garage == 'No') {
($garage = "");
}
if ($pool == 'Yes') {
($pool = "Swimming Pool : Yes<br>");
} elseif ($pool == 'No') {
($pool = "");
}
if ($aircon == 'Yes') {
($aircon = "Air Condition : Yes<br>");
} elseif ($aircon == 'No') {
($aircon = "");
}
if ($basement == 'Yes') {
($basement = "Basement : Yes<br>");
} elseif ($basement == 'No') {
($basement = "");
}
if ($furbished == 'Yes') {
($furbished = "Furbished : Yes<br>");
} elseif ($furbished == 'No') {
($furbished = "");
}
echo "
<li>
<div id='summarybox'>
<div id='titlestyle'> $title </div><br>
<div id='imagebox'> </div>
<div id='refstyle'> Ref. $ref </div>
<div id='details1'>
Bedrooms : $bedrooms <br>
Bathrooms: $bathrooms <br>
Living Area : $floorm m² <br>
Plot Area : $aream m² <br>
Location : $location <br>
</div>
<div id='details2'>
$pool
$aircon
$basement
$furbished
$garage </div>
<section class='ac-container'>
<div>
<input id='$id' name='accordion-1' type='checkbox' />
<label for='$id' >Read More</label>
<article class='ac-small'>
<div id='summarystyle'> $summary </div>
<div id='price'>Price : $price </div><br>
<div id='imagizer' align='center'>
<ul id='$id'>
<li><a href='" . $images_dir . "/" . $photo_filename . "' rel='lightbox[$photo_category]' title='$photo_caption'><img src='" . $images_dir . "/" . $photo_filename . "' height='50%' with='50%'/></a></li>
</ul>
</article>
</div>
</selection>
<br>
<div id='admbuttons'><a href='editProperty.php?id=$id' ><button>Edit</button></a>
<a href='deleteProperty.php?id=$id' onclick='return confirm()'> <button>Delete</button></a></div>
</div>
</li>";
}
}

Answer 1

This is the live example where i have used this idea just open the below link and click on the thumb image and then slide inside the lightbox.
Inspect the image with firebug and see the anchor tags below the image you will get the logic what i am trying to say and then you can manage it into your code
http://dev.tasolglobal.com/osclass/

Answer 2

your echo statement should be like in for loop
while ($row = mysql_fetch_array($result)) {
$images_dir = "houses";
$photo_caption = $row['photo_caption'];
$photo_filename = $row['photo_filename'];
$photo_id = $row['photo_id'];
echo "
<li>
<div id='imagizer'> <img src='" . $images_dir . "/" . $photo_filename ."' id=" . $photo_id . " title='$photo_caption'/></div>
</li>
}
id and src should have some space to print in echo.
please add above code in you for loop sure it will work for you.

Answer 3

The main thumb single image
<a href="url of the first image" rel="lightbox['unique name for a particular bunch of image']><img src="url of the first image" /></a>
Just fire a query and get all the image url only for the particular category and run a loop for the urls to create anchor tags with rel
for($b=1;$b<$thumb_url;$b++)
{
echo = '';
}
These image url are in the href so will not load on page load and when the lightbox will be triggered on the click of the first image it will load all the images with a particular unique string in the rel="lightbox[]" and will show next and previous link to show images like slider
You can use "cat_" then the unique id of a particular category to make unique the rel of those particular images.
I have tried it and it works
UPDATE
What you need to do is do not loop the li but just place the first image in the li inside the img tag and the unique rel and then after the li you have to run the loop for the rest of the category images and create anchor tag with image url in the href and rel similar to the first image
Do not forget to include the js and css for the light box
<div id='imagizer' align='center'>
<ul id='$id'>
<li><a href='" . $images_dir . "/" . $photo_filename . "' rel='lightbox[$photo_category]' title='$photo_caption'><img src='" . $images_dir . "/" . $photo_filename . "' height='50%' with='50%'/></a></li>
</ul>
//Put your loop here to make the anchor tags and keep the url in the href only with the rel corresponding to the first image so they will be treated as a bunch by lightbox
Create a common select function and try query with it and then use for loop on the result associative array it will be less confusion and neat code
Execute Select Query
function select ($sql="", $fetch = "mysql_fetch_assoc")
{
global $conn;
$results = #mysql_query($sql,$conn);
if(!$results) {
echo mysql_errno()." : ". mysql_error();
}
$data = array();
while ($row = $fetch($results))
{
$data[] = $row;
}
mysql_free_result($results);
return $data;
}