Advanced Search

Results 1 to 3 of 3

Thread: Ultimate Fade-in slideshow -- Links in Captions

  1. #1
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Question Ultimate Fade-in slideshow -- Links in Captions

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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-...gust-2013.html

    Here is the resulting code:
    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=ht...Inline&group=0

    Can these problems be fixed? Let me know. ellen

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Problem one, set persist: true:

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

    HTML Code:
    <script type="text/javascript">
    and:

    HTML Code:
    </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):

    Code:
     . . . 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.
    Last edited by jscheuer1; 08-14-2013 at 01:29 PM. Reason: Format
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ellenjones6 (08-13-2013)

  4. #3
    Join Date
    Jul 2012
    Posts
    31
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Default

    That worked! Thanks much!

Similar Threads

  1. Ultimate Fade-in Slideshow -- Font size of captions and centering
    By ellenjones6 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 09-02-2012, 08:03 AM
  2. Using Pagination Links with Ultimate Fade-in slideshow (v2.4)
    By angeleyes1980 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-06-2012, 03:30 PM
  3. Ultimate Fade-in Slideshow 1.51 --- Links not working in IE
    By LaCrosse in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-08-2009, 01:11 PM
  4. Ultimate Fade-in slideshow (v1.51) rollover links
    By wbowman in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-22-2009, 05:23 PM
  5. add captions on mouseover to ultimate fade-in slideshow
    By Showdown in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-31-2009, 02:06 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •