JQuery is having trouble changing the image source in Internet Explorer and Firefox, but it works fine in Chrome

After creating an image gallery that functions perfectly in Chrome, I noticed it fails to work in Firefox or Internet Explorer. While scouring similar questions for solutions, none seem to address the issue at hand.

To showcase the problematic code, I've created a JFiddle:

https://jsfiddle.net/ydmgjzwp/

The culprit behind the malfunction seems to be:

function updateMainImage(){
  var selected = imageController.selectedImageObject;
  var currentImageObject = imageController.imageObjects[selected];
  var newImage = currentImageObject.image;

  $(imageController.mainImageImg).attr("src", newImage);
}

In Internet Explorer and Firefox, the main image fails to load entirely. The expected behavior is for jQuery to switch it to the first of the smaller images, then transition to whatever the user selects.

Error messages in the console logs haven't provided much insight thus far, though there could be something crucial that I'm overlooking. Any assistance would be greatly appreciated.

Answer №1

revise the following code snippet

function updateImageSource(inputUrl) {
                    var newUrl = inputUrl.replace('")', '');
                    newUrl = newUrl.replace('url("', '');
                    return newUrl;
                }

Answer №2

It appears that there were double quotes in the image src, but after making changes to the function provided, it now works correctly.

function fixCssUrlSyntax(inputString){
      var returnString = inputString.replace(")", );
      returnString =  returnString.replace("url(", );
      return returnString;
    }

SEE DEMO HERE

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

What is the reason for the discrepancy in displaying between these two arrays?

I am facing an issue where I have an array called order containing objects and another array called test that contains a string. With jQuery, I am able to output the contents of test to a <div>, but strangely I cannot do the same for the order array. ...

Tips for decreasing the width of a Grid column in MUI React

I have a total of 8 columns. The first column should be the smallest to accommodate a checkbox and does not require much space. I attempted to adjust the xl, lg, md values to 0.5 but was unsuccessful. Is there an alternative method to change the width of t ...

Ways to align text in the middle and shift it downward?

I'm currently attempting to center the bottom navigation bar using the following CSS code: #main-nav { margin-left: auto; margin-right: auto;} Unfortunately, this method is not achieving the desired result. I even tried adding <center></cen ...

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?

I need help customizing my Forms Date Input to only allow selection of Thursdays, Fridays, and Saturdays. I've searched for a solution but haven't been successful so far. Is there any JavaScript or HTML code that can help me achieve this? Below ...

Adjusting the backdrop hues

My goal is to change the background colors of my website by cycling through all possible combinations. However, I'm encountering issues with my code and can't figure out what's wrong. var red = 0; var green = 0; var blue = 0; do { do ...

Creating HTML code from a template using different programs

Currently, I am in the process of developing a website using only HTML, CSS, and JS without the need for a backend. It is a straightforward site designed for presenting information. Each page follows a standard template consisting of a header, content area ...

Tips for ensuring icons stay in the top right of a Bootstrap 4 navbar when viewing on mobile devices

After trying various approaches, I am still struggling to keep the icons in the top right corner when transitioning to mobile view without duplicating them. The desired order is as follows: on desktop: brand (far left) - nav links (middle) - account & ...

Guide to sending SweetAlert textarea input to an axios call

I need assistance in creating a simple pop-up form stepper using SweetAlert. The purpose is to allow users to input a report name, description, and comment, then send that data to the server for storage. My challenge lies in retrieving the value from the ...

Placing a forward slash only after the initial hyperlink within a list item

I'm trying to add a slash after the first link in my UL, but instead, it's adding a slash after every link. I've attempted various solutions without success. Here is my current view/html code: <?php foreach ($this->config->i ...

What is the best way to utilize the isset method in PHP to check for the existence of two different

Having trouble with displaying both data sets in a PHP file? Here's the code snippet: <?php session_start(); include_once'config/connect.php'; //establish database connection if(isset($_POST['add'])) { $add = mysql_query( ...

Getting rid of excess space surrounding text

Within my div, I am attempting to create a 5px padding around the text; however, there seems to be additional spacing that is interfering with my desired layout. It almost feels as though my browser is mocking my efforts by refusing to cooperate. This is ...

Create an if statement that depends on the current URL without explicitly mentioning it

I am currently working on a project to display specific RSS feeds based on the current URL. I have made some progress with my solution below, but I am looking for a way to dynamically check the current URL and pull the corresponding RSS feed instead of spe ...

Embed the Facebook Share Button using iFrames

I currently have a website that showcases news articles in a list format using PHP and MySQL. You can check it out here: My goal is to incorporate a Facebook share button/link on each article so that users can easily share individual posts on their own Fa ...

Exploring the issue of nested subscriptions causing bugs in Angular

My current challenge involves nesting subscriptions within "subscribe" due to the dependency of some data on the response of the previous subscription. This data flows down the subscription chain until it is stored in an array. Starting with an array of I ...

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

An effective method for appending data to a multidimensional array in Google script

Is there a way to expand a multidimensional array of unknown size without relying on a Google Sheets spreadsheet to manage the data? I've searched everywhere but can't find an example for a 3-dimensional array. Here's the challenge I'm ...

Tips on saving the background image URL value into a variable

How can I save the URL value of a background image in a variable? For example: image: url(images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg); I store this value as value = images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg in a variable and then use this variable in an href tag. ...

There was an unforeseen conclusion to the JSON input while attempting to parse it

I am having an issue with the code in my get method. Can someone please help me troubleshoot and provide some guidance on how to solve it? app.get("/",function(req,res) { const url = "https://jsonplaceholder.typicode.com/users" ...

Unable to resize icons within bar-footer

My footer has a bar: <div class="crop modal"> <div class="crop-center-container"> <div class="crop-img" ng-style="{width: width + 'px', height: height + 'px'}"></div> </div> <div cla ...

Issue encountered while rendering HTML using express

I've been experimenting with a basic single-page render and it seems like I'm missing something: const express = require('express'); const app = express(); app.get('/', function(req, res){ res.render('home.html' ...