jquery-plugins - 使用 Javascript 在 Etalage Jquery Zoom 插件中调整图像大小

Question

我正在制作一个列出产品详细信息的网页。产品详细信息包括可以使用 Etalage Jquery Zoom 插件缩放的图像。我可以根据产品的某些属性更改 Etalage Jquery 插件中显示的图像。

我通过执行语句动态更改图像

$('#etalage').etalage({
                show_descriptions: false,
                small_thumbs: 0

            }).show();

问题是源图像失去了指定的高度和宽度。我想知道如何在 Etalage 插件中更改图像后使用 JavaScript 为源图像分配高度和宽度。

问候

马修

Answer 1

当源图像的大小正确时，通过观察分配给以下参数的值解决了此问题。

在调用 show() 方法时分配这些值解决了我的问题

$('#etalage').etalage({
                show_descriptions: false,
                small_thumbs: 0,
                source_image_width: 900,            // The source/zoomed image width (not the frame around it) (value in pixels)
                source_image_height: 1200,
                thumb_image_width:480,              // The large thumbnail width (excluding borders / padding) (value in pixels)
                thumb_image_height: 480,
                autoplay:false,
                zoom_area_width: 340,               // Width of the zoomed image frame (including borders, padding) (value in pixels)
                zoom_area_height:495,       // Height of the zoomed image frame (including borders, padding) (value in pixels / 'justify' = height of large thumb + small thumbs)
                zoom_area_distance: 20,

            }).show();