爲產品頁面顯示多種尺寸的圖像？

Question

我試圖找到一種方法來在電子商務網站的產品頁面上爲每個產品顯示多個尺寸的圖像。例如，我希望將每個單獨產品的所有圖像顯示在一行縮略圖中，並且當您單擊縮略圖時，它將在主圖像字段中顯示中等大小的圖像，然後如果單擊主圖像字段的模式出現對話框顯示大圖像。

我寧願使用多個尺寸的圖像，而不僅僅是試圖調整縮略圖的大圖像的大小，以便用戶不必等待大圖像加載和調整縮略圖的大小，縮略圖必須是一樣的大小等

目前，我有一個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

首先，創建圖像縮略圖，不會影響到儘可能多的加載時間，教程，可以在這裏找到：

• https://davidwalsh.name/create-image-thumbnail-php
• http://webcheatsheet.com/php/create_thumbnail_images.php

如果你指的是在上傳圖片的同時製作縮略圖，請參考此問題：Creating a thumbnail from an uploaded image

如果我是你，我會ld在創建新產品時將兩個圖像保存到數據庫中：一個「中等」大小，可以從中創建縮略圖，另一個是「大」或全尺寸圖像。

然後將兩個圖像存儲在基於產品ID兩個不同的列，表中的類似：

product_id | display_image | full_image 

，並選擇其中相應