CODEWITHSUNDEEP
javascriptjquerysliderresponsive-design
Benjamin Morrison
Benjamin Morrison

Reputation: 791

Orbit Slider: Captions Not Displaying

I am trying to implement the Foundation 3 slideshow Orbit into my Foundation mobile responsive design. When I try to place captions on the slides, none show but the caption bar does. This is based on the included homepage template, so the CSS for the slider components has not been altered from what was provided, but an override CSS file was included but shouldn't effect anything. (style.css) I have tried two methods, neither works. You can see the issue here. Thanks for any help you can give me, I'm new to responsive design.

      <div id="slider">

<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>

    </div>

I have also tried:

      <div id="slider">

<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>

    </div>

My initiation JS:

  <script type="text/javascript">
   $(window).load(function() {
       $('#slider').orbit({
             bullets: false,
             timer: true,
             captions: true,
             animation: 'fade' });
   });
</script>

Upvotes: 3

Views: 2187

Answers (2)

Alvin Siu
Alvin Siu

Reputation: 75

I just encountered this issue as well. I managed to fix this issue by moving line 394 before line 391 in "jquery.foundation.orbit.js". The issue is that the current version orbit removes the # from the value of data-caption before it parses the text in the .orbit-caption span.

So I don't see anything wrong with your code examples. You just have to fix "jquery.foundation.orbit.js" yourself, or wait for the next release that fixes it.

Current Version:

390. // if location selector starts with '#', remove it so we don't see id="#selector"
391. if (captionLocation.charAt(0) == '#') {
392.     captionLocation = captionLocation.substring(1, captionLocation.length);
393. }
394. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity

Fixed Version:

390. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
391. // if location selector starts with '#', remove it so we don't see id="#selector"
392. if (captionLocation.charAt(0) == '#') {
393.     captionLocation = captionLocation.substring(1, captionLocation.length);
394. }

If you're using "foundation.min.js," you'll want to edit line 46. Look for this:

t.charAt(0)=="#"&&(t=t.substring(1,t.length)),n=e(t).html()

and just reverse the two parts to look like this:

n=e(t).html(),t.charAt(0)=="#"&&(t=t.substring(1,t.length))

I haven't tested to see if this breaks anything else, but it does fix the caption issue that you encountered.

Upvotes: 6

Fabio
Fabio

Reputation: 2104

The framework obviously has predefined classes and ids so you have to use that, if you use others that aren't defined, it will not work. Your code is almost ok, but wherever you used "slide1", "slide2", "slide3" you should use "#captionOne", "#captionTwo", "#captionThree".

From the website: http://foundation.zurb.com/docs/orbit.php

Adding Captions

Another awesome feature in Orbit is the ability to add captions for each slide. The process is simple, just add data-caption="#captionId" to the content div or img. Then, below your div id="featured", add span class="orbit-caption" id="captionId" that will hold your caption content. You can add as many as slides you have available, just make sure the data-caption and the id of the span are the same and that you add # to the data-caption like in the code below.

<div id="featuredContent">
<div data-caption="#captionOne">
<h4>This is a content slider.</h4>
<p>Each slide holds arbitrary content, like text or actions.</p>
</div>
<div data-caption="#captionTwo">
<h4>We can include text and buttons, like this!</h4>
<p>We take no responsibility for what happens if you click this button.</p>
<p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button"   target="_blank">Rock My World!</a></p>
</div>
<div data-caption="#captionThree">
<h4>What? You did not click it?</h4>
<p>We gave you the benefit of the doubt. Maybe you did, and now you are back!</p>
</div>
</div>

<span class="orbit-caption" id="captionOne">Here is a caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>

If you follow what i wrote it should work. Hope it helps.

Upvotes: 0

Related Questions