Monday, April 30, 2012

JScript : How can i trigger Auto Play Slideshow for OnPageLoad Event ? Please Note down the code. Thanx in Advance

Following is The code i have used for playing slideshow of some pictures in my website background. You can check the site as well. www.vishalseth.in/home.html I want to play the slideshow on OnPageLoad event so the user can just pause the slideshow if they want else it will keep running automatically. Please help me with the code.



jQuery(document).ready(function($){

$('body').append('<span id="body_loader"></span>');
$('#body_loader').fadeIn();

//In our jQuery function, we will first cache some element and define some variables:
var $bg = $('#background'),
$bg_img = $bg.find('img'),
$bg_img_eq = $bg_img.eq(0),
total = $bg_img.length,
current = 0,
$next = $('#next'),
$prev = $('#prev')

$(window).load(function(){
//hide loader
$('#body_loader').fadeOut('fast', function(){
init();
}).remove();

});

var intervalID,
play = $('#play'),
titleItem = $('.title-item');

//shows the first image and initializes events
function init(){
//get dimentions for the image, based on the windows size
var dim = getImageDim($bg_img_eq);
//set the returned values and show the image
$bg_img_eq.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
}).fadeIn('normal');

//resizing the window resizes the $tf_bg_img
$(window).bind('resize',function(){
var dim = getImageDim($bg_img_eq);
$bg_img_eq.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
});
});

var activeTitle = $bg_img_eq.attr('title');
titleItem.html(activeTitle);
titleItem.html(function(){
var text= $(this).text().split(" ");
var last = text.pop();
return text.join(" ")+ (text.length > 0 ? " <span class='word-last'>"+ last + "</span>" : last);
});

play.bind('click', function() {
if($(this).hasClass('pause')) {
clearInterval(intervalID);
$(this).removeClass('pause').addClass('play');
} else {
$(this).addClass('pause').removeClass('play');
intervalID = setInterval("$('#next').trigger('click')", 2000);
}

});

//click the arrow down, scrolls down
$next.bind('click',function(){
if($bg_img_eq.is(':animated'))
return false;
scroll('tb');
});

//click the arrow up, scrolls up
$prev.bind('click',function(){
if($bg_img_eq.is(':animated'))
return false;
scroll('bt');
});
}




No comments:

Post a Comment