Presented below is the div in question:
<div id="photos">
<div id="photos_cycle">
<img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/female_tennis_player.jpg') }}" />
<img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/foto_1.jpg') }}" />
<img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/foto_2.jpg') }}" />
<img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/foto_3.jpg') }}" />
</div>
</div>
The issue arises when trying to center the images that reside within an element with the same ID - photos_cycle.
A JavaScript function has been implemented to cycle through the images smoothly:
$('#photos_cycle').cycle({
fx: 'fade',
timeout: 8000,
speed: 0
});
An attempt has been made to dynamically determine and set the width of photos_cycle based on the width of the images to achieve proper alignment:
setInterval(function () {
$("#photos_cycle img").each(function() {
imageWidth = this.clientWidth;
if (imageWidth > 0) {
$("#photos_cycle").css('width', imageWidth);
});
}, 10);
This solution functions correctly in Firefox and Chrome but encounters issues in Internet Explorer. The challenge lies in distinguishing between individual image sizes due to identical IDs assigned to all images.
Your feedback and assistance are greatly appreciated.
To view a live demonstration, please visit and observe the block located at the bottom right corner.
Edit:
I intend to refrain from uniquely defining the IDs as I plan to automate the addition of images to the photos_cycle div using PHP code.
Below is the CSS styling utilized for the respective div elements:
#photos {
background-color: #8ab7e2;
width: 340px;
height: 240px;
position: relative;
top: 60px;
border-radius: 20px;
-moz-border-radius: 20px;
box-shadow: 0px 0px 1px 1px #000;
}
#photos_cycle {
height: 240px;
margin: 0 auto;
position: relative;
}
#photos_cycle img {
display: block;
height: 200px;
margin-top: 18px;
position: absolute;
left: 50%;
border: 2px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;
}