PDA

View Full Version : 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 (http://www.dynamicdrive.com/notice.htm), 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:


<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):


<!-- 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):


<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. :cool:

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/dynamicindex14/fadeinslideshow_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:


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:


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

s14guy04
10-11-2013, 06:04 PM
That worked great! Thanks John!