Drupal 6:如何创建产品项库
我正在创建一个包含许多产品的网站,每个产品最多可以有 10 个图像。
我需要做的是:
1:图像 #1 - 已加载(大)
2:为每个上传的图像创建缩略图
3:将缩略图放在大图下方
4:当用户单击缩略图时,它将用所选的图像替换大图像
I am creating a site that includes many products, of each of those products I could have up to 10 images.
What I need to do is this:
1: Image #1 - loaded (large)
2: Create thumbnails of each of the uploaded images
3: Place thumbnails under large image
4: When user clicks on a thumbnail it will replace the large image with the one selected
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
要动态更改图像而不刷新页面将需要一些 JavaScript。我建议使用 jQuery 因为它是准标准,随 Drupal 6 一起提供并且非常易于使用。
在每个缩略图上,您将添加一个 onClick,即使这会更新大图像的 src 属性。浏览器将负责为您拉入新的大图像。
以下基于 jQuery 的函数将更新 id 为“large”的 img 标签,以使用 newPath 替换其当前的 src 值:
此外,如果您正在创建电子商务网站,您应该考虑使用类似 Ubercart。您可以按照 FlorianH 的解决方案使用 CCK 向 Ubercart 产品添加字段,但您还可以免费获得购物车和结账等功能。
To change images dynamically without a page refresh will require some javascript. I would recommend using jQuery as it's a quasi-standard, ships with Drupal 6 and is very easy to use.
On each of the thumbnails you would add an onClick even that would update the src attribute of the large image. The browser will take care of pulling in the new large image for you.
The followng jQuery-based function will update an img tag with id "large" to use newPath to replace its current src value:
Also, if you are creating an eCommerce site you should consider using something like Ubercart. You can use CCK to add fields to Ubercart products as per FlorianH's solution, but you also get things like a shopping cart and checkout for free.
我知道一开始这是一个相当大的学习曲线,但我认为你应该真正检查一下 CCK和视图。你必须投入一些时间,但这是非常值得的。
在您的特定情况下,您可能应该向您的产品添加一个图像字段,添加图像缓存规则以调整它们的大小,并为您的产品创建一个专门的视图来显示您所描述的图像。
I know that it is quite a learning curve at the beginning, but I think you should really check out CCK and views. You have to invest some time, but it is well worth it.
In your particular case, you should probably add an imagefield to your product, add imagecache rules to resize them and create a specialized view for you product that displays the images as you described.