Hi guys!
I have an HTML + JavaScript site I am working on and I am trying to add a little functionality, but each time I try to adjust things to my liking, I break the script. You guys were able to instantly solve my question last time, so I thought I would ask and see if you had an easy solution.
The JavaScript is a slideshow, with a description that occurs on top of the photos. The trick that I'm trying to achieve is: to have the description text appear below the slideshow, along with the image count (e.g. "3 of 7", etc.)
You can see the slideshow page as it currently exists here:
http://www.louisecarriewales.com/test/codes_of_conduct_images.html[
^]
The slideshow itself is called into the HTML minimally, with just this:
<div id="fadeshow1"></div>
The image count ("3 of 7", etc.) is called into the HTML separately below that, with the "status":
<div id="fadeshow1toggler" style="width:627px; text-align:center; margin-removed1px">
<span class="status" style="margin:0 1px;"></span>
</div>
In the page's head, we have this. The description I want to pull and move below is the fourth and final string in each array.
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [543, 649], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/photo_wall_smaller.jpg", "", "", "Name of the image Lorum ipsum"],
["images/photo_fpo1.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Title of the artwork"],
["images/photo_fpo2.jpg", "", "", "Name of the image Lorum ipsum dolor sit"],
["images/photo_fpo3.jpg", "", "", "Name of the image"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1100, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "fadeshow1toggler"
})
</script>
The meat of the JavaScript is a separate document called fadeslideshow.js, which you can see in its entirety here:
http://www.louisecarriewales.com/test/fadeslideshow.js[
^]
But below is the portion of the .js file that presents the image count, and this is exactly where I'd like to add the description blurb:
if (setting.$descpanel){
setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
if (setting.imagearray[imgindex][3])
setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
}
if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
this.paginatecontrol()
}
if (setting.$status)
setting.$status.html(setting.curimage+1 + " <span class=\"sections_grey\">of</span> " + totalimages + " <span class=\"copper\"> name of image here</span>")
},
Is there an easy way to add in the description here that won't break the script? Thank you guys for your time and expertise! This should be my last question on this project. :)
-Barry