The JavaScript image slideshow functions perfectly when run from a local environment, however, it encounters

It seems like you all are my go-to team for JavaScript assistance. I've encountered an issue with a slideshow on my webpage. The slideshow works perfectly fine when I load the local copy of the page, but it fails to function properly when I load the actual hosted version on GoDaddy. The initial image displays correctly, but remains static. There are no errors shown in the console. Any help or guidance you can provide would be greatly appreciated.

<div class="auto-style1" style="width: 226px; height: 179px">
    <script language="javascript" type="text/javascript"> 
        var i = 0; 
        var path = new Array(); 

        // LIST OF IMAGES 
        path[0] = "images/image_1.png"; 
        path[1] = "images/image_2.png"; 
        path[2] = "images/image_3.png";
        path[3] = "images/image_4.png";
        path[4] = "images/image_5.png";
        path[5] = "images/image_6.png";   

        function swapImage() { 
            document.slide.src = path[i]; 
            if(i < path.length - 1) i++; 
            else i = 0; 
            setTimeout("swapImage()",3000); 
        } 
        window.onload=swapImage; 
    </script>           
    <img alt="" name="slide" height="140" src="images/image_1.png" width="224" class="auto-style2" />
</div>
javascriptjqueryhtmlcss

Answer №1

It is important to include the "/" at the beginning of your folder names.

Make sure to specify the paths like this:

path[0] = "/photos/photo_1.jpg";
path[1] = "/photos/photo_2.jpg";
path[2] = "/photos/photo_3.jpg";
path[3] = "/photos/photo_4.jpg";
path[4] = "/photos/photo_5.jpg";
path[5] = "/photos/photo_6.jpg";

Answer №2

There are a couple of important points to consider.

  • Make sure to review your Case folder. Remember, in Unix, image is not the same as Image.
  • Double-check the permissions on the folder. It should be accessible to everyone.

Answer №3

I tried implementing your code but encountered some issues. Here is an alternative solution you can try:

Check out the demo

let count = 0;
const imagePaths = [
    "images/pic_1.jpg",
    "images/pic_2.jpg",
    "images/pic_3.jpg",
    "images/pic_4.jpg"
];

function changeImage() {
    let imgElement = document.getElementById("slider");
    imgElement.src = imagePaths[count];
    count++;

    if (count >= imagePaths.length) {
        count = 0;
    }

    setTimeout(function() { changeImage() }, 2000);
}

window.onload = changeImage();

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

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Using HTML5 validation on a form along with a button that triggers a JavaScript function to send an email via PHP and display a modal upon

When I click the button on my website's form, a JS function is triggered to take the inputs from the form and send an email using PHP. After the email is sent, a modal popup appears thanking the user for contacting. Everything works perfectly until I ...

javascriptphphtmlajax

Is there a way to transform inline JS coding to an external style sheet?

I currently have JavaScript code in both the body and head sections of my webpage. If I decide to move them to an external .js file, what steps should I take to transfer them and then bring them back onto the page? Head - <script language="Javascript ...

javascript

How to position button text below GlyphIcon in Bootstrap 3

Is there a way to align text underneath the icon in Bootstrap 3 buttons with a GlyphIcon? <div class="btn-group"> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-file"></span>Archive</ ...

cssbuttontwitter-bootstrap-3glyphicons

Ways to access c# session data using jquery and fetch attributes

Within my code, I have a user class which contains an id as integer and a name as string. This class is stored in a session once the user logs in. How can I retrieve the id of the object from this session using jQuery? ...

jqueryasp.netsession

Tips for positioning the cursor at the beginning of text and shifting the focus to the start while utilizing the MaterialUI Input component

I have scoured various online forums for a solution to this issue, but none of the suggestions seem to work. Although I managed to position the cursor at the beginning of the text, it did not shift the focus accordingly. Here is the code snippet for the co ...

javascriptreactjsmaterial-ui

How can I make an inline h1 with a span that is aligned to the end?

