使用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();