Ultimate Fade In Slideshow - Moving status div

**s14guy04** · 10-10-2013, 10:23 PM

1) Script Title: Ultimate Fade In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

I am simply trying to re-locate the status div.

I want to display the image counter within the status div, but I need it to be away from the navigation controls. I need to put the image counter in the right hand column that says "Status needs to go here"

Please excuse colored borders, they are only visible for responsive testing.

Dev URL: http://re-brand.us/jp/graphic.html

Any help is appreciated!

Thank you.

**jscheuer1** · 10-11-2013, 02:19 AM

.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, add the highlighted as shown:

Code:

	<script type="text/javascript">

	var mygallery2=new fadeSlideShow({
		wrapperid: "slider", //ID of blank DIV on page to house Slideshow
		dimensions: [814, 539], //width/height of gallery in pixels. Should reflect dimensions of largest image
		imagearray: [
			["images/home-1.jpg"],
			["images/graphic-1.jpg"],
			["images/home-1.jpg"],
			["images/graphic-1.jpg"] //<--no trailing comma after very last image element!
		],
		displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
		persist: false, //remember last viewed slide and recall within same session?
		fadeduration: 500, //transition duration (milliseconds)
		descreveal: "always",
		togglerid: "controls",
		oninit: function(){
			jQuery('.status').eq(1).replaceWith(jQuery('.status').eq(0));
		}
	})
	
	</script>

You will also want to remove (red):

Code:

	<!-- Start Right Column -->
	<div class="right-column">
		<div id="counter"> [ <span class="status"></span>Status needs to go here ]
        	</div>
	</div>
	<!-- End Right Column -->

and (again, only the red):

Code:

<div id="controls"><a class="prev">_PREVIOUS</a> [ <span class="status"></span> ] <a class="next">_NEXT</a></div>

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

**s14guy04** · 10-11-2013, 04:14 PM

My apologies! The credit has been put back into the head.

Thank you thank you so much for this!! I was dying trying to figure out how to implement this.

One more question however:

Would it be possible to change the image description div to the one with the yellow border?

**s14guy04** · 10-11-2013, 05:02 PM

Nevermind!

I found exactly what I was looking for in the supplemental page 2 of the Ultimate Fade In Slideshow here:

http://www.dynamicdrive.com/dynamici...suppliment.htm

Thank you so much for your hard work on these sliders, I love them!

**jscheuer1** · 10-11-2013, 05:10 PM

I see you're messing around with this. When you had:

Code:

		onslide:function(curimage, index){
		  var imagearray=this.setting.imagearray
		  jQuery('.content').html(imagearray[index][3])
		}

That's close. But apparently for images with no descriptions that leaves the last description, at least in some browsers. You might want:

Code:

		onslide:function(curimage, index){
		  var imagearray=this.setting.imagearray, desc = imagearray[index][3];
		  if(desc){jQuery('.content').html(desc);} else {jQuery('.content').empty();}
		}