I am currently developing an innovative image gallery feature where a temporary heart image is displayed for 1 second in place of the actual images (image 1, image 2 etc).
If you want to view the implementation, check out my jsfiddle below:
https://jsfiddle.net/tgzqLmma/
For each image, I use the heart image as the src and store the actual image using data-src like this:
<div>
<img class="delay" src="http://s12.postimg.org/4toxdafhl/heart.png"
data-src="http://placehold.it/260x280/E8117F/FFFFFF?text=image+1" alt=""
style="padding-top:120px; padding-bottom:120px"/>
</div>
To vertically center the heart image within the container, I utilize top and bottom padding values which will be dynamically calculated based on the image's height.
In my jQuery script, after 1 second, I remove the padding and switch the src with the data-src value for each image:
jQuery( document ).ready(function() {
setTimeout(function () {
jQuery('.delay').each(function () {
var imagex = jQuery(this);
var imgOriginal = imagex.data('src');
jQuery(imagex).removeClass('delay');
jQuery(imagex).css('padding',0);
jQuery(imagex).attr('src', imgOriginal);
});
}, 1000);
});
To adjust the size of the main images and container, I make use of media queries and CSS styling.
However, I encounter an issue regarding maintaining the heart image at 40x40px while ensuring that the subsequent main images are displayed in their correct sizes. In the current state of my jsfiddle, you can observe that the first two images expand the heart image instead of being displayed correctly like the third image (which intentionally remains unchanged).
This problem arises from the way I have set the width and max-width properties in my CSS. Is there a way I can modify the code to achieve the desired layout effect?