bgf
Tutorials
To get a full screen background that scrolls.
First of all credit where it belongs, I got the coding from this site: http://www.aaronvanderzwan.com/maximage/examples/basic.html
To get it working in X5 follow these steps:
Download from above site the full coding download Maximage 2.0
Set these in your head section;
<link rel="stylesheet" href="pcss/jquery.maximage.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="pcss/screen.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css" media="screen">
#maximage {
/* position:fixed !important;*/
}
</style>
It depends where you want the background in your website, for one page or the whole sites you need different places in x5:
If set on one page of your website (like I did use step2) just select (not double click) the page you want it on then go to properties, there go to expert tab, set it there in the after opening the head tag section.
If set on the whole website, goto step 4, statistics and ceo, goto expert tab, set it there in the after opening the head tag section.
copy the files mentioned in the code to your website/pcss folder.
You can do this multiple ways by an seperate FTP program, or by using the buttons on top in x5 after you made contact with your webprovider (step5 upload website, next), or use the step 4 (ceo -> expert tab) then linked file optioin. MY favorite is just use the top buttons in x5...:)
so find the files jquery.maximage.css and screen.css from the downloaded file.
That's it for the HEAD section, now the after opening the body tag section, set the below code there;
If you want to use your own pictures, then add or remove and rename this to your own number and names, be aware of capitals, try to use pictures with no strange characters like spaces (use underscre instead) or other signs, just use small letters all the way this gives best compatibility.
<div id="maximage">
<img src="files/wall_portrait.jpg" />
<img src="files/coalesse.jpg" />
<img src="files/laughing.jpg" />
<img src="files/roof_shooting.jpg" />
<img src="files/man.jpg" />
<img src="files/coffee_shop.jpg" />
<img src="files/gas_station.jpg" />
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
<script src="res/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
<script src="res/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
// Trigger maximage
jQuery('#maximage').maximage();
});
</script>
Did you gues the next todo action ?? Yes youre right, copy the files mentioned above to the website res folder, find the files in the download. jquery.cycle.all.js and jquery.maximage.js
And offcource, upload your pictures to the website/files folder
Questions? As always let me know in Answers ....