Having trouble displaying images in my 360-degree rotation slider

I am completely new to java script, so I have been copying and pasting code. However, it seems like the images are not loading properly.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS.css">
<link rel="shortcut icon" type="image/ico" 
href="../../CONTENT/Images/Logo/ICO.ico" />
<link rel="stylesheet" href="src/styles/threesixty.css">
<title>pappu-lighting</title>
<script src="jquery-3.2.1.js"></script>
</head>

<body>

<div class="threesixty" id="mythreesixty">
    <div class="spinner">
        <span>0%</span>
    </div>
   <ol class="threesixty_images"></ol>
</div>

<script type="text/javascript" src="src/threesixty.js"></script>    
<script>
window.onload = init;

var product;
function init(){

my360 = $('#mythreesixty').ThreeSixty({
    totalFrames: 72,
    endFrame: 72,
    currentFrame: 1,
    imgList: '.threesixty_images',
    progress: '.spinner',
    imagePath:'assets/product1',
    filePrefix: 'ipod-',
    ext: '.jpg',
    height: 265,
    width: 400,
    navigation: true,
    disableSpin: true
    });

}
</script>
</body>
</html>

The images source is located in the directory: /assets/product1/ within the same folder.

Despite all plugins and CSS files being loaded correctly, I can't figure out why the images aren't displaying as expected.

Answer №1

Illustration of a Three Sixty Image carousel

<div class="threesixty product1">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>    
<script type="text/javascript">
    window.onload = initialize;

    var product1;
    function initialize(){

        product1 = $('.product1').ThreeSixty({
            totalFrames: 72, // Total number of images for the 360-degree slider
            endFrame: 72, // Ending frame for automatic spinning animation
            currentFrame: 1, // Starting frame for auto spin
            imgList: '.threesixty_images', // Selector for image list
            progress: '.spinner', // Selector to display loading progress
            imagePath:'assets/product1/', // Path to image assets
            filePrefix: 'ipod-', // File prefix if applicable
            ext: '.jpg', // Extension for the assets
            height: 265,
            width: 400,
            navigation: true,
            disableSpin: true // Default is false
        });

}
</script>

Answer №2

Make sure to provide the correct directory path Ensure you include a trailing '/' after product1 to ensure proper reading of images.

 imagePath:'assets/product1/', // path to image assets

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Contact Form featuring a Text Area to complete the rest of the details

I am currently working on creating a contact form that has a design similar to the one shown below. However, I am facing challenges in getting the desired layout. I initially tried using flex-box but encountered issues with displaying the Text Area correct ...

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

Implementing pagination for images offers a user-friendly browsing experience

My friend and I are in the process of creating a website that displays images from two directories in chronological order. The image name serves as a timestamp, and we generate a JSON object using PHP with the code below: <?php $files = array(); $dir ...

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

Clicking on the button will result in the addition of new

Having some trouble with jQuery as I try to dynamically add and remove HTML elements (on click of +) while also making sure each element has a unique name and ID like "name_1", "name_2"... Unfortunately, things aren't quite going as planned. Below i ...

Tips for sending information from PHP to Javascript using jQuery?

I am looking to move data from a PHP page that pulls information from MySQL, with the goal of displaying this data on my mobile app using Cordova. I plan to achieve this using JavaScript. Here is the PHP code I currently have implemented: if($count == ...

Instructions on how to save HTML "innerHTML" along with attributes to a text document

I'm currently developing an HTML export feature from a DIV tag that includes various elements and attributes. HTML: <div id="master"><span class="classname">content goes here</span></div> <span class="download" onclick="ca ...

What is the process for changing the border color of a Select Component?

Is there a way to change the border color of a select component in Material UI library without directly setting the property in inspect elements? I can see it working when I set the property that way, but how can this be achieved using class override? htt ...

Utilizing jQuery to load HTML content into a div restricts my ability to navigate back and forth seamlessly

I am new to jquery and currently working on my first project. In my index.php file, I have included: header.html indexview.html footer.html. The indexview.html file consists of two divs - one for the menu on the left and another (div id="content") f ...

Solution for displaying as a table cell in Internet Explorer 6 and 7: Workaround

I am currently working on creating a single-row CSS table with multiple cells, aiming to vertically center text within each cell. The desired table layout is as follows: <table width="100%" height="54" border="0" bgcolor="red"> <tr> <t ...

I'm having an issue with my progress bar in ReactJS - it seems to move when I scroll the window instead of

My code includes a progress bar that works fine - it shows a movable progress bar when the window is scrolled. However, I want the progress bar to move when scrolling inside my div, not on the entire window. I am currently using jQuery for this functionali ...

JavaScript - Attempting to retrieve data using AJAX

Struggling with extracting data from an AJAX call using jQuery while implementing RequireJS for better maintainability and modularity in my JavaScript. Still new to RequireJS so not entirely sure if I'm on the right track. Just aiming to keep my JS mo ...

Require assistance with displaying a menu on a website using JQuery

Is there a way to create a menu similar to the one shown in the image below?https://i.sstatic.net/QxNPL.png To learn more about this menu, you can visit their website by clicking on this Link. I have copied some code (HTML code and links to CSS and .js fi ...

What causes discrepancies between jQuery set attributes and .html() output?

In an attempt to set attributes on HTML snippets, I am aiming to repopulate a form with previously entered values. Despite using .attr() to set the attributes, they do not appear after using .html(). For reference, I have provided a simple example here: h ...

avoiding the initiation of a new ajax request while a previous one is still in progress

Attempting to create a function that retrieves data from a server on scroll. The function would look something like this... function onscrollend() { $.ajax({ }); } Feeling a bit perplexed about how to verify if the old .ajax() call is still in pr ...

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

What is the process for verifying the password field in bootstrap?

In my asp.net project using bootstrap, I have implemented password field validation. When the user clicks on the password field, an information box is displayed. <div id="pswd_info"> <h4>Password requirements:</h4> <ul> ...

Create a JavaScript script within a CSS file

I'm attempting to create this using only CSS: Codepen and I would like to achieve the same effect but solely with CSS. This is what my CSS looks like: .text{ --a: calc(var(--a);*0.82+(1.5-var(--b);)/10); --b: calc(var(--b);+var(--a);); transfor ...

Tips for managing CSS/style conflicts in JavaScript/AngularJS applications

I am new to AngularJS and I have a requirement to assign CSS properties to a component at the JavaScript file level. When I debug my code after applying the CSS styles to the component, I can see that all the applied CSS properties are behaving as expected ...

Establishing space between table rows

I need to create a specific margin between two rows in a table. In my css code, I have the following snippet: background-color: #72c2dd; margin-top: 25px; The background-color is being applied correctly, but the margin-top property is not working as int ...