I am working with the code below:
function calculateImageMargins(elementId) {
var ids = elementId;
var totalWidth = 0
var totalHeight = 0;
ids.children().each(function(index){
var imgWidth = ids.children().width();
var imgHeight = ids.children().height();
totalWidth += imgWidth;
totalHeight += imgHeight;
var leftMargin = imgWidth - totalWidth;
var topMargin = imgHeight - totalHeight;
ids.children(index).css('margin-left',leftMargin);
ids.children(index).css('margin-top',topMargin);
});
}
var objLi = jquery("li", this);
calculateImageMargins(objLi);
An example of my HTML structure is as follows:
<div id="imgrt">
<ul id="if">
<li><img src="../pictures/album/20-c-44.jpg" /></li>
<li><img src="../pictures/album/20-c-44.jpg" /></li>
</ul>
</div>
I do not assign specific IDs or classes to each element. I am open to suggestions on whether that would be beneficial. Without utilizing separate identifiers, how can I apply unique margin-left and margin-top values to each <li> and <img> within the <ul>?
This might result in overlap between the images.
The CSS for <ul> includes:
#if { left: 0%; top: 0%; margin: 5px; padding: 5px; position: relative; width: 400px; height: 400px; background-color: #101010; z-index: 30; }