Click here to Skip to main content
15,394,023 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
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:[^]

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>

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", "", "_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"

The meat of the JavaScript is a separate document called fadeslideshow.js, which you can see in its entirety here:[^]

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]) //if this slide contains a description
            setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
    if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
    if (setting.$status) //if status container defined
        setting.$status.html(setting.curimage+1 + " <span class=\"sections_grey\">of</span> " + totalimages + "&nbsp; &nbsp; <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. :)
Updated 30-May-13 9:34am
Sergey Alexandrovich Kryukov 30-May-13 14:38pm
Why do you call it "intermediate"? Is it from your school course, or something like that?
pygmydynamo 30-May-13 14:49pm
Not a school course. I thought "intermediate" would help catch the eye of the right person to address it, since it might be too complex for novice JavaScripters dabblers, but it doesn't seem like it should be particularly advanced or complex for guys that know this stuff really well.
Sergey Alexandrovich Kryukov 30-May-13 15:20pm
Thank you. Just checking. I would advise not to mention the "level" in questions though. In our inquirers, their judgement on knowledge level is usually so crazy that nobody will probably take it seriously... :-)
pygmydynamo 30-May-13 15:32pm
I see. I will edit the title, then.

1 solution


Try changing the status line code as shown below
if (setting.$status) { //if status container defined
    var imgName = setting.imagearray[setting.curimage][3];
    setting.$status.html(setting.curimage + 1 
                         + "<span class=\"sections_grey\"> of </span> " 
                         + totalimages + "&nbsp;&nbsp;<span class=\"copper\"> " 
                         + imgName + "</span>");

pygmydynamo 31-May-13 18:11pm
That worked perfectly. Thank you very much for your expertise!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900