MYSQL/PHP/JQUERY - Blobs into image gallery, how to solve an issue?

Question

i have already made a working script that would load previously uploaded Images (with their title, size, category etc.) into a gallery. It looks like this: https://i.stack.imgur.com/RWASu.jpg

The problem is, i made it load an image of RANDOM ID, there will be more such images after sliding right/left, and i would like to have them displayed by ID, but each other to be the NEXT ID, instead of being this same or random. How could i make it work?

Here is the script so far:

<?php
$result = mysql_query("SELECT id, rozmiar, technika, kategoria, image_time, title FROM {$table} ORDER BY RAND() LIMIT 1");
if (mysql_num_rows($result) == 0)
    echo '<ul><li>Nie wgrano żadnych plików.</li>';
else
{
    echo '<ul>';
    while(list($id, $rozmiar, $technika, $kategoria, $image_time, $title) = mysql_fetch_row($result))
    {
        echo "<div class='image-frame left-image'>";
        echo "<a href='".$_SERVER['PHP_SELF']."?show=$id' data-lightbox='galeria' data-title='{$title}, {$technika} | {$rozmiar}'><img width='450' src='".$_SERVER['PHP_SELF']."?show=$id'></a>";
        echo "<div class='description'><p>{$technika}, {$rozmiar}</p></div></div>";
    }

    echo '</ul>';
}
?>
        <?php
$result = mysql_query("SELECT id, rozmiar, technika, kategoria, image_time, title FROM {$table} ORDER BY RAND() LIMIT 1");
if (mysql_num_rows($result) == 0)
    echo '<ul><li>Nie wgrano żadnych plików.</li>';
else
{
    echo '<ul>';
    while(list($id, $rozmiar, $technika, $kategoria, $image_time, $title) = mysql_fetch_row($result))
    {
        echo "<div class='image-frame right-image'>";
        echo "<a href='".$_SERVER['PHP_SELF']."?show=$id' data-lightbox='galeria' data-title='{$title}, {$technika} | {$rozmiar}'><img width='450' src='".$_SERVER['PHP_SELF']."?show=$id'></a>";
        echo "<div class='description'><p>{$technika}, {$rozmiar}</p></div></div>";
    }

    echo '</ul>';
}
?>

Any ideas on how may i make it into one script, that would load multiple blocks with images with ascending ID's? Would be grateful for all suggestions.

How are you planning to apply class on those retrieved images? I mean, only one would be `left-image` and all others would be `right-image`? — Rajdeep Paul, Dec 18 '16 at 18:47
Sorry for not being specific - i want the Left block, and the Right block to be displayed. Those would show image of ID #1 and ID #2, however there would be an option to slide right, so that the left would become ID #3, the right ID #4. I am having issues with setting the to blocks automatically show the other part of gallery. I've been thinking if there is a way to make a variable, that would also be put into CSS so that each block will be unique and automated? — Damian Doman, Dec 18 '16 at 18:57
Or maybe should i resign from two blocks, and make one that would just horizontally expand when there are some more images added? — Damian Doman, Dec 18 '16 at 18:58
I've given an answer below. Hopefully this will resolve your issue. — Rajdeep Paul, Dec 18 '16 at 19:02

score 0 · Accepted Answer · edited May 23 '17 at 10:30

The solution would be like this:

Retrieve all the rows from the table without any ORDER BY or LIMIT clause, like this:
```
SELECT id, rozmiar, technika, kategoria, image_time, title FROM {$table}
```
Count total number of rows retrieved and create an empty $resultArray array, like this:
```
$rowCount = mysql_num_rows($result);
$resultArray = array();
```
Loop through the result set and append the rows to the $resultArray array, like this:
```
while($row = mysql_fetch_array($result)){
    $resultArray[] = $row;
}
```

Use rand() function to pick one random row from the $resultArray array and implement circular array logic from this $resultArray array to achieve your desired result, like this:

$i = $randValue = rand(0, $rowCount - 1);
do{
    list($id, $rozmiar, $technika, $kategoria, $image_time, $title) = $resultArray[$i];
    echo "<div class='image-frame'>";
    echo "<a href='".$_SERVER['PHP_SELF']."?show=$id' data-lightbox='galeria' data-title='{$title}, {$technika} | {$rozmiar}'><img width='450' src='".$_SERVER['PHP_SELF']."?show=$id'></a>";
    echo "<div class='description'><p>{$technika}, {$rozmiar}</p></div></div>";
    $i = ++$i % $rowCount;
}while($i != $randValue);

Here's the complete code,

$result = mysql_query("SELECT id, rozmiar, technika, kategoria, image_time, title FROM {$table}");

$rowCount = mysql_num_rows($result);
$resultArray = array();
while($row = mysql_fetch_array($result)){
    $resultArray[] = $row;
}

$i = $randValue = rand(0, $rowCount - 1);
do{
    list($id, $rozmiar, $technika, $kategoria, $image_time, $title) = $resultArray[$i];
    echo "<div class='image-frame'>";
    echo "<a href='".$_SERVER['PHP_SELF']."?show=$id' data-lightbox='galeria' data-title='{$title}, {$technika} | {$rozmiar}'><img width='450' src='".$_SERVER['PHP_SELF']."?show=$id'></a>";
    echo "<div class='description'><p>{$technika}, {$rozmiar}</p></div></div>";
    $i = ++$i % $rowCount;
}while($i != $randValue);

Sidenote: Don't use mysql_* functions, they are deprecated as of PHP 5.5 and are removed altogether in PHP 7.0. Use mysqli or pdo instead. And this is why you shouldn't use mysql_* functions.

For now I kept `left-image` and `right-image` out of the equation. You can tweak the code as per your requirement to incorporate those `class` values. — Rajdeep Paul, Dec 18 '16 at 19:06
Thank you Sir, for both the solution and explaining how it works part by part, works flawlessly for me now. Much grateful!!! — Damian Doman, Dec 18 '16 at 21:28

MYSQL/PHP/JQUERY - Blobs into image gallery, how to solve an issue?

1 Answers1