Can't get captions working

sunstarerone's Avatar

sunstarerone

17 Nov, 2016 10:10 PM

Following the two examples in the documentation I still cannot get captions to show. I've built up a custom.js file with the entire set to rule that out and have added globalCaption: true, to the slider set up but still no go. The only change I made to the layout is adding 12px margin to rsThumbsContainer CSS to give it a little more space, nothing else. The page in question is here:

http://theundermazeproject.com/timeline.html

The first image uses the alt tag method and the second uses
"<figure class="rsCaption">This caption <b>HTML</b> text will be used.</figure>" method.

I've moved all the .js files to the root directory to eliminate problems similar to what I had in the past with Dreamweaver so I don't think that's the culprit this time. Everything else works fine.

  1. Support Staff 1 Posted by Dmitry Semenov on 18 Nov, 2016 07:20 AM

    Dmitry Semenov's Avatar

    Hello,

    Your caption is present in DOM, just hidden behind the thumbs navigation, try adding globalCaptionInside: true to slider init options.

  2. 2 Posted by sunstarerone on 18 Nov, 2016 05:25 PM

    sunstarerone's Avatar

    I did that and the images no longer are contained in the slider window. The alt tag method still does not work so I stripped it out of the first image. The rsCaption method does work now, despite the images popping out of the slider and filling up the screen.

    If it helps in troubleshooting, I found that by imitating another of your examples used in the visible nearby gallery, putting captions in a <span> tag inside each slide div works with one small spacing issue that I suspect is related to the number of images preloaded, yet to test that theory.

    I'd much prefer to use the alt tag as it's the simplest and easiest method.

  3. 3 Posted by sunstarerone on 18 Nov, 2016 07:20 PM

    sunstarerone's Avatar

    I've had to move the problem files into a new directory which can be accessed here:

    http://theundermazeproject.com/old/

  4. Support Staff 4 Posted by Dmitry Semenov on 18 Nov, 2016 07:36 PM

    Dmitry Semenov's Avatar
    1. On page that you linked images do not have alt tags, any markup at http://dimsemenov.com/plugins/royal-slider/documentation/#global-ca... is valid.
    2. Use such init code:
    $('#content-slider-1').royalSlider({
        autoHeight: true,
        arrowsNav: true,
        fadeinLoadedSlide: true,
        controlNavigationSpacing: 0,
        controlNavigation: 'thumbnails',
        imageScaleMode: 'none',
        imageAlignCenter:false,
        loop: false,
        loopRewind: true,
        numImagesToPreload: 6,
        keyboardNavEnabled: true,
        usePreloader: false,
        globalCaption: true,
        globalCaptionInside: true,
        thumbs: {
                // thumbnails options go here
                spacing: 10,
                arrowsAutoHide: false
            }
        
      });
    
  5. 5 Posted by sunstarerone on 18 Nov, 2016 08:18 PM

    sunstarerone's Avatar

    Thanks very much Dmitry, that worked, got the captions showing inside the image using the alt tag and it looks nice.

    I wonder if there's any way to hide the dark underscore that appears in the first space of the caption area on images that do not have captions while using "globalCaptionInside: true,"? Not a big deal but it'd be nicer to not see it for non-captioned images. There are no examples on the site, let me know if you need to see what I'm talking about.

  6. Support Staff 6 Posted by Dmitry Semenov on 19 Nov, 2016 01:26 PM

    Dmitry Semenov's Avatar

    Styling of caption is applied for selected skin CSS file, the bars that you see is just a padding/border that can be removed via CSS.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac