6

I would like to add a caption outside the image tag in the jssor Plugin

<div>
  <img u="image" src="bilder/bild2.jpg" />
  <div class="caption" u="caption" ><p>Caption text</p></div>
</div>

So that the caption wouldn't overlay the image - but be placed under it. (How) is that possible?

Urs
  • 4,984
  • 7
  • 54
  • 116

1 Answers1

2

please use inline styles of 'position, top, left, width, height' for caption.

<div>
  <img u="image" src="bilder/bild2.jpg" />
  <div class="caption" style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;" u="caption" ><p>Caption text</p></div>
</div>
jssor
  • 6,995
  • 2
  • 18
  • 21
  • I don't know the height of the image, so I cant position the Text by pixels – Urs May 27 '14 at 05:51
  • Size of slide is fixed. see
    – jssor May 27 '14 at 07:59
  • So, you should check image size by javascript. – jssor May 27 '14 at 08:00
  • Or... would it be possible to "inject" the caption into another element on the page? I had a similar issue triggering the slider from outside, which could be solved nicely by calling `jssor_slider1.$PlayTo(n)`. Maybe there's something like `setCaption`? – Urs May 30 '14 at 18:05
  • You can alter everything in any slide at runtime. Also, you can place a child caption in a parent caption. see line 120 of 'demos-jquery\full-width-slider.source.html' – jssor May 31 '14 at 00:45
  • The thing is, I would like to place the caption *outside* the slider container, but have it change simultaneously. Is that possible somehow? – Urs May 31 '14 at 07:34
  • 2
    jssor slider doesn't manage any element outside slider container. You have to control it by yourself. please reference $EVT_PARK, $EVT_PROGRESS_CHANGE events. http://www.jssor.com/development/reference-api.html – jssor May 31 '14 at 08:02
  • Yes, looks promising! Thanks! – Urs May 31 '14 at 13:35
  • Fabulous! Works smoothly. But sorry, I have one more. Posted it as a new question under http://stackoverflow.com/questions/23971335/in-jssor-how-to-access-the-current-caption-via-javascript – Urs May 31 '14 at 14:44