Question

我试图找到一种方法，在电子商务网站的产品页面上为每种产品显示多个尺寸的图像。例如，我希望每个产品的所有图像都以行缩略图显示，当您单击缩略图时，它将在主图像字段中显示中等大小的图像，然后如果单击主图像字段，则会显示模态出现对话框，显示大图。

我宁愿使用多个尺寸的图像，而不是仅仅尝试为缩略图调整大图像的大小，这样用户就不必等待大型详细图像加载并调整大小以获得缩略图，缩略图具有缩略图大小等等。

目前我有一个与products表链接的product_images表，但我不确定如何将小图像，中图像和大图像链接在一起并将它们加载到产品页面

表

产品：

--------------------------------------------
-- product_id --  product-name --  etc....
--------------------------------------------
-- 4034677333 --  widget1      --  
-- 7088383839 --  widget2      --  
--------------------------------------------

Product_images：

------------------------------------------------------------------------
-- product_id --         image_name      --  small  -- medium  -- large 
------------------------------------------------------------------------
-- 4034677333 --  4034677333_0_small.png --    1   --     0   --   0  --    // First image
-- 4034677333 --  4034677333_0_med.png   --    0   --     1   --   0  -- 
-- 4034677333 --  4034677333_0_large.png --    0   --     0   --   1  --  
-- 4034677333 --  4034677333_1_small.png --    1   --     0   --   0  --    // Second image
-- 4034677333 --  4034677333_1_med.png   --    0   --     1   --   0  --  
-- 4034677333 --  4034677333_1_large.png --    0   --     0   --   1  --

所以目前我尝试用

显示缩略图

SELECT * FROM product_images WHERE product_id='$id' AND small='1'

然后尝试以某种方式添加与缩略图关联的媒体图像文件名作为数据属性，当我遍历每个查询时，<a>元素包围缩略图<img>结果，但我无法做到。

我认为我完全错了，我不知道。我是这里的新手。

Answer 1

首先，要创建不会对加载时间产生太大影响的图像缩略图，可以在此处找到教程：

如果您指的是在上传图片时制作图片的缩略图，请参阅此问题：Creating a thumbnail from an uploaded image

如果我是你，我会在创建新产品时将两个图像保存到数据库中：一个是“中等”大小的，可以从中创建缩略图，另一个是“大”或全尺寸图像它是。

然后根据产品ID将两个图像存储在两个不同的列下，表格如下：

product_id | display_image | full_image

并相应地选择它们

显示产品页面的多个尺寸的图像？

1 个答案: