Jump to content

Initial Website View


Scotty

Recommended Posts

Evening.

 

I have a website and instead of showing the home page first, I would like a image of our Xmas dinner poster to been shown first. Then by clicking on it, it disappears.... Leaving the website to act as normal.

 

I have no idea what you call this and how to do it, hence my request for help

 

Cheers in advance

Link to comment
Share on other sites

You can combine lightbox with some Javascript and cookies or web storage.

 

The light box makes the image appear in front of the page. You need a bit of Javascript to make the lightbox open automatically, and you use cookies to tell the user's computer to remember that it already showed the box to them.

Link to comment
Share on other sites

Basic setup, image will stretch to fill entire screen, if you require it to be proportional set

 

background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/a582d358-3426-4220-a3bc-693419cfb199_4.jpg') no-repeat center center / 100% 100% rgba(0, 0, 0, 0.7);

to

background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/a582d358-3426-4220-a3bc-693419cfb199_4.jpg') no-repeat center center / auto 100% rgba(0, 0, 0, 0.7);

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            $(function() {                // check if  webstorage disabled or not supported (window.localStorage) older IE browsers less than 8 if not show warning and stop                if (typeof (Storage) === "undefined" || window.localStorage === "undefined")                {                    $('body').html("Sorry, your browser does not support Web Storage...");                    return false;                }                if (localStorage.clickcount) { // if clickcount already exists increase value by 1                    localStorage.clickcount = Number(localStorage.clickcount) + 1;                } else { // else set clickcount to 0                    localStorage.clickcount = 1;                }                if (Number(localStorage.getItem("clickcount")) === 1)                {                    $('body').append('<div id="home_bg" title="click to continue"></div>');                }                else                {                    $('#home_bg').remove();                }                $('#home_bg').click(function() {                    $('#home_bg').remove();                });            });        </script>        <style type="text/css">            #home_bg {background: url('http://res1.windows.microsoft.com/resbox/en/windows/main/a582d358-3426-4220-a3bc-693419cfb199_4.jpg') no-repeat center center / auto 100% rgba(0, 0, 0, 0.7);                      position: fixed; left:0; right:0; top: 0; bottom: 0; z-index:999999;}        </style>    </head>    <body>        <div>TODO write content</div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...