Hi everyone.

 

I'm putting together an image fader [more than a slider] that has an overlapping content div [that does in fact slide]

 

However, I'm getting a really poor page load time when I call back the function inside itself, so as to repeat it. This delay is screwing up my animation delays, etc...

 

Any way, I'll show you guys the code:

$(document).ready(function() {      

   //Execute slideShow, set 4 seconds for each images
   slideShow(4000);
   overlap(4000);
});

function overlap() {

   $('#overlap').delay(500).animate({"width":900,}, 500)
       .delay(3000).animate({"width":2600,},500)
       .animate({"right":1300,},500)
       .animate({"height":0,})
       .animate({"right":0,})
       .animate({"width":0,})
       .animate({"height":512,})

   overlap()

}

function slideShow(speed) {

   //Set opacity of all images to 0
   $('ul.slideshow li').css({opacity: 0.0});

   //Get first image and display it (set it to full opacity)
   $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');

   //Call gallery function to run slideshow    
   var timer = setInterval('gallery()',speed);     
}

function gallery() {


   //if no IMGs have show class, grab first image
   var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//speed issue
   if(current.queue('fx').length == 0) {

       //Get next image, if it reached end of slideshow, rotate back to first
       var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));


       //Set fade for next image, show class has higher z-index
       next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

       //Hide current image
       current.animate({opacity: 0.0}, 1000).removeClass('show');

   }

}

 

If anyone has any ideas they would be appreciated. Other than sloppy syntax/general poor coding I keep looking at the doc ready function and thinking it might be the sneaky little culprit...

 

Thanks..!

One thing I forgot to ask is about the loop I put in there. It was intentional, but is that a 'no-no' all the same..? I figured as it's actually doing something it would be okay...

overlap() is being called an infinite number of times, as fast as the processor can do it - ie. no delay, no recursive conclusion. Not good news!

 

overlap(4000) <- what is this? No parameters are defined in the overlap function, so 4000 is completely irrelevant.

 

Here's a basic structure for a slideshow. I just wrote it up very quickly so probably quite glitchy...

 

(function($){

$.fn.mySlideshow = function(options){

	var defaults = {
		speed: 500,
		perSlide: 5000,
		autoplay: true,
		nextButton: "#next",
		prevButton: "#prev"
	};

	var opts = $.extend(defaults, options);

	return this.each(function(){

		var slideShow = $(this);
		var slides    = $(this).children();
		var current_slide = 0;
		var is_animating = false;
		var autoplay = null;

		var _init = function(){
			$(slideShow).css({
				"position": "relative",
				"overflow": "hidden",
				"height": $(slides[0]).outerHeight() + "px"
			});
			$(slides).css({
				"position": "absolute",
				"top": 0,
				"left": 0
			});
			$(slides).hide();
			$(slides[0]).show();
			if (opts.autoplay && opts.perSlide){
				autoplay = setInterval(_autoplay, opts.perSlide);
			}
		};

		var _autoplay = function(){
			goToSlide(_getNextSlide());
		};

		var _stopAutoplay = function(){
			clearInterval(autoplay);
		};

		var _getNextSlide = function(){
			return current_slide + 1 >= slides.length ? 0 : current_slide + 1;
		};

		var _getPreviousSlide = function(){
			return current_slide - 1 < 0 ? slides.length - 1 : current_slide - 1;
		};

		var goToSlide = function(slide){
			if (is_animating || $(slides[slide]).is(":visible")){
				//Already doing transition
				//or already showing slide
				return;
			}
			if ($(slides[slide]).length){
				is_animating = true;
				$(slides).fadeOut(opts.speed);
				$(slides[slide]).fadeIn(opts.speed);
				setTimeout(function(){
					current_slide = slide;
					is_animating = false;
				}, opts.speed);
			}
		};

		$(opts.nextButton).click(function(e){
			e.preventDefault();
			_stopAutoplay();
			goToSlide(_getNextSlide());
		});

		$(opts.prevButton).click(function(e){
			e.preventDefault();
			_stopAutoplay()
			goToSlide(_getPreviousSlide());
		});

		//Start the slideshow plugin
		_init();

	});	

};

})(jQuery);

Edited July 17, 201214 yr by andyl

Yeah, I got the code sorted with a setInterval. Job done..!

You could group those animate()'s like so:

 

$(element).animate({
width: "100px",
right: "0px",
left: "0px"
}, 500);

Edited July 17, 201214 yr by andyl