Preload product image when page loads

MsKazza · May 14, 2020

Hi

followed the tutorial from w3 on the image tab gallery (https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp). On their own page the first image preloads when you refresh/enter page. But in their tutorial code it doesn't. I've tried writing some code to figure it out but so far no luck.

Was hoping someone could point me in the right direction. ATM the image preloads in the correct place, however now none of my other images will show in big when i click them. My code below. Thanks so much for any help.

MsKazza

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>College Hoodie - leavershoodies.ie</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'gothambook';
}

/* The grid: Four equal columns that floats next to each other */
.column_images {
  float: left;
  width: 75px;
  padding: 10px;
}

/* Style the images inside the grid */
.column_images img {
  opacity: 0.8;
  cursor: pointer;
  margin-left:17px;
}

.column_images img:hover {
  opacity: 1;
  margin-left:17px;
}

/* Clear floats after the columns */
.row_images:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container2 {
  position: relative;
  display: block;
  width:350px;
  text-align:center;
/* background-color: #5e5e5e; */
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 40%;
  color: #5e5e5e;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
</style>

  </head>
  <body onload="myFunction()">
    <?php include 'header.php'; ?>
<?php

$product_id = $_GET['recordID'];

$sql = "SELECT * FROM products WHERE product_code = '$product_id'";
if($result = mysqli_query($conn, $sql))
while($row = mysqli_fetch_array($result))

{
?>
<div class="container" style="margin-top:10px;">

<div class="row">
<div class="col-4">
<div class="container2">
  <span onclick="this.parentElement.style.display='none'" class="closebtn" ></span>
  <img id="expandedImg" style="height:450px"><br /><br />
  <div id="imgtext"></div>
</div>
<div class="row_images">
  <div class="column_images">
    <img src="images/products/<?php echo $row['img1']; ?>" id="thumbimg" alt="" style="height:100px" onclick="myFunction(this);">
  </div>
  <div class="column_images">
    <img src="images/products/<?php echo $row['img2']; ?>" alt="" style="height:100px" onclick="myFunction(this);">
  </div>
  <div class="column_images">
    <img src="images/products/<?php echo $row['img3']; ?>" alt="" style="height:100px" onclick="myFunction(this);">
  </div>
<div class="column_images">
  <img src="images/products/<?php echo $row['img4']; ?>" alt="" style="height:100px" onclick="myFunction(this);">
</div>

</div>

</div> <!-- end of left 5 column -->
<div class="col-8">
<h1 class="text-center"><?php echo $row['product_name']; ?></h1>
<br />
<div class="container-fluid">
<div class="row">
<div class="col-3"><h5>Description</h></div>
<div class="col">
<?php echo $row['description']; ?>

</div>
</div> <!-- /row --><br />
<div class="row">
<div class="col-3"><h5>Specification</h></div>
<div class="col">
<?php echo $row['specification']; ?>
</div>
</div> <!-- /row --><br />

<div class="row">
<div class="col-3"><h5>Available Sizes</h></div>
<div class="col">
XS - S - M - L - XL - XXL - 3XL
</div>
</div> <!-- /row -->
</div> <!-- desc container -->
<br /><br />
<div class="container">
<div class="row">
  <div class="col">
<?php
$sql = "SELECT * FROM colours WHERE product_id = '$product_id'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {

echo '
  <div style="float:left; width:55px; text-align:center;">
    <label class="container">
      <img src="images/products/pakshots/'.$row["filename"].'" alt="'.$row["colour_name"].'" style="width:50px" onclick="myFunction(this);">
      <br /><input type="radio" checked="checked" name="colour">
      <span class="checkmark"></span>
    </label>
  </div>
';

}
} else {
echo "0 results";
}
$conn->close();
?>

</div>
</div>

</div>
</div>

</div> <!-- end of main content column -->
</div> <!-- end of main content row -->
</div> <!-- end of main container -->


<hr>
    <div class="container">
      <div class="row">
        <div class="text-center col-md-6 col-12">
          <h3>More Information</h3>
          <p>If your not quite sure yet and would like to discuss further please either call us, request a call back, or get a quote on this product.</p>
			<a class="btn btn-success btn-lg" href="#" role="button">GET QUOTE</a>
          <a class="btn btn-danger btn-lg" href="#" role="button">REQUEST CALL BACK</a>
        </div>
        <div class="text-center col-md-6 col-12">
          <h3>Loving it? Lets go!</h3>
          <p>If you've made your choice and this is the top for you and yours, please select the colour you would like and click 'Choose this top'.</p>
			<a class="btn btn-primary btn-lg" href="#" role="button">REGISTER / LOGIN</a>
          <a class="btn btn-info btn-lg" href="#" role="button">CHOOSE THIS TOP</a>
        </div>
      </div>
    </div>
