2

I have been stuck trying to figure this problem out. Any suggestions/fixes will be much appreciated!

The source: my source

The problem: The captions are not displaying

The html (for the orbit slider slides):

<div><img class="art-work" src="art/2.png" alt="" data-caption="#htmlCaption1" /></div>
<div><img class="art-work" src="art/3.png" alt="" data-caption="#htmlCaption2" /></div>
<div><img class="art-work" src="art/4.png" alt="" data-caption="#htmlCaption3" /></div>

....and so on

The html (for the orbit slider captions):

<span class="orbit-caption" id="htmlCaption1">Art #1</span>
<span class="orbit-caption" id="htmlCaption2">Art #2</span>
<span class="orbit-caption" id="htmlCaption3">Art #3</span>

...and so on

The js in html:

<script type="text/javascript">
   $(window).load(function() {
        $('#featured').orbit({
            bullets: true,
            timer: false,
            captions: true,
            animation: 'fade' 
        });
   });
</script>
Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
Ryan
  • 71
  • 2
  • 3

1 Answers1

3

It is because you have the 'data-caption' attribute in the 'img' tag rather than the 'div' that wraps it. Change it to the following and it should work

<div data-caption="#htmlCaption1"><img class="art-work" src="art/2.png" alt="" /></div>
r8n5n
  • 2,059
  • 17
  • 23