[Gelöst] Slider with lightbox inside single post.

[Author]

Artikel

[Akhil]

HI Nigel , pls take you time , thanks .

[Nigel]

I added links to the code where I inserted the slider in a Content Template like so:

<div class="flexslider">
  <ul class="slides">
    [wpv-for-each field="wpcf-slides"]
    <li>
      <a href="[types field='slides' size='large' url='true' resize='proportional' separator=', '][/types]">
        <img src="[wpv-post-field name='wpcf-slides']" />
      </a>
    </li>
	[/wpv-for-each]
  </ul>
</div>

It worked fine, inasmuch as it linked to a page displaying the full sized image.

The flexslider doesn't include a lightbox feature, and if you want one (i.e. where clicking the image opens it in a modal) then you'd need to either craft that yourself using Bootstrap modals, for example, or using a lightbox JS library.

Or you could try a different slider library than flexslider. I've used flexslider by way of illustration, but you can use other slider JS libraries, the principles are the same, you would just need to enqueue the appropriate files and make sure the markup around the images was as required.

[Akhil]

HI Nigel ,

Thanks for looking into this. i was asking about the caption and title part , how to include them .
Ive done the code for slider with lightbox and thumbnail carousel. its working well.

the challenge is now the caption/title inclusion .

thanks!

[Nigel]

Sorry, that wasn't clear.

Does your lightbox implementation require adding the title and alt parameters to the link tag (not valid HTML) rather than the image tag (valid HTML)? Can it not read them directly from the image tags?

In my example I had been using the wpv-post-field shortcode to insert the image, but if you use the types shortcode then it will automatically insert the alt and title parameters.

If you need to have those parameters on the link tag you could either add some JS to the front-end which copies them across from the img tag, or you could write a custom shortcode to output them in the template where you add the link tag.

But I would inserting the image with the types shortcode like so, so that the image itself includes the alt and title tags:

    [wpv-for-each field="wpcf-slides"]
    <li>
      <a href="[types field='slides' size='large' url='true' resize='proportional' separator=', '][/types]">
        [types field='slides' alt='%%ALT%%' title='%%TITLE%%' size='large' align='none' resize='proportional' separator=', '][/types]
[wpv-post-field name="wpcf-slides"]
      </a>
    </li>
	[/wpv-for-each]

I'll go back and update my example to use this method, I don't recall now why I initially used the wpv-post-field.

[Akhil]

Hi Nigel.

Apologies for delay as im stuck in some issue here. will follow up soon. thanks!

[Nigel]

No problem, let me know how you get on when you have time to give it a try.