Custom Intro/Landing/Front Page

comedowntous

Hello -

I would like to have a custom intro/landing/ front page as seen here:
http://bartoszludwinski.com/

I have put the page together using js however without the use of a cms - the images are called from a directory.

I would like to know how to add custom js to a particular lay theme page - then make this page the intro. I believe I can save the images somewhere in the theme file and then call them manually?

Below is my js / html

HTML —

</div>

JS —

		$( window ).load( function() {
			checkRatio();
			$( '.slideshow' ).fadeIn( 1500 );
			$( "#slideshow" ).find( "img" ).eq( 0 ).animate({
				"opacity" : 1
			}, function() {
				setInterval( 'slideshow()', 3000 );
			});
			$( '#title' ).fadeIn( 1500 );
		});
		$( window ).resize ( function() {
			checkRatio();
		});

		$( 'html' ).click( function() {
			window.location.href = "/info";
		});

		var timedelay = 1;
		function delayCheck() {
			if( timedelay == 15 ){
				$( '#title' ).fadeOut( 1500 );
				timedelay = 1;
			}
			timedelay = timedelay+1;
		}

		$( document ).mousemove( function() {
			$( '#title' ).clearQueue().fadeIn();
			timedelay = 1;
			clearInterval( _delay );
			_delay = setInterval( delayCheck, 500 );
		});

		// page loads starts delay timer
		if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
			_delay = setInterval( delayCheck, 500 );
		}

		var curr = 0;
		function slideshow() {	
			last_pos = curr;
			curr++;
	
			if ( $( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
				//do nothing
			} else {
				curr = 0; //return to first image
			}
	
			$( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
				"opacity" : 0
			});
			$( "#slideshow" ).find( "img" ).eq( curr ).animate({
				"opacity" : 1
			});
		}

		function checkRatio() {
			$( "#slideshow" ).find( "img" ).each( function() {
				height_ratio = .8;
				image_width = parseInt( $( this ).attr( "width" ) );
				image_height = parseInt( $( this ).attr( "height" ) );
				window_height = $( window ).height();
				new_image_height = window_height * height_ratio;
				ratio = new_image_height / image_height;
				new_width = image_width * ratio;
		
				if ( new_width > ( $( window ).width() * .9 ) ) {
					$( this ).addClass( "landscape" );
				} else {
					$( this ).removeClass( "landscape" );
				}
			});
		}

	  </script>

mariusjopen

Dear @comedowntous
have a look here: http://laytheme.com/documentation.html#custom-javascript

Consider the loading time because your images do not seem to be responsive.

Best!

Marius

comedowntous

Hi Marius! - I sort of got this to work:

I created a page which would serve as an intro and went ahead and added the pertaining html + jquery. I can confirm it is running on the page however I have 2 problems:

1- The slideshow will not load/play on initial page load - the only way I know it is working is when I click on the site title (which appears on mousehover) it directs me to the info page (this is the correct action/response), then when I click the back button on my browser, only then does the slideshow actually begin to play as it’s supposed to -

2- which then brings me to problem number 2 // I then must wait till all the images are loaded for it to begin playing.

The site-title is linked to this page as it is set as the front page - after clicking on the slideshow and arriving on the info page, if the user clicks on the site title again, the slideshow does this weird thing where it tries to reload halfway but then goes back to the info content - is there any way to load the slideshow on the first page load but then change the site-title (/) link thereafter so that this doesn’t happen?

I read somewhere that lay theme is single page and so I must use newpage /newpageshown…

The site title is completely centered - any way to completely center the images across different media as well?

Thank you!

comedowntous

Actually - I just realized that navigating to any other page sends you back to the info page - as if the on-click event of loading the info page keeps repeating itself even after you navigate elsewhere.

mariusjopen

Dear @comedowntous it would help to see it live.

But cannot you just call the function once the page is loaded?
Best!

Marius

comedowntous

You may see it here - agentandartist.co

comedowntous

Update -

Adding newpage /newpagesshown breaks the code. Any way I can load the slideshow only once + preload the images? Also change the sitetitle link to a page different than the front page without necessarily changing the front page?

