Hello everybody,
How to create lightbox splash? I also want to ask about the most reliable programming language that will possibly allow the user to create a lightbox splash. This is very important for me I hope you can share your brilliant ideas.
Thanks and have a nice day.
How to create lightbox splash?
One of the easiest ways of creating pages is using PHP. Yet, splash pages are using PHP is not advisable considering that spiders only index the pages containing the words searched and not the rest of the site. There may be redirection to the original search page since the desired page cannot be accessed.
A possible solution when using a splash screen and allow search engine spiders to access the site without restrictions is by using JavaScript. Add the splash screen into a lightbox overlaid on the website page using JavaScript. Using the latter, then redirect to the website page containing the splash instead of PHP.
Don’t forget to use cookies to restrict the repetitive display of the splash screen.
For more details, you can check out the following sites:
https://guide.freecodecamp.org/javascript/tutorials/how-to-create-a-lightbox/
https://www.w3schools.com/howto/howto_js_lightbox.asp
How to create lightbox splash?
Follow the below steps to create lightbox splash.
1. Download the latest version of lightbox keeping your web browser open.
2. Extract the Zip file that you got and see if you have a sample HTML and three ‘css’ folders that contain the style sheets and one ‘js’ file with the source code.
3. Copy all the folders to a location that you can access from your web page.
4. Open the HTML file with a text editor that you prefer.
5. If you don’t have Scriptaculous and Prototype libraries already on a webpage then incorporate two lines in the “<head>” section of the HTML script.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
6. Then add these lines in the same section.
<Script type="text/javascript" src="js/lightbox. js"></script>
<Link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
7. Now its time to add the effect to the lightbox images. To do that add rel="lightbox" attribute to the "<a>" tag of the link. Then provide an optional title that will be shown in splash box. E.g –
<A href="Img.jpg"><img src="ImgThumbnail.jpg"/></a>
Again write the link like below:
<A href="Img.jpg" rel="lightbox" title="An example image"><img src="ImgThumbnail.jpg"/></a>
Hope this is useful for you.
