Random background image on refresh |
Post Reply |
Author | |
LP-
Newbie Joined: Oct 30 2014 Status: Offline Points: 12 |
Post Options
Thanks(0)
Posted: Nov 24 2014 at 1:16pm |
Hi,
I would like to have the background image change on page load/refresh. I'm using the responsive template. I found the following examples (in javascript and php) but have no idea where to start to implement them in openelement and specifically the responsive template: http://stackoverflow.com/questions/15231812/random-background-images-css3 Do I have to edit the custom classes in the CSS expert features ? Or should it be added as a "code block-visual" ? It would be cool to have this in openElement as a drag&drop media element Thanks! LP |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
Hi.
The advantage of PHP is that it gives one specific image, randomly selected BEFORE the page starts to be loaded by a browser; this largely reduces loading time and/or avoids the image disappearing while JS/jQuery changes it. So let's use the PHP approach. 0) First, open the project folder (menu Project->Other->Open the project folder) and create a subfolder MyImages in the Files/Other; "Other" is a special folder which gets completely uploaded by OE on the website publication, so it's more convenient. 1) Change the page type to PHP: menu Page->Server scripts->PHP. From now on it has the ".php" extention. 2) Type something in the Property Custom Classes for each element you want the background to be random, e.g. bgrandom01, bgrandom02 etc. for each element. No need for the page background. 3) Add the element Code Block (Source) type HTML (!) position Header. It will contain a combination of PHP and CSS. (You can either drag-drom the element, or click the button Source at the bottom-left and then add right inside the source code). 4) For each random background, enter the code like below (this will just affect the background image, leaving other Style settings like repetition or sizing):
I had to edit the code in the link a bit, it seemed to be buggy. You can copy-paste this code and each time replace .bgrandom01 by .name-of-your-custom-class, or by body (without the dot!) if it's the page background. You should of course rename images (either in the code or the file names), now the code assumes names like
This should be enough. If it does not work, please try to publish the site somewhere and give the link to verify errors. Good day D Edited by Dmit OE - Nov 24 2014 at 1:46pm |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(1)
|
P.S. I've made a mistake on the Code Block type, it should be HTML (to not add any tags like <style>). I've edited the answer.
|
|
LP-
Newbie Joined: Oct 30 2014 Status: Offline Points: 12 |
Post Options
Thanks(0)
|
It works great! Thank you very much. It took me a while to figure out that custom classes defined in the expert properties are separated by a space. In the responsive template there's "responsiveSection textShadowIE" and I just needed to add your custom class like this: "responsiveSection textShadowIE bgrandom01" Inserting a new frame with only bgrandom01 would lose the cool resize features of the responsive template (it would look bad in a mobile phone browser). Many thanks! LP |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
It's like in HTML ("class" attribute of a tag), one separates classes by spaces.
|
|
vaynenick
Newbie Joined: Feb 26 2015 Location: Duabi Status: Offline Points: 1 |
Post Options
Thanks(0)
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |