1 Attachment(s)
Images on webpage not loading corredctly?
I'm loading a bunch of images on a webpage with 4 images across the page and then down based on CSS rules. However, at a certain point, the images stop loading the way they are suppose to. Not sure what is causing that. All the images are the same size. See attached screenshot and my code below.
Code:
<!DOCTYPE html>
<html>
<head>
<title>PHOTOGRAPHY - Portfolio</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
img {
border: 7px solid #fff;
margin-right: 15px;
margin-top: 15px;
margin-top: 15px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.images {
width: 310px;
float: left;
display: block;
text-align: center;
margin-top: -30px;
margin-left: auto;
margin-right: 40px;
}
.images a {
float: left;
margin: 25px 10px;
}
.images a:hover {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: transform 0.4s;
}
#container1 {
width: 100%;
height: 100vh;
margin: 20px 0;
display: inline-block;
background-color: #111;
border-top: 1px solid transparent;
}
.caption {
height: 35px;
width: 324px;
margin-top: -3px;
background-color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
</style>
</head>
<body onload="getImages('Portfolio/Landscapes/'); disableRightClick()">
<!-- <div style="width: 95%; margin: 0 auto; padding-top: 10px; border-bottom: 2px solid #ccc; height: 40px">-->
<div style="width: 96%; margin-left: 1%; padding-top: 10px; border-bottom: 2px solid #ccc; height: 40px">
<p style="color: #fff; font-family: 'Arial Narrow'; text-align: right; margin-right: 20px; float: right; margin-top: 6px; margin-left: 10px">Cart: </p>
<a href=""><p class="button">Checkout</p></a>
</div>
<div id="container1" style="margin-left: 24px"></div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function getImages(dirLocation) {
var dir = dirLocation;
var fileextension = "jpg";
var x = 1;
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: dir,
success: function(data) {
//This empty() statement clears the canvas so a new directory can be reloaded
$("#container1").empty();
//List all png file names in the page
$(data).find("a:contains(" + fileextension + ")").each(function() {
var pathName = this.href;
var strLen = pathName.lastIndexOf('/');
var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;
var fileName2 = fileName.split('.', 1);
var onclick = 'showImage("' + pathName + '");';
var div = "<div class='images'>" +
"<a href=''><img id='" + fileName2 + "' onclick='" + onclick + " placeMark(x,'" + newFileName + "')' src='" + pathName + "' width='310' height='auto'>" +
"<div class='caption'>" +
"<form target='paypal' style='margin-left: 25px' action='https: //www.paypal.com/cgi-bin/webscr' method='post'>" +
"<input type='hidden' name='cmd' value = '_s-xclick'>" +
"<input type='hidden' name='encrypted'" +
"value='-----BEGIN PKCS7-----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-----END PKCS7-----'>" +
"<input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!'>" +
"<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1'>" +
"</form></div></a></div>";
$("#container1").append($(div));
x++;
});
}
});
}
//
//
//
function placeMark(i, newFileName) {
alert('placeMark()');
watermark([newFileName, 'Images/BMPhotography.png'])
.image(watermark.image.lowerRight())
.then(function(img) {
var container = document.getElementById('image-' + (i + 1));
container.appendChild(img);
});
}
//
//
//
function disableRightClick() {
document.addEventListener('contextmenu', event => event.preventDefault());
}
//
//
//
function showImage(fileName2) {
var largeImage = document.getElementById(fileName2);
largeImage.style.display = 'block';
largeImage.style.width = 700 + "px";
largeImage.style.height = "auto";
var url = largeImage.getAttribute('src');
window.addEventListener('contextmenu', event => event.preventDefault());
window.open(url, '', '', 'width=largeImage.stylewidth, height=largeImage.style.height, resizable=1', onclick = 'disableRightClick()');
}
</script>
</html>
Re: Images on webpage not loading corredctly?
Re: Images on webpage not loading corredctly?
I will suggest you attached a file showing the result you are expecting just as you attached the unexpected result. Only then can someone know how to play around it.
Re: Images on webpage not loading corredctly?
It's pretty simple. You see a row of 4 images? Every row should contains 4 images with NO gaps.
