【问题标题】:Display multiple sized images for a product page?为产品页面显示多种尺寸的图像?
【发布时间】:2016-05-16 16:34:23
【问题描述】:

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

我宁愿使用多种尺寸的图像,而不仅仅是尝试为缩略图调整大图像的大小,这样用户就不必等待加载详细的大图像并为缩略图调整大小,而缩略图必须是大小都一样。

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

表格

产品:

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

产品图片:

------------------------------------------------------------------------
-- 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'

然后当我遍历每个查询结果时,尝试以某种方式将与缩略图关联的中等图像文件名作为数据属性添加到包裹在缩略图<img> 周围的<a> 元素中,但我就是不能去做吧。

我想我完全错了,我不知道。我是新手。

【问题讨论】:

  • 好的,对不起瑞恩。好吧,我的意思是处理它的最佳方法。我自己想不出一个合适的工作解决方案,并且想知道其他人如何处理它。我在下面接受的答案对我来说很合适,我认为我可以很好地实现它。感谢您让我知道我的问题的质量:-)
  • 让我提供一个关于无用 best method questions 的非常清楚的例子。想象一下有人出现并问:best way to sort a list of strings?简单。直到您查看实际上有多少 sort methods。一定有best one?显然不是 - 这取决于各种因素;-/几十年来,它一直是一个研究得很好的主题。仍然没有达成协议。然后我们想出了best way of ...what.
  • 不生你的气!你真的很想知道useful methods!我们可以回答:)
  • 这一切都很好,我明白你的意思:-) 在我发布我的问题之前,我看到了一个与我类似的问题,虽然它并没有真正帮助我,但标题是“什么是最好的方法..”所以我没有意识到这不是一个很好的提问方式。 stackoverflow.com/questions/9450753/…
  • 而且通过如此快速地选择答案,您会阻止任何人提供更好的答案。你可以使用那个答案。并投了赞成票。问题一被接受,就没有人理会它。除非它真的很有趣。

标签: php mysql


【解决方案1】:

首先,要创建对加载时间影响不大的图像缩略图,可在此处找到教程:

如果您指的是在上传图片时制作缩略图,请参考以下问题:Creating a thumbnail from an uploaded image

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

然后根据产品 id 将这两个图像存储在两个不同的列下,在一个类似的表中:

product_id | display_image | full_image

并相应地选择它们

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2015-01-04
  • 2022-07-04
  • 2022-01-26
  • 2019-07-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-01
相关资源
最近更新 更多