item-caption DIV does not accept links

[axrand]

I'm trying to add links to image caption (while in lightbox):

if I do like this: <div class="item-caption" style="display: none">{{ site.title }}</div> It works, but of course, no link, just title.

If I try

<div class="item-caption" style="display: none">
<koken:tags>
	<koken:loop separator=" ">
	<koken:link title="All {{ labels.content.plural case='lower' }} in #{{ tag.title }}">#{{ tag.title }}
	</koken:link>
	</koken:loop>
</koken:tags>
</div>

then "item-caption" div is ignored and is not showing at all

[DanielMuller]

The captions are taken from a sibling of the img tag: pswp.js#16

So I guess, you added your caption div inside the image link, similar to this?

<koken:link>
  <koken:img />
  <div class="item-caption" style="display: none">
    <koken:tags>
      <koken:loop separator=" ">
	<koken:link title="All {{ labels.content.plural case='lower' }} in #{{ tag.title }}">#{{ tag.title }</koken:link>
      </koken:loop>
    </koken:tags>
  </div>
</koken:link>

In this case you have a link inside a link, which is not possible. The resulting HTML will have the caption div outside the image link (not sure if it is the browser or Koken doing this, but doesn't really matter). Since your caption is no more a sibling of the img tag, no caption is found while parsing the DOM.

You have 2 choices to solve this: 1/ Have the caption outside the image-link and make some changes to pswp.js to get the right DOM element. 2/ Don't use links, but redirect with javascript, something like:

<span onClick="javascript:window.localtion.href='/tags/{{ tag.title }}';return false;">#{{ tag.title }}</span>

I don't have the time to work on 1, but I am happy to merge a pull request.

[axrand]

Thank you, our suggestion (1/) worked!

I only changed: item['caption'] = $(this).nextAll('.item-caption:first').html(); to item["caption"]=$(this).parent().siblings(".item-caption:first").html(); and put "item-caption" div just after (and outside) <koken:link> element also <koken:link> now have to be enclosed in another element, but with Axis theme it was already inside <li> element so no additional elements were needed