window.laytheme.on("newpage", function () {
				checkRatio();
				jQuery( '.slideshow' ).fadeIn( 1500 );
				jQuery( "#slideshow" ).find( "img" ).eq( 0 ).animate({
					"opacity" : 1
				}, function() {
					setInterval( 'slideshow()', 3000 );
				});
				jQuery( '#title' ).fadeIn( 1500 );
			});
			$( window ).resize ( function() {
				checkRatio();
			});

			jQuery( 'html' ).click( function() {
				window.location.href = "/info";
			});

			var timedelay = 1;
			function delayCheck() {
				if( timedelay == 15 ){
					$( '#title' ).fadeOut( 1500 );
					timedelay = 1;
				}
				timedelay = timedelay+1;
			}

			jQuery( document ).mousemove( function() {
				jQuery( '#title' ).clearQueue().fadeIn();
				timedelay = 1;
				clearInterval( _delay );
				_delay = setInterval( delayCheck, 500 );
			});
	
			// page loads starts delay timer
			if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
				_delay = setInterval( delayCheck, 500 );
			}
	
			var curr = 0;
			function slideshow() {	
				last_pos = curr;
				curr++;
		
				if ( jQuery( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
					//do nothing
				} else {
					curr = 0; //return to first image
				}
		
				jQuery( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
					"opacity" : 0
				});
				jQuery( "#slideshow" ).find( "img" ).eq( curr ).animate({
					"opacity" : 1
				});
			}
	
			function checkRatio() {
				jQuery( "#slideshow" ).find( "img" ).each( function() {
					height_ratio = .8;
					image_width = parseInt( jQuery( this ).attr( "width" ) );
					image_height = parseInt( jQuery( this ).attr( "height" ) );
					window_height = jQuery( window ).height();
					new_image_height = window_height * height_ratio;
					ratio = new_image_height / image_height;
					new_width = image_width * ratio;
			
					if ( new_width > ( jQuery( window ).width() * .9 ) ) {
						jQuery( this ).addClass( "landscape" );
					} else {
						jQuery( this ).removeClass( "landscape" );
					}
				});
			}

		  </script>

OR

window.laytheme.on("newpageshown", function () {
				checkRatio();
				jQuery( '.slideshow' ).fadeIn( 1500 );
				jQuery( "#slideshow" ).find( "img" ).eq( 0 ).animate({
					"opacity" : 1
				}, function() {
					setInterval( 'slideshow()', 3000 );
				});
				jQuery( '#title' ).fadeIn( 1500 );
			});
			$( window ).resize ( function() {
				checkRatio();
			});

			jQuery( 'html' ).click( function() {
				window.location.href = "/info";
			});

			var timedelay = 1;
			function delayCheck() {
				if( timedelay == 15 ){
					$( '#title' ).fadeOut( 1500 );
					timedelay = 1;
				}
				timedelay = timedelay+1;
			}

			jQuery( document ).mousemove( function() {
				jQuery( '#title' ).clearQueue().fadeIn();
				timedelay = 1;
				clearInterval( _delay );
				_delay = setInterval( delayCheck, 500 );
			});
	
			// page loads starts delay timer
			if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
				_delay = setInterval( delayCheck, 500 );
			}
	
			var curr = 0;
			function slideshow() {	
				last_pos = curr;
				curr++;
		
				if ( jQuery( "#slideshow" ).find( "img" ).eq( curr ).length > 0 ) {
					//do nothing
				} else {
					curr = 0; //return to first image
				}
		
				jQuery( "#slideshow" ).find( "img" ).eq( last_pos ).animate({
					"opacity" : 0
				});
				jQuery( "#slideshow" ).find( "img" ).eq( curr ).animate({
					"opacity" : 1
				});
			}
	
			function checkRatio() {
				jQuery( "#slideshow" ).find( "img" ).each( function() {
					height_ratio = .8;
					image_width = parseInt( jQuery( this ).attr( "width" ) );
					image_height = parseInt( jQuery( this ).attr( "height" ) );
					window_height = jQuery( window ).height();
					new_image_height = window_height * height_ratio;
					ratio = new_image_height / image_height;
					new_width = image_width * ratio;
			
					if ( new_width > ( jQuery( window ).width() * .9 ) ) {
						jQuery( this ).addClass( "landscape" );
					} else {
						jQuery( this ).removeClass( "landscape" );
					}
				});
			}

		  </script>

mariusjopen

Dear @comedowntous
you can simplify the code much more:

Create a folder on AWS or somewhere and name the images 1.jpg, 2.jpg, 3…
Make a HTML box and call it images-box or whatever
Write a JS which counts from 1 until X. Lets say 10 when you have 10 images.
Then use the Javascript to change the CSS code for the background image of the image-box.
"www.aws.com/my-images/" + imagenumer + "jpg"

Hope that helped a bit.
But there must be simple scripts for that online.
it should be really much simpler.

Best!

Marius

Lay Theme Forum

Custom Intro/Landing/Front Page

Before you post:

When you post:

Online Users