I have multiple images and they're named in different names and extension. I'm using magic 360 javascript plugin version 4.6.13. In frontend the page is show only tree.jpg. and magic360 dont working when I drag skin. in console Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute'). I made by doc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Integrated 360 Magic Spin Viewer</title>
<link rel="stylesheet" href="assets/css/magic360.css">
<script src="assets/js/magic360.js"></script>
</head>
<body>
<style type="text/css">
#gallery {
width: 500px; /* Adjust the width as needed */
height: 400px; /* Adjust the height as needed */
margin: 0 auto;
}
.magic360 {
width: 100%;
height: 100%;
}
</style>
<div id="gallery">
<a class="Magic360" data-options="images: images/nature/tree.jpg images/nature/mountain.webp">
<img src="images/nature/tree.jpg">
</a>
</div>
<!-- Your HTML content here -->
<script>
var Magic360Options = {
columns: 6
};
</script>
</body>
</html>
Your code specifies 2 images in the
imagessetting:But your
columnssetting is set to 6:To solve this, you can either specify 6 images in the
imagessetting or change thecolumnssetting to 2.