Display default product image in big

Javascript & Ajax
#1

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 researched asked and written some code to figure it out but so far no luck.

Was hoping someone could point me in the right direction. I’m not sure where to call the javascript function in the main part of the code to actually display the image from the javascript at the end of the page. 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>
    <?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']; ?>" 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>

</div> <!-- end of left 5 column -->


	      <?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");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

function initMainImg() {
  var img = document.getElementsByClassName("column_images")[0].childNodes[0];
  myFunction(img);
}


</script>

  </body>
    </html>
#2

My recommendation would to scrap any tutorials from W3Schools as they are junk in my opinion, show only where you think you have the problem unless you need to show more code/HTML to help people solve your problem better, be more specific in what kind of problem you are having and in my opinion learn vanilla javascript before learning jQuery. I am assuming you don’t know any javascript?

In their tutorial code it doesn’t work, it is more likely that code you typed from the tutorial doesn’t work.

#3

The tutorial worked as advertised, but I wanted the extra benefit of the image preloading, instead of a blank space. In order to get the image to preload i researched it asked questions and the code above is the result of that. I just don’t know where to call the function.

#4

An easy hack, is to give the image you want an id. Then you just call a click on that id.

#5

i was able to sort it out, giving the image an id is what made it stop working in the first place.

see code below:

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();

Sponsor our Newsletter | Privacy Policy | Terms of Service