2. Home
  3. Articles
  4. Web-Dev
  5. MooTools Framework
  6. Slideshow div layer through a window

Slideshow div layer through a window

MooTools Framework
Hits: 6453
Somewhat incomplete! Will post a final solution but here are the basics

What?
This article is a quick note to myself on the idea of a slideshow with the MooTools javascript framework. Basically, I want to create a div layer that I can see through (like a window with no glass) and for all the flashy stuff, to only appear within the boundary of the parent div layer.

Why?
I'm making a slideshow from scratch.

How?
The idea is:
  1. Use two main div layers, I'm going to refer to them as "window_slide" and "inner_window". Slide divs to be added inside the "inner_window".
  2. Move the slides in from right to left with a transition.
  3. Push existing slide out to the left; as soon as this is out of sight then hide it behind the displayed slide.
  4. Replace contents of the hidden slide with contents of the displayed slide.
  5. Hide currently displayed slide to expose the first slide again (restores the starting position of "next slide").

The Gist


Strategy
  • This may not be a great idea, I'm just trying something out. The brief was pretty much just "...fast and works with cms articles...".
  • If we have 100 slides then 100 slides of data will need to load at the same time per page. Terrible. Using AJAX (which will have to be Asynchronous JavaScript and xHTML. I'm not using XML, or is that AJAHtml? AJAH?), anyway, we can send each new info to the next slide and use only two slides in total (that's the aim at least).
  • Other objects (mostly text over image) will need to be free flowing and slide in emulating a dynamic showcase slideshow.
  • Using MooTools it's also proven to be responsive and compatible with smartphones.(Like Flash back in the days of Macromedia Flash :c) and works with apple macs!).

The HTML
copyraw 
<div id="window_slide">
	<div id="inner_window">
		<div id="slide_01">
			Slide #1
		</div>
		<div id="slide_02">
			Slide #2
		</div>
	</div>
</div>
<a href="#" id="next">Next Slide</a>
  1.  <div id="window_slide"> 
  2.      <div id="inner_window"> 
  3.          <div id="slide_01"> 
  4.              Slide #1 
  5.          </div> 
  6.          <div id="slide_02"> 
  7.              Slide #2 
  8.          </div> 
  9.      </div> 
  10.  </div> 
  11.  <a href="#" id="next">Next Slide</a> 

The CSS
copyraw 
#window_slide{
	display:block;
	width:100%;
	height:400px;
	overflow:hidden;
}
#inner_window{
	display:block;
	width:100%;
	height:400px;
	overflow:hidden;
}
#slide_01{
	position:relative;
        float:left;
}
#slide_02{
	position:relative;
        float:left;
}
  1.  #window_slide{ 
  2.      display:block; 
  3.      width:100%; 
  4.      height:400px; 
  5.      overflow:hidden; 
  6.  } 
  7.  #inner_window{ 
  8.      display:block; 
  9.      width:100%; 
  10.      height:400px; 
  11.      overflow:hidden; 
  12.  } 
  13.  #slide_01{ 
  14.      position:relative; 
  15.          float:left; 
  16.  } 
  17.  #slide_02{ 
  18.      position:relative; 
  19.          float:left; 
  20.  } 