I am attempting to create the most basic react app possible and I want to design a header using Bootstrap 4. The header will have two parts: the first part on the left side and the second part on the right side. Currently, my code looks like this: <di ...

htmlcssbootstrap-4

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Here is the index.html code for a simple VueJS app that includes a widget from netvibes.com. The widget code is added in the html file and functioning properly. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC " ...

javascripthtmlvue.jsjspwidget

Having trouble retrieving data from the database using php and ajax

I am currently working with bootstrap, php, and ajax. I'm facing some issues that I can't seem to resolve. Additionally, I've noticed that the mysqli_connect function is not highlighting in blue when I type it in Notepad++. Is this normal? ...

phpcssmysqlsqlajax

Employ JQuery to create a smooth fading effect on a button when hovering over it, and then gradually fade it out

Is there a way to make a button fade in when I hover over an image and then disappear once I hover off? I have tried using the hover() function with a button class of "goto" (#goto), but can't seem to get it to work. Would combining fadein and fadeout ...

jquery

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I've been attempting to remove a specific list item <li> from the inner HTML by assigning them proper IDs. However, I'm encountering difficulties in deleting it. How can I delete these list items after clicking on the cross button? Feel fr ...

javascripthtmlcssinnerhtml

Encountering an issue in Angular 8 where there is a difficulty in reading the property 'NODE_NDEBUG' when attempting to serve the application

An issue has been identified in the assert-plus library at ../node_modules/assert-plus/assert.js where it is encountering difficulties reading 'NODE_NDEBUG' from 'process.env', as highlighted in the code snippet below module.exports = ...

javascriptnode.jsangulartypescriptangular8

Incorporating JQuery Plugins into Angular 4 Apps

I am currently attempting to incorporate various jquery plugins, such as Magnific-Popup, into my Angular 4 application but encountering difficulties. I successfully installed jQuery using npm install --save-dev @types/jquery in the terminal, yet implementi ...

javascriptjqueryangulartypescriptplugins

Leverage scope Variable in Angular Service URL

Currently, I am aiming to retrieve data from an API by sending specific search parameters through an AngularJS service. Within my ng-model, I have a variable named "search" that I want to utilize as a parameter in the API URL. My initial (unsuccessful) at ...

javascriptangularjsangular-services

The spacing in the Superfish menu is not aligned correctly

I am encountering a spacing issue with a superfish drop down menu. The problem can be observed here: To view the issue in action, visit this link: Essentially, all of the submenu items are floated left with a 50% width. I am looking for a solution to rem ...

htmlcsswordpress

Does the server transmit HTML page content rather than the information you need?

My React application is connected to a backend built with Node.js. However, when I try to fetch data in my React component, the server sends back an HTML page instead of the expected data, displaying raw HTML on the screen. Backend (server.js): app.route ...

javascriptnode.jsreactjs

Explore more by clicking on the linked slider item

I created a simple jQuery slider using only margin-left, without the use of plugins or access to the HTML. The next and previous buttons successfully transition between sliders. Now, I am facing a challenge where I need to link each slider so that clicking ...

javascriptjquery

Decoding JSON responses using JavaScript

Below is an illustration of the JSON response: {testing:[ {"title":"Hello","text":"Hello Test!"}, {"title":"World","text":"World Test!"} ]} I am looking for a way to parse this JSON data using jQuery's getJSON and each function, in order to ...

jqueryjsonparsing

Combining strings in a loop using Javascript

I have a loop hash data stored in a variable called rec. var rec = { }; for (var b = 0; b < 2; b++) { rec['id'+b] = b</p> } Next, I have a piece of JavaScript code that creates a template for a table. var template ='<tab ...

javascriptjqueryarraysmultidimensional-arrayhash

Validating uploaded files in Javascript and handling server upload operations

I'm having a small issue with a webpage I am creating. Essentially, I am looking to validate whether a user has selected a file and then upload it to the server. I understand this can be done using JavaScript: if(document.getElementById("uploadBox"). ...

c#javascriptasp.netajax