开发者

create next image on click: previous and next

开发者 https://www.devze.com 2023-03-25 05:49 出处:网络
I have a scenario where if I have a grid of thumbnail images and a user clicks an image, they can click on next (to see next image in line from the grid) or previous (vice versa).

I have a scenario where if I have a grid of thumbnail images and a user clicks an image, they can click on next (to see next image in line from the grid) or previous (vice versa).

Would I have a separate table in mysql for a list of those image source, or would you use something like an array, or are there any other better options? I'm thinking this in the long wrong, if there's millions of images, it will slow down the server?

Would you be willing to show an exampl开发者_如何学Goe too?

Thank you!


I'm not sure why there is an issue ... if you're showing a grid, that means you already have access to the previous/next image, right? Depending on how many users you have, you could simply put a list of image ids from the displayed grid into session, then you wouldn't even need to hit the database (except to pull the image itself). As the user is scrolling through the images (using prev/next), just add to the list if the user starts getting close to the end.


Yes, you need the table.
Because you shouldn't store all files in one directory - because directories have limits of count of files. So you can't just read "next" file from folder, because that file can be in another folder. For additional info, look here: PHP security and unique naming conventions


I don't think you need to have a multi-dimensional array for this. Your images should still have a sequential ID from 1 to n so it will be easy to implement your next() and prev() function.

For example I have this result from my MySQL query.

Array
(
[0] => Array
    (
        [title] => Title test
        [src] => /images/1.jpg
    )

[1] => Array
    (
        [title] => Title
        [src] => /images/12123.jpg
    )

[2] => Array
    (
        [title] => Image
        [src] => /images/32132.jpg
    )

[3] => Array
    (
        [title] => Image test
        [src] => /images/332.jpg
    )    
)

Then you handle the grid generation in your view.

$width = 2; // max_width of your grid
echo "<table border=1>\n";
foreach ($main as $id => $img)
{
  if ($id % $width == 0)
    echo "<tr>\n"; // create a new row if the width has been reached
  echo "<td>".$img['src']."</td>";
}
echo '</table>';

Then your javascript to toggle between images should be much easier as you only need to increment and decrement the ID, instead of computing for it when you have

[0][0] [0][1] [0][2]
[1][0] [1][1] [1][2]
0

精彩评论

暂无评论...
验证码 换一张
取 消