The JS/Mootools Part
Apologies for the mess as the solution I'm working on is far more complex and I need to keep extracting the basic mechanisms of this to demo here. Under Construction!
copyraw 
window.addEvent('domready', function() {

	var v_width = $('v_placeholder').getCoordinates().width;
	var v_win_x = $('window_slide').getCoordinates().left;
	var v_win_y = $('window_slide').getCoordinates().top;
	var v_win_height = $('window_slide').getCoordinates().height;
	var v_win_width = $('window_slide').getCoordinates().width;
	var v_top_most = 0 - v_win_height;
	var v_left_most = 0 - v_win_width;
	var v_right_most = 0 + v_win_width + 1;

	// setup slide 1 onload
	var fx_slide1 = new Fx.Morph('slide_01', {duration: 1000,transition: Fx.Transitions.Quart.easeOut});
	$('slide_01').setStyle('background-image', 'url(http://www.joellipman.com/images/jcd/pea_green_bg.jpg)');
	$('slide_01').setStyle('width', v_win_width);
	$('slide_01').setStyle('opacity', '1');
	$('slide_01').setStyle('left', 0);
	$('slide_01').setStyle('top', 0);

	// setup slide 2 onload
	var fx_slide2 = new Fx.Morph('slide_02', {duration: 1000,transition: Fx.Transitions.Quart.easeOut});
	$('slide_02').setStyle('background-image', 'url(http://www.joellipman.com/images/jcd/under_leaf.jpg)');
	$('slide_02').setStyle('width', v_win_width);
	$('slide_02').setStyle('opacity', '0');
	$('slide_02').setStyle('left', v_win_width);
	$('slide_02').setStyle('top', 0);

	$('v_crowdsource').addEvent('click', function(){
		fx_slide1.start({
			'opacity': 1,'top': 0,'left': 0,'height': v_win_height,'width': v_win_width
		}).chain(function(){
			this.start.delay(1000, this, {
				// duration of 1 second for transition
				'opacity': 1,'top': 0,'left': v_left_most,'height': v_win_height,'width': v_win_width
			});
		}).chain(function(){
			this.start.delay(1, this, {
				// make slide invisible
				'opacity': 0,'top': 0,'left': v_left_most,'height': v_win_height,'width': v_win_width
			});
		}).chain(function(){
			this.start.delay(1, this, {
				// put slide back on the right
				'opacity': 0,'top': 0,'left': v_right_most,'height': v_win_height,'width': v_win_width
			});
		});

		fx_slide2.start({
			'opacity': 1,'top': v_top_most,'left': v_right_most,'height': v_win_height,'width': v_win_width
		}).chain(function(){
			this.start.delay(1000, this, {
				// duration of 1 second for transition
				'opacity': 1,'top': v_top_most,'left': 0,'height': v_win_height,'width': v_win_width
			});
		});
	});

	$('v_summary').addEvent('click', function(){
		fx_slide2.start({
			'opacity': 1,'top': v_top_most,'left': 0,'height': v_win_height,'width': v_win_width
		}).chain(function(){
			this.start.delay(1000, this, {
				// duration of 1 second for transition
				'opacity': 1,'top': v_top_most,'left': v_left_most,'height': v_win_height,'width': v_win_width
			});
		}).chain(function(){
			this.start.delay(1, this, {
				// make slide invisible
				'opacity': 0,'top': v_top_most,'left': v_left_most,'height': v_win_height,'width': v_win_width
			});
		}).chain(function(){
			this.start.delay(1, this, {
				// put slide back on the right
				'opacity': 0,'top': v_top_most,'left': v_right_most,'height': v_win_height,'width': v_win_width
			});
		});

		fx_slide1.start({
			'opacity': 1,'top': 0,'left': v_right_most,'height': v_win_height,'width': v_win_width
		}).chain(function(){
			this.start.delay(1000, this, {
				// duration of 1 second for transition
				'opacity': 1,'top': 0,'left': 0,'height': v_win_height,'width': v_win_width
			});
		});
	});
});
  1.  window.addEvent('domready', function() { 
  2.   
  3.      var v_width = $('v_placeholder').getCoordinates().width; 
  4.      var v_win_x = $('window_slide').getCoordinates().left; 
  5.      var v_win_y = $('window_slide').getCoordinates().top; 
  6.      var v_win_height = $('window_slide').getCoordinates().height; 
  7.      var v_win_width = $('window_slide').getCoordinates().width; 
  8.      var v_top_most = 0 - v_win_height; 
  9.      var v_left_most = 0 - v_win_width; 
  10.      var v_right_most = 0 + v_win_width + 1; 
  11.   
  12.      // setup slide 1 onload 
  13.      var fx_slide1 = new Fx.Morph('slide_01', {duration: 1000,transition: Fx.Transitions.Quart.easeOut}); 
  14.      $('slide_01').setStyle('background-image', 'url(http://www.joellipman.com/images/jcd/pea_green_bg.jpg)'); 
  15.      $('slide_01').setStyle('width', v_win_width); 
  16.      $('slide_01').setStyle('opacity', '1'); 
  17.      $('slide_01').setStyle('left', 0); 
  18.      $('slide_01').setStyle('top', 0); 
  19.   
  20.      // setup slide 2 onload 
  21.      var fx_slide2 = new Fx.Morph('slide_02', {duration: 1000,transition: Fx.Transitions.Quart.easeOut}); 
  22.      $('slide_02').setStyle('background-image', 'url(http://www.joellipman.com/images/jcd/under_leaf.jpg)'); 
  23.      $('slide_02').setStyle('width', v_win_width); 
  24.      $('slide_02').setStyle('opacity', '0'); 
  25.      $('slide_02').setStyle('left', v_win_width); 
  26.      $('slide_02').setStyle('top', 0); 
  27.   
  28.      $('v_crowdsource').addEvent('click', function(){ 
  29.          fx_slide1.start({ 
  30.              'opacity': 1,'top': 0,'left': 0,'height': v_win_height,'width': v_win_width 
  31.          }).chain(function(){ 
  32.              this.start.delay(1000, this, { 
  33.                  // duration of 1 second for transition 
  34.                  'opacity': 1,'top': 0,'left': v_left_most,'height': v_win_height,'width': v_win_width 
  35.              }); 
  36.          }).chain(function(){ 
  37.              this.start.delay(1, this, { 
  38.                  // make slide invisible 
  39.                  'opacity': 0,'top': 0,'left': v_left_most,'height': v_win_height,'width': v_win_width 
  40.              }); 
  41.          }).chain(function(){ 
  42.              this.start.delay(1, this, { 
  43.                  // put slide back on the right 
  44.                  'opacity': 0,'top': 0,'left': v_right_most,'height': v_win_height,'width': v_win_width 
  45.              }); 
  46.          }); 
  47.   
  48.          fx_slide2.start({ 
  49.              'opacity': 1,'top': v_top_most,'left': v_right_most,'height': v_win_height,'width': v_win_width 
  50.          }).chain(function(){ 
  51.              this.start.delay(1000, this, { 
  52.                  // duration of 1 second for transition 
  53.                  'opacity': 1,'top': v_top_most,'left': 0,'height': v_win_height,'width': v_win_width 
  54.              }); 
  55.          }); 
  56.      }); 
  57.   
  58.      $('v_summary').addEvent('click', function(){ 
  59.          fx_slide2.start({ 
  60.              'opacity': 1,'top': v_top_most,'left': 0,'height': v_win_height,'width': v_win_width 
  61.          }).chain(function(){ 
  62.              this.start.delay(1000, this, { 
  63.                  // duration of 1 second for transition 
  64.                  'opacity': 1,'top': v_top_most,'left': v_left_most,'height': v_win_height,'width': v_win_width 
  65.              }); 
  66.          }).chain(function(){ 
  67.              this.start.delay(1, this, { 
  68.                  // make slide invisible 
  69.                  'opacity': 0,'top': v_top_most,'left': v_left_most,'height': v_win_height,'width': v_win_width 
  70.              }); 
  71.          }).chain(function(){ 
  72.              this.start.delay(1, this, { 
  73.                  // put slide back on the right 
  74.                  'opacity': 0,'top': v_top_most,'left': v_right_most,'height': v_win_height,'width': v_win_width 
  75.              }); 
  76.          }); 
  77.   
  78.          fx_slide1.start({ 
  79.              'opacity': 1,'top': 0,'left': v_right_most,'height': v_win_height,'width': v_win_width 
  80.          }).chain(function(){ 
  81.              this.start.delay(1000, this, { 
  82.                  // duration of 1 second for transition 
  83.                  'opacity': 1,'top': 0,'left': 0,'height': v_win_height,'width': v_win_width 
  84.              }); 
  85.          }); 
  86.      }); 
  87.  }); 

Known Issues
  • If the end-user clicks too quickly between slides, the slides are not ready or not in the right position until after 1 second --> reduce transition duration?
  • No MooTools Vertical/Horizontal Fx.Slide? couldn't get it to have that smooth slideshow transition.

Category: MooTools Framework :: Article: 435

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Joes Word Cloud

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.