Image Grid not displaying photos or working with Firefox

Report · Sep 07, 2022

I am working on an image grid and was hoping somebody could let me know why it isn't displaying properly. Using Safari the image grid works, except it doesn't display my images, instead it shows the image icon. I am able to sort through the image grid but it does not display my images. Previewing in Dreamweaver and it doesn't work at all, the buttons are not responsive and it doesn't show images or icons. Can anybody share some insight into this matter?

<!doctype html>
<html>
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Grid</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="dbgalleryabout.css" rel="stylesheet" type="text/css">
</head>

<body class="background">    
    <section>
    <!-- Header -->
              <div>
  <button class="btn" onclick="one()">1</button>
  <button class="btn active" onclick="two()">2</button>
  <button class="btn" onclick="four()">4</button>
                        </div>
    
<div class="header" id="myHeader">
  <h1 class="content">123 Cedar Ridge, Crested Butte, CO 80463</h1>

<!-- Photo Grid -->
<div class="row"> 
    
            <div id="myMeo-nav" class="meo-video-nav">
  <a href="javascript&colon;void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="dbgallery-tour-video.html"><i class="fa-solid fa-video" style="font-size:24px"></i>  Video</a> 
  <a href="dbgallery-tour-photos.html"><i class="fa-solid fa-camera" style="font-size:24px"></i>  Photo Gallery</a>
  <a href="dbgallery-ig.html"><i class="fa-solid fa-image" style="color: white font-size:24px"></i>  Image Grid</a>
  <a href="dbgallery-brochure-1.html" target="_blank"><i class="fa-solid fa-circle-info" style="color:white font-size:24px"></i> Details</a>
  <a href="dbgallery-brochure-1.html" target="_blank" ><i class="fa-solid fa-print" style="color:white font-size:24px"></i> Brochure</a>
  <a href="dbgallery-tour-contact.html"><i class="fas fa-map-marker-alt" style="font-size:24px"></i> Map</a>
  <a href="dbgallery-tour-contact.html"><i class="fa-solid fa-address-card" style="font-size:24px"></i> Contact</a>
</div>
    
  <div class="column">
    <img src="/img/689-outlook-circle-new-castle-co/01-689-outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/02-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/03-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/04-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/05-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/06-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
  </div>
  <div class="column">
    <img src="/img/689-outlook-circle-new-castle-co/07-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/08-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/09-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/10-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/11-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/12-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
  </div>  
  <div class="column">
    <img src="/img/689-outlook-circle-new-castle-co/13-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/14-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/15-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/16-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/17-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/18-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
  </div>
  <div class="column">
    <img src="/img/689-outlook-circle-new-castle-co/19-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/20-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/21-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/22-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/23-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
    <img src="/img/689-outlook-circle-new-castle-co/24-689outlook-circle-new-castle-co.png" style="width:100%" alt="">
  </div>
</div>
    </div>
</section>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a loop variable
var i;

// Full-width images
function one() {
    for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "100%";  // IE10
    elements[i].style.flex = "100%";
  }
}

// Two images side by side
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "50%";  // IE10
    elements[i].style.flex = "50%";
  }
}

// Four images side by side
function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "25%";  // IE10
    elements[i].style.flex = "25%";
  }
}

// Add active class to the current button (highlight it)
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

</body>
</html>

Report · Sep 08, 2022

Clean up the errors in your code and see if that brings the browser back in line with your expectations.

Run the validation tool at http://validator.w3.org/nu and repair the items found there.

Some browsers are good at guessing what was meant when they run into code errors while some fall all over themselves trying to parse even the slightest problems.

Report · Sep 08, 2022

After running its source code through https://validator.w3.org/nu it did return some errors. Warning for not using a Header element to describe all sections. Errors in the meta tags and a few css errors. After fixing those errors I ran its code locally and its sort function is now working in Firefox as well as Safari but the images are not displaying.

Report · Sep 08, 2022

Check your image pathing.

Report · Sep 08, 2022

What's the URL to your online page?

Did you upload images to your remote server?

Are images located in the path shown in your code?

BTW: each image should have ALT text that displays when images fail to load.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 08, 2022

I haven't published my site to a remote server yet, It is still under construction. The image links appear to be working properly. I can preview the images when i hover over image link and in the live preview. I did enter alt tags for all of the images and i can see the alt tags in firefox and safari. I ran its code through a validater and fixed a few minor errors but the images wont display in browsers.

Report · Sep 08, 2022

Well you dont have a closing </script> tag so it won't work correctly. Also if you are only seeing img icons then its quite possible the links to the images are not correct.

If you can upload the file plus any linked css the file uses to a remote server and provide a link to the page we could see better what the issues are.

Report · Sep 08, 2022

Looking at live view preview I can see the actual images in full detail. Whenever I scroll over the image links I can preview a thumbnail of the photo . I must have somehow deleted the </script> closing tag during my initial post because it is in the source code of its webpage. I have not published my site to a remote server yet, soon I will build out its backend and it will be ready to publish. May I get a different outcome publishing to a remote server? This is all i could do this evening, i will probably gather the CSS alitittle later. Thanks

Report · Sep 09, 2022

Right now, you're using site root relative links for your images. That can cause issues with local testing when the browser looks to add the site root in front of the link and puts in too much information from your hard drive path.

Switching from your current root relative links (with / in front) to a document relative path (possibly just removing the leading / if the img folder is on the same directory level as the page itself) could bring the images back for you.

Unless you need site root relative links (for a handful of very specific reasons), you really should be using document relative in your Site Definition. To set your site to document relative links...

Go to Site > Manage Sites > click the site you're working on to highlight it > click Edit (pencil icon) > Advanced Settings > Local Info > verify Document is chosen for the "Links Relative To" radio buttons

Adobe Community

Image Grid not displaying photos or working with Firefox