CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Sushil Raghav
Sushil Raghav

Reputation: 253

How to redirect page after Image slider finish loading in jquery?

I have a site with a rotating banner image in intro div and rest of the home page in page div. I want to do the following:

  1. How can we hide intro div which contains current rotating banner images after finishing last slide and show rest of the home page.
  2. Or if user will click on skip intro text then also it will show home page.

Current site: http://new.brandonplanning.com/home

I think modification is required in this code

/*-------------Intro page slider starts-----------*/

var intervalID;

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ($active.length == 0) $active = $('#slideshow IMG:last');

    //var $next = $active.next().length ? $active.next()
    //    : $('#slideshow IMG:first');

    var $next;
    if ($active.next().length) {
        $next = $active.next().delay(3000);
    } else {
        clearInterval(intervalID);
        visibilityCheck();
        return;
    }

    $active.addClass('last-active');

    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
            $active.removeClass('active last-active');
        });
}

$(function () {
    intervalID = setInterval("slideSwitch()", 6000);
});

/*-------------Intro page slider ends-----------*/

/*-------------Intro page skip starts-----------*/

$(window).load(function () {
    $(function () {
        visibilityCheck();
        $('#loader').remove();
    });

    $('.skip-intro').click(function () {
        visibilityCheck();
    });
});

function visibilityCheck() {
    $('.hidden').removeClass('hidden');

    if ($('#page').is(':hidden')) {
        $('#intro').addClass('hidden');
    } else {
        $('#page').addClass('hidden');
    }
}

/*-------------Intro page skip ends-----------*/

Thanks in Advance

Upvotes: 1

Views: 2168

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

Basically what you need is this:

demo jsBin

$('#slider img:gt(0)').hide();

var T; // timeout
var c = 0;  // counter
var imgN = $('#slider img').length; // get the images Number

function toggler(){    // screens toggler function
  $('#intro').fadeTo(400,0).siblings('#page').fadeTo(400,1);
}

function a(){  // 'A'nimations
  if(c === imgN ){   // if the 'C'ounter reached the images in slider...
    toggler();       // toggle our screens
  }else{             // else ... do our animations.
    $('#slider img').siblings('img').stop().fadeTo(1000,0).eq(c++).stop().fadeTo(1000,1);
  }                                                        // ^^^^ here the counter 'ticks'
}

function aa(){ // 'A'uto 'A'dvance
   T=setTimeout(function(){
       a();
       aa();
   },2000);     // set here pause between slides
}
aa();


$('#skip').click(function(){  // if 'skip' is clicked...
  clearTimeout(T);                 // well...
  toggler();                       // run our screens 'toggler'
});

Hope you'll easily implement this into your page.

Upvotes: 1

Alex
Alex

Reputation: 9031

1, How can we hide intro div which contains current rotating banner images after finishing last slide and show rest of the home page.

You'll need to check that the last image has the .active, then use .delay() before hiding the #intro and showing the #page, something like:

if ($(.skip-intro li).last().hasClass('active')){
  $('#intro').delay(2000).addClass('.hidden').queue(function() {
    $('#page').removeClass('.hidden');
  });
}

2, Or if user will click on skip intro text then also it will show home page.

$('.skip-intro').click(function(){
  $('#intro').addClass('.hidden');
  $('#page').removeClass('.hidden');
});

Upvotes: 1

Related Questions