»

Leptos Estate feature jQuery

Leptos Estate uses jQuery to crossfade feature images

Leptos Estate uses jQuery to crossfade feature images

I’m posting about another bit of simple jQuery. It’s a double whammy of crossfading feature images and a carousel of information boxes. These kinda things are popular at the moment so here it is :-)

 

The amazing view fades from sunset to morning

The amazing view fades from sunset to morning

JavaScript techniques like this really enhance property websites. The user can see a whole bunch of scenic images while casually browsing the page. This is another design by Dino from Web Theoria, who asked me to create this homepage feature. They are based in Cyprus and do quite a few websites for property and development clients.

 

So what’ going on there?

I created a stripped back template from the supplied Photoshop design. No proper content or styling beyond the boxes that are animated. You can see how that looks here. The Web Theoria team were then able to flesh out their HTML template from this. Adding content and all the extra trapping.

Stripped bare! Grey boxes & cats from the internet

Stripped bare! Grey boxes & cats from the internet

Below is the stripped down HTML used for the slider and cross-fading images. This is HTML 4, so it’s a set of nested div tags.

…
<div id="fader">
  <div class="feature"><div class="fader pic1"></div></div>
  <div class="feature"><div class="fader pic2"></div></div>
  <div class="feature"><div class="fader pic3"></div></div>
  <div class="feature"><div class="fader pic4"></div></div>
</div>
…
<div id="slideleft"></div>
<div id="slider">
  <div id="slidesets">
    <div class="slideset set1">
      <div class="slidebox">Box 1</div>
      <div class="slidebox">Box 2</div>
      <div class="slidebox">Box 3</div>
    </div>
    <div class="slideset set2">
      <div class="slidebox">Box 4</div>
      <div class="slidebox">Box 5</div>
      <div class="slidebox">Box 6</div>
    </div>
      <div class="slideset set3">
      <div class="slidebox">Box 7</div>
      <div class="slidebox">Box 8</div>
      <div class="slidebox">Box 9</div>
    </div>
    <div class="slideset set4">
      <div class="slidebox">Box 10</div>
      <div class="slidebox">Box 11</div>
      <div class="slidebox">Box 12</div>
    </div>
  </div>
</div>
<div id="slideright"></div>
…

With the HTML sorted some variables were added to the JavaScript. They store the current state of the slider cross-fading images and can be used to tweak the speed and timings.

var count = 0;
var next = 1;
var fadeTop = false;
var duration = 1000;
var pause = 5000;
var single = true;
var boxes = 3;
var pos = 0;
var slidetime = 500;
var slidepause = 1000;
var slidehold = 2000;
var timeo;
var dif;
var l;
var w;

When the page is ready the jQuery kicks in adding the left and right arrows (They are not needed when JavaScript is turned off) and the sliders are set up. This code is wrapped in $(document).ready(function(){});

// Slider
$('#slider').css('overflow', 'hidden');
$('#slideleft').html('<a href="#" id="arrowleft"><span>Left</span></a>');
$('#slideright').html('<a href="#" id="arrowright"><span>Right</span></a>');
         
var sbl = $('.slidebox').length;
dif = boxes-(sbl-Math.floor(sbl/boxes)*boxes);
         
if (single && sbl>boxes)
{
  if (dif<boxes)
  {
    for (i=0; i<dif; i++)
    {
      $('.slidebox:eq('+i+')').clone().appendTo(
        $('.slideset:eq('+($('.slideset').length-1)+')')
      );
    }
  }
  $('#slidesets').append('<div class="slideset"></div>');
           
  for(i=dif==boxes ? 0 : dif; i<boxes; i++)
  {
    $('.slidebox:eq('+i+')').clone().appendTo(
      $('.slideset:eq('+($('.slideset').length-1)+')')
    );
  }
}
$('#slidesets').css('width', $('.slideset').length*$('#slider').width()+'px');
arrowTest();
                  
$('#arrowleft').click(function(){ slide(1, true); return false; });
$('#slideright').click(function(){ slide(-1, true); return false; });
         
timeo = setTimeout(slide, slidepause);

Before closing the $(document).ready function the first fader test is called, starting its timer too.

// Fader
fadeTest();

The cross-fading feature image functions are next. There are three of them. fadeTest tees up the next image to be faded in before calling waitAndFade which has a delay and fadeCallback as a call back function.

function fadeTest()
{
  $('.fader').each(function(n){
    if (n==count)
      $(this).show();
    else
      $(this).hide();
  });

  $('.fader:eq('+next+')').show();

  if (next>count)
  {
    $('.fader:eq('+next+')').fadeTo(0, 0);
    waitAndFade(next, 1);
  }
  else
    waitAndFade(count, 0);
}

function waitAndFade(i, opacity)
{
  $('.fader:eq('+i+')').delay(pause).fadeTo(duration, opacity, fadeCallback);
}

function fadeCallback()
{
  count = next;
  next = next+1 < $('.fader').length ? next+1 : 0;
  fadeTest();
}

The slide function checks wether to use move the whole width of the slider area or the width of one box (as indicated by the single and box variables). There’s a call back function on the jQuery animate appropriately named slideCallback which checks the state of the arrows (arrowTest).

function slide(n, hold)
{
  if (n==undefined) n = -1;
  clearTimeout(timeo);
  pos += n*1;

  var l;
  var w;

  if (single)
  {
    l = $('.slidebox').length;
    w = $('#slider').width()/boxes;
  }
  else
  {
    l = $('.slideset').length;
    w = $('#slider').width();
  }

  $('#slidesets').animate({ marginLeft: w*pos }, slidetime, slideCallback);
  arrowTest();

  var s = hold ? slidehold : slidepause;
  timeo = setTimeout(slide, s, [-1]);
  var m = single ? ($('.slideset').length-2)*boxes+($('.slideset:eq('+($('.slideset').length-1)+') > .slidebox').length) : $('.slidebox').length;
  if (pos<=(m)*-1) pos = 0;
}

function slideCallback()
{
  if (single)
  {
    if (pos==0)
    {
      $('#slidesets').css('marginLeft', 0);
      $('#arrowleft').css('display', 'none');
      $('#arrowright').css('display', 'inline');
    }
  }
}

function arrowTest()
{
  var l = single ? l = $('.slidebox').length : $('.slideset').length;
  var m = single ? ($('.slideset').length-2)*boxes+($('.slideset:eq('+($('.slideset').length-1)+') > .slidebox').length) : $('.slidebox').length;
  $('#arrowleft').css('display', pos==0 ? 'none' : 'inline');
  $('#arrowright').css('display', pos==(m)*-1 ? 'none' : 'inline');
}

I’ll leave most of the CSS to your imagination :-). Below are a couple of snippets to help understand how the crossfader and slider arrange similar blocks with different content.

…
.fader {  background: transparent top center no-repeat; width: 100%; height: 723px;   }
.fader.pic1 {  background-image: url(../images/cat-01.jpg);   }
.fader.pic2 {  background-image: url(../images/cat-02.jpg);   }
.fader.pic3 {  background-image: url(../images/cat-03.jpg);   }
.fader.pic4 {  background-image: url(../images/cat-04.jpg);   }
…
.slideset {  width: 930px; height: 250px; float: left;  }
.slideset.set1 {  …  }
.slideset.set2 {  …  }
.slideset.set3 {  …  }
.slideset.set4 {  …  }
…

 

You can view the final homepage on the Leptos Estates website here.

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>