Visit this WordPress site where the client has a unique setup with multiple pages showcasing images one after another. To achieve the desired layout, jQuery is utilized to wrap each image in a div element with a class of .postImg:
Here's the script:
jQuery(document).ready(function() {
var set = jQuery('#content > img');
for(var i = 0, len = set.length; i < len; i += 1){
set.slice(i, i+1).wrapAll('<div class="postImg" />');
};
});
Initially, everything looks good when the site loads, but upon reloading or navigating through the menu items, these dynamically added divs seem to malfunction by not recognizing their child width and appearing stacked next to each other. It seems like the divs are losing their proper widths.
I've been struggling to pinpoint the issue and find a solution, trying various approaches without success. Have I overlooked anything crucial?