There are two demos hosted on an external site:
The page without text displays the expected behavior with proper autosizing. My initial query is: Why does the info div not shrink to the width of the wrapper in the second and third pictures?
And the primary question: How can I position the info box at the right side of the images, so that the wrapper adjusts its size properly to accommodate the combined width of the image and text while remaining centered in the viewport?
I attempted using floating but it did not work with unsized elements.
Thank you in advance.
This is my current setup:
// jQuery (to be improved later):
$(document).ready(init);
function init() {
$(".active").on("load", function(evt) {
setActive($(this).parent(), $(this));
});
$(".images").on("click", "img", function() {
showNextImage($(this).parent());
});
}
function showNextImage(parent) {
if(parent.find(".active").next("img").length != 0)
setActive(parent, parent.find(".active").next("img"));
else
setActive(parent, parent.find("img:first"));
}
function setActive(parent, element) {
parent.find(".active").removeClass("active").css("z-index", 0);
element.addClass("active");
element.css("z-index", 10);
autoSizeParent(parent, element);
}
function autoSizeParent(parent, element) {
parent.width(element.width());
parent.height(element.height());
}.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
background: white;
}
.images {
position: relative;
overflow: hidden;
}
img {
position: absolute;
max-height: 540px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div class="images">
<img class="active" src="http://i.imgur.com/94WEXSB.gif" />
<img src="http://i.imgur.com/C0JSZMJ.gif" />
<img src="http://i.imgur.com/bfDOcv1.gif" />
</div>
<div class="info">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam incidunt perferendis, porro natus obcaecati ut! Voluptate perferendis, dicta, perspiciatis blanditiis eligendi ab optio, culpa totam laboriosam veniam ipsam repellendus, ullam.</p>
</div>
</div>