Image Grid not displaying photos or working with Firefox

Forum|Forum|3 years ago
September 8, 2022
4 replies
634 views

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>

This topic has been closed for replies.

Jon Fritz

Community Expert

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

O

osgood_

Legend

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.

devinbotkinsAuthor

Known Participant

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

Nancy OShea

Community Expert

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

devinbotkinsAuthor

Known Participant

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.

Jon Fritz

Community Expert

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.

devinbotkinsAuthor

Known Participant

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.

Liam Dilley

Inspiring

Check your image pathing.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded