I have successfully installed the free JS rotator on a BigCommerce product page:
However, I need to build a page which contains rotators for multiple products, and have been unable to get any after the first to run successfully.
I do not need multiple rotators to display simultaneously. Instead, when a product is chosen, a new rotator is initialised using WR360.ImageRotator.Create()
and the images are loaded in a hidden <div>
which is displayed when the user clicks on the "360 VIEW" icon. When the used selects a new product, the rotator is destroyed and a new one is initialised and activated with a new config.xml
After each page refresh, the first rotator always works, subsequent ones do not. Any of the products work the first time. When another product is loaded, there is no pre-load image and the loading progress animation (the three grey rectangles in the upper left corner) run continuously without displaying a percentage. This includes cases in which the user attempts to view the first product again after clicking away to another product and back again. To be clear, only the first instance
of the class is functioning properly, and all
of the image/config file paths work correctly the first time.
I notice when I inspect the rotator objects in the browser console that the properties bB
are populated with data (including, in bU.aw
, all of the image file paths) for the first instance, then null
for each subsequent instance. In other words, the constructor seems to execute correctly only once for each page load.
I checked the <div>
dimensions as per this answer:https://www.360-product-views.com/forum/viewtopic.php?f=3&t=732&p=2299#p2299
but without success.
I also tried generating unique HTML id's for each rotator's containing element, again without affecting the results.
Any further troubleshooting ideas would be welcome. Thanks.