Cloudinary Product Gallery

Rob

July 21, 2022 15:23

Hello,

We are using Cloudinary Product Gallery - wondering if we can change the gallery position from an external swatch button? 

Example image: The swatch icons on the right - can they control the gallery on the left? 

0

• 

  Thomas Gurung

  July 22, 2022 17:07

  Hi Rob,

  The widget does not natively support this currently but there is a workaround you could implement using our Client-side list API (https://cloudinary.com/documentation/advanced_url_delivery_options#client_side_asset_lists) which lists all the assets in a given tag (e.g. https://res.cloudinary.com/<your_cloud_name>/image/list/25697194M-JJE90XX.json). Per notes, by default, the list delivery type is restricted. To enable it, open the Security settings in your Management console, and clear the Resource list item under Restricted image types. You may want to clear this option only temporarily, as needed. Alternatively, you can bypass this (and any) delivery type restriction using a signed URL.

  Using this you can retrieve the total number of images in a particular tag and use that to dynamically assign a startIndex value to each swatch.

  Here is an example I did: https://jsfiddle.net/tommygrg/83a297po/575/

  So what I've done is:

  • First, assigned contextual data called color_code to the images which correspond to their colour and then added all the required tags to an array called tagList
  • Then I have a loop that goes over this array where I do a GET request to the list API via the httpGetAsync function which then sends the json response to resHttp function
  • In the resHttp function, I calculate the total number of images in that particular tag, add that total to allTagValue array, this array keeps track of the total number of images in all the tags which I later use to calculate the correct startIndex
  • Next, I retrieve the color hex value, when the loop initially starts we know startIndex is 0 so I assign that value to the first button and then inject the relevant HTML code to the div with the id btnArea with the appropriate color id
  • Same logic applies after the first button is created but only difference this time is to get the correct startIndex, I remove the last element from allTagValue array, assign it to a new array called newTagArray, add all the values in the newTagArray and finally use this value as the startIndex, this should then correspond to the correct coursel/image in the widget

  Please let me know if you have any questions and hope this helps.
  
  Kind Regards,
  Thomas

  0

Post is closed for comments.