Ultimate Fade-in slideshow (v2.4)

[putrantos]

Hi, I need help on Ultimate Fade-in slideshow (v2.4).

I tried to put my own "peekaboo" div, in a front layer, showing left to right.

MY CSS:

#info2 {
display:inline-block; 
width:auto;
margin-top:200px;
text-align:left; 
padding:20px; 
font-size:28px; 
color:#FFFFFF; 
font-family: "DinProRegWeb", Arial, Helvetica, sans-serif;
text-shadow: #666666 0.1em 0.1em 0.2em;
font-weight:bold;
background: rgba(0,0,0,0.2);
visibility:hidden;
}

MY JAVASCRIPT:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [960, 360], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: fadeimages001,
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1500, //transition duration (milliseconds)
	descreveal: "ondemand",
	descreveal: "none",	
	togglerid: "",
	onslide:function(curimage, index){
	jQuery('#info2').css('visibility', 'visible')
	var imagearray=this.setting.imagearray
           var effect = 'slide'
           var options = { direction: 'left' }
           var duration = 700
	jQuery('#info2').html(imagearray[index][3]).hide().show(effect, options, duration)
	}	
})

THE SCRIPT WORKS OK, shows the next (new) image descriptions triggered by onslide, AFTER the new images is displayed.

QUESTION:

I want to hide the "current image description" (div) BEFORE skipping to the next image.

Thank you,
TNT

[jscheuer1]

Add this code to the end of the fadeslideshow.js file:

// On Before Slide Script (c)2013 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// for/requires Ultimate Fade In Slideshow

jQuery.extend(fadeSlideShow.prototype, {
	paginateinit:function($){ // replaces native paginate function
		var slideshow=this
		var setting=this.setting;
		if (setting.togglerid){ //if toggler div defined
			setting.$togglerdiv=$("#"+setting.togglerid+", ."+setting.togglerid); // add togglerid as a class to allow multiple cotrol divs
			setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev');
			setting.$next=setting.$togglerdiv.find('.next').data('action', 'next');
			setting.$status=setting.$togglerdiv.find('.status')
			setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
				slideshow.navigate($(this).data('action'));
				e.preventDefault();
			});
		}
		var show = this.showslide;
		this.showslide = function(keyword){ // extend native showslide function to provide an onbeforeslide callback function
			var lng = setting.imagearray.length, idx = keyword === 'next'? (setting.curimage + 1) % lng : keyword === 'prev'?
				(setting.curimage - 1 + lng) % lng : keyword;
			if(setting.displaymode.type !== "auto" || (!setting.ismouseover && setting.currentstep <= setting.totalsteps)){
				if (setting.onbeforeslide){
					try{setting.onbeforeslide.call(this, idx);}catch(e){
						alert('Fade In Slideshow error: An error has occured somwhere in your code attached to the "onbeforeslide" event: ' + e);
					}
				}
			}
			show.apply(this, [keyword]);
		};
	}
});

Save and use that version. Now, in addition to the onslide(curimage, index) function, you may also use an onbeforeslide(idx) function. Use it to hide the current description before sliding. In said function, the keyword this will refer to the slideshow instance and the single available parameter is the index of the slide which will be shown next. Ex:

onbeforeslide: function(idx){
	jQuery('#info').hide();
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.