I am currently developing a basic script to create a slideshow, inspired by this particular script.
Context:
Many existing slideshow scripts struggle with displaying portrait-style images properly. I am aiming to construct one from the ground up that can handle both landscape and portrait orientations.
Challenge:
My goal is to have the images centered on the page using CSS properties like position:absolute;, left:50%;, and top:50%;. However, achieving perfect centering requires calculations like left:50% - imageWidth/2, which CSS does not support.
Therefore, I need to utilize JavaScript to dynamically adjust the positioning based on the dimensions of each image.
This is the HTML code I am using:
<div class="fadewrapper">
<div class="fadein">
<img src="../Content/images/samples/1.jpg">
<img src="../Content/images/samples/2.jpg">
<img src="../Content/images/samples/3.jpg">
</div>
</div>
And here is the associated CSS:
.fadewrapper {width:100%; height:100%;}
.fadein { display:inline-block;}
.fadein img {position:absolute; top:50%;}
While my understanding of JavaScript is limited, I came across this helpful snippet (from Stack Overflow):
var img = new Image();
img.onload = function () {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
This script provides the image dimensions but I am unsure how to integrate it into my project for adjusting image positions. Any guidance or assistance would be greatly appreciated.