<br /><br />
<?php } ?>


	      <?php include 'footer.php'; ?>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap-4.4.1.js"></script>

<script>

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  var imgs = document.getElementById("thumbimg");//thumbimg is the id of thumb image which you might want to add
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>

  </body>
</html>

requinix · May 14, 2020

This isn't image preloading 😕

Look at your myFunction. Look at the way you call the function, then at what happens inside the function. Pay attention to the variables.

MsKazza · May 17, 2020

I'm sorry I don't want to come across as rude, how is that comment in any way helpful? Why even bother posting such a thing?

Quote

Look at your myFunction. Look at the way you call the function, then at what happens inside the function. Pay attention to the variables.

Looking at any of this for another few hours isn't gonna help me understand what went wrong. I asked for help, not someone to tell me to just stare at the code again. You think I haven't tried lots of different fixes before posting here?

Can anyone please offer any real help to point me in the right direction to fix whatever i've obviously done wrong. Apparently there is something wrong with my variables, can anyone help me figure out what please.

Thanks for any help guys.

gizmola · May 18, 2020

The function has a simple purpose. It takes the image you clicked on, finds the expandedImg element by it's id, and then sets that img source (src) = to the image clicked on.

Remove the things you tried to hack into this and return it to it's simple original form.

In particular:

Why are you trying to call this onclick that requires an image element in the body onload?

What are you trying to do by introducing this line of code:

var imgs = document.getElementById("thumbimg");

Adding this is what broke the original function, because you are now forcing this routine to always be the image with id="thumbimg". This is why things no longer work. That needs to be removed, along with the thumbimg id. None of the images in the grid should have an id.

To load an initial image, write a new function that finds the first image in the grid. Something like this:

function initMainImg() {
  var imgs = document.getElementsByClassName('column_images')[0].children[0];
  myFunction(imgs);
}

initMainImg();

I can't guarantee this code works, as I'm too tired to test it out right now, but it should give you an idea of how to accomplish your original goal of loading an initial image into the expandedImg div.

MsKazza · May 18, 2020

thank you for your reply. once i had the original tab gallery working i looked up how to preload the first image, someone else had asked that and said this is what had worked for them so thought would give it try. obv didn't work and thought it was me.

i really appreciate you taking the time to help. I've looked up about getElementsByClassName, however i'm still not sure how to call the function from the div where the main image should appear. Thought it might be something like

<img id="expandedImg" style="height:450px;" onload="initMainImg();">

but well no obviously i'm wrong.

I only know basic javascript, so all help is really appreciated.

gizmola · May 19, 2020

8 hours ago, MsKazza said:

I only know basic javascript, so all help is really appreciated.

You don't need an event for this. Just add it to the bottom of the script block where you define your functions.

Define the function and then call it, as I illustrated. That function and the call of the function will be executed when the page is loaded. Or you could call it from the body onload as you originally tried to do, but that's probably a complication you don't need to worry about.

gizmola · May 19, 2020

Here is the javascript code corrected:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

function initMainImg() {
  var imgs = document.getElementsByClassName('column_images')[0].children[0];
  myFunction(imgs);
}

initMainImg();

Here's a Codepen where I extracted this into a working example.

With Codepen the javascript, css and html have to be separated into their sections, so this is just to show you that this code works with your styles and original markup, and the broken things removed.

Basically what this code does is find the first div with class 'column_images' and gets the first child element, which is the image from that first div. It then passes that to myFunction so that an initial image will be loaded.

To add a little variation to this, it's easy enough to pick one of the images at random to be initialized:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

function initMainImg() {
  var imgs = document.getElementsByClassName('column_images');
  index = Math.floor(Math.random() * imgs.length);
  myFunction(imgs[index].children[0]);
}

initMainImg();

Here's the codepen for that version.

MsKazza · May 19, 2020

thank you soo much, when i see the code i can follow along and know what your doing, however doing it myself from scratch is another matter all together. I really appreciate your help.

gizmola · May 19, 2020

1 hour ago, MsKazza said:

thank you soo much, when i see the code i can follow along and know what your doing, however doing it myself from scratch is another matter all together. I really appreciate your help.

No worries, reading code and following it along is the way to eventually being able to write it yourself, or at least adapt what others have done, which is a lot of what most programmers do on a daily basis.

Sign In

Preload product image when page loads

Recommended Posts

MsKazza

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

MsKazza

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

MsKazza

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

MsKazza

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information