Ultimate Fade-in slideshow -- Links in Captions

[ellenjones6]

1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I searched the forum and found some information on adding links to photo captions. I experimented with some links in the slide show in the following page: http://adirondackvic.org/Adirondack-Nature-Walk-2-August-2013.html

Here is the resulting code:


["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-1.jpg", "", "", 'Adirondack Wildflowers: <a href="Pitcher Plant -- Sarracenia purpurea.htm" style="color: #FFF;">Pitcher Plant</a> on the <a href="BorealLife.html" style="color: #FFF;">Boreal Life Trail</a> (2 August 2013)'],
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-2.jpg", "", "", 'Trees of the Adirondacks: Black Spruce on <a href="Adirondack-Wetlands.html#bog" style="color: #FFF;">Barnum Bog</a> (2 August 2013)'],
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-3.jpg", "", "", 'Adirondack Wetlands: Barnum Brook flowing through <a href="Adirondack-Wetlands.html#bog" style="color: #FFF;">Barnum Bog</a> (2 August 2013)'],
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-4.jpg", "", "", 'Adirondack Wildflowers: <a href="Pickerelweed-Pontederia-cordata.htm" style="color: #FFF;">Pickerelweed</a> near Barnum Brook (2 August 2013)'],
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-5.jpg", "", "", 'Trees of the Adirondacks: Tamarack on <a href="Adirondack-Wetlands.html#bog" style="color: #FFF;">Barnum Bog</a> (2 August 2013)'],
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-6.jpg", "", "", 'Adirondack Wetlands: Transition area to the bog on the <a href="BorealLife.html" style="color: #FFF;">Boreal Life Trail</a> (2 August 2013)'],
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-7.jpg", "", "", 'Adirondack Wildflowers: Swamp Candles near Barnum Brook (2 August 2013)'],
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-8.jpg", "", "", 'Adirondack Wetlands: <a href="Labrador Tea -- Rhododendron groenlandicum.htm" style="color: #FFF;">Labrador Tea </a> on <a href="Adirondack-Wetlands.html#bog" style="color: #FFF;">Barnum Bog</a> (2 August 2013)']//<--no trailing comma after very last image element!
],

The links appear to work, at least in the browsers I have checked. Two problems:

-- When you click on a link in the photo captions, you are taken to the appropriate page. However, when you click on the back button, it takes you back to the first slide in the show, as opposed to the slide you were viewing at the time you clicked. Is there any remedy? In other words, is there a way to fix it so that a user clicking on a link in slide three will be taken back to slide three after viewing that link?

-- The code changes introduced the following, scary validation errors, most of which featured: "end tag for element "A" which is not open" See: http://validator.w3.org/check?uri=http%3A%2F%2Fadirondackvic.org%2FAdirondack-Nature-Walk-2-August-2013.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Can these problems be fixed? Let me know. ellen

[jscheuer1]

Problem one, set persist: true:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [540, 411], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://Adirondackvic.org/Images/Adirondack-Nature-Walk-2-August-2013-1.jpg", "", "", 'Adirondack Wildflowers: <a href="Pitcher Plant -- Sarracenia purpurea.htm" style="color: #FFF;">Pitcher Plant</a> on the <a href="BorealLife.html" style="color: #FFF;">Boreal Life Trail</a> (2 August 2013)'],
["http://Adirond . . .

. . . dack-Nature-Walk-2-August-2013-8.jpg", "", "", 'Adirondack Wetlands: <a href="Labrador Tea -- Rhododendron groenlandicum.htm" style="color: #FFF;">Labrador Tea </a> on <a href="Adirondack-Wetlands.html#bog" style="color: #FFF;">Barnum Bog</a> (2 August 2013)']//<--no trailing comma after very last image element!
],

titlesAndAlts: [
{title: "Adirondack Wildflowers: Pitcher Plant on Barnum Bog (2 August 2013)", alt: "Adirondack Wildflowers: Pitcher Plant on Barnum Bog (2 Augu . . .

. . . r Tea on Barnum Bog at the Paul Smiths VIC (2 August 2013)", alt: "Adirondack Wetlands: Labrador Tea on Barnum Bog at the Paul Smiths VIC (2 August 2013)"},
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: true, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler",
onslide: function(c, i){
var im = c.getElementsByTagName('img')[i], tas = this.setting.titlesAndAlts;
im.title = tas[i].title;
im.alt = tas[i].alt;
}
})



Problem two. First make a backup of the working page, just in case. There are various ways, but since you seem to imply that the page did validate before, with that DOCTYPE the easiest would be to make that code external. To do so, simply cut (as in cut an paste) the var mygallery=new fadeSlideShow( . . . code that is between the:


<script type="text/javascript">

and:


</script>

tags and using a text only editor like NotePad, paste the code you just cut and save it to a file, call it - say fadeslides.js, and put that file in the same folder as your page. Then make that the src attribute of the remaining now empty script tags. So now on the page in the head at the end of the head there where all of that was, make it (change highlighted):


. . . 2toggler .noscript {
display: inline;
}

</style>
</noscript>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript" src="fadeslises.js"></script>
</head>

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

[ellenjones6]

That worked! Thanks much!