loading other images as max-width

jumpelzg

hey support,
is there any option you suggest to load different images depending on screen width in Hover Box?

i just want to load smaller ones for mobile users to make the site run faster.

thanks

Albert

Hi,

we are sorry but we do not have any such feature included and we can not suggest anything because what you ask for requires a lot of customization.

Thanks for understanding!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jumpelzg

Hey,
can you tell me where my way of thinking went wrong, I found some kind of  solution

1. added a class 'spacer' to the Hover Box I'm interested in
2. uploaded small (480x60) photos into full-width Hover Box
3. named photos xxx_small.png
4. added also bigger imgs named xxx_big.png and xxx_bigger.png
4. added script to the footer:

function resizeImages() { var width = window.innerWidth || document.documentElement.clientWidth; $(".spacer img").each(function() { var oldSrc = $(this).attr('src'); if (width >= 768) { var newSrc = oldSrc.replace('_small.','_bigger.'); var newWidth = 800; var newHeight = 100; } else if ( width >= 480 ) { var newSrc = oldSrc.replace('_small.','_big.'); var newWidth = 1600; var newHeight = 20; } $(this).attr('src',newSrc); $(this).attr('width',newWidth); $(this).attr('height',newHeight); }); }

and it's still not workin

Albert

If you will read Item Support Policy, you understand that files customization are not included. What you ask for, requires files customization because first 4 points looks fine so the problem may be with your script. If you don't know what may be wrong, we suggest to contact with your website developer.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next