sean1688 Posted February 19, 2015 Share Posted February 19, 2015 we have some big images that goes outside of most mobile screens. I have came across some work by Mat Wilcox. have anyone implemented this on Cubecart? below are the instructions, and they seem simple enough, but I am afraid to try it. in particular, I have a question: the instructions says " It MUST go in the head as the first bit of JS, before any other JS." so where do I place this piece of code? at the index.php file? Basic instructions Copy adaptive-images.php and .htaccess into the root directory of your site. If you already have a htaccess file DO NOT OVERWRITE IT, skip down to the advanced instructions. Copy the following Javascript into the <head> of your site. It MUST go in the head as the first bit of JS, before any other JS. This is because it needs to work as soon as possible, any delay wil have adverse effects. <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> That's it, you're done. You should proberbly configure some preferences though. Quote Link to comment Share on other sites More sharing options...
sean1688 Posted February 19, 2015 Author Share Posted February 19, 2015 I tried to do it, but it does not seem to work. Not sure if I have done anything wrong. I put the script at the file named /js/plugins.php not sure if this is correct Quote Link to comment Share on other sites More sharing options...
ayz1 Posted February 19, 2015 Share Posted February 19, 2015 Try adding the following to your mobile css file .sliderimg { border: none; max-width: 100%; display: block; margin: 0 auto; } Then give each image a class="slideimg" Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 19, 2015 Share Posted February 19, 2015 CC5 uses two skins: the main skin (probably Kurouto) when not using a mobile device, and the Mobile skin, when is using a mobile device. So, if the task is to get this javascript installed because images are too big for mobile devices, we must edit the Mobile skin template, main.php. I would recommend adding the line of code just above:<meta http-equiv="Content-Type" content="text/html;charset={$CHARACTER_SET}" /> Quote Link to comment Share on other sites More sharing options...
sean1688 Posted February 21, 2015 Author Share Posted February 21, 2015 Try adding the following to your mobile css file .sliderimg { border: none; max-width: 100%; display: block; margin: 0 auto; } Then give each image a class="slideimg" Thanks for your help! How do I give the image a class="slideimg"? also where do I put the code "<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>"? CC5 uses two skins: the main skin (probably Kurouto) when not using a mobile device, and the Mobile skin, when is using a mobile device. So, if the task is to get this javascript installed because images are too big for mobile devices, we must edit the Mobile skin template, main.php. I would recommend adding the line of code just above: <meta http-equiv="Content-Type" content="text/html;charset={$CHARACTER_SET}" /> thanks! do I also put the line <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> in this file as well? Quote Link to comment Share on other sites More sharing options...
ayz1 Posted February 23, 2015 Share Posted February 23, 2015 You are basically looking at two different solutions here. bsmither has a lot more experience than I do so maybe his solution is the one to try first. I have used the css method which works fine for me but that is simply because I didn't know of a better way to do it. So if you do try the css method then you need to add the class to your image file code e.g. <img src="myimagefilelocation.jpg" class="slideimg" alt="Description" /> in your mobile skin code where the relevant images appear. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.