CODEWITHSUNDEEP
jquery-plugins
mjk6035
mjk6035

Reputation: 121

Resizing images in Etalage Jquery Zoom plugin using Javascript

I am working on a webpage that lists the details of a product . The product details include an image that can be zoomed using the Etalage Jquery Zoom plugin. I am able to change the image that is displayed in the Etalage Jquery plugin depending on certain attributes of the product.

I am dynamically changing the images by executing the statement 

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

            }).show();

The problem is that the source image looses its assigned height and width. I would like to know how to assign a height and width to the source image using JavaScript after changing the image in the Etalage plugin.

Regards

Mathew

Upvotes: 1

Views: 2817

Answers (1)

mjk6035
mjk6035

Reputation: 121

Resolved this issue by observing the values that were being assigned to the following parameters when the size of the source image was correct.

Assigning those values while calling the show() method solved my problem

$('#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();

Upvotes: 2

Related Questions