Advanced Captions with bxslider

Question

This question has already been asked, but has no answer - I believe because not enough information was provided.

I am using the bxslider as my template. See here: http://bxslider.com/examples/image-slideshow-captions

I can create a very simply caption using the "title" attribute, but I want to be able to create subtitles (with different attributes like smaller text) and I want to turn this into a link. I've tried implementing a div within the container, and perhaps obviously, I can't get that to sync with the slider without implementing it with jquery. I've also tried editing the CSS to no avail.

How can I add a caption that more than just an image title? Like a div overlaying the picture?

Solution 1

You don't even need to use the captions option provided by bxslider. Add the captions as part of the li tag that forms your slide. That's what the captions:true option does anyways, i.e appends the div with bx-caption class to your slide.

For eg:

  <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="caption1"> 
        <span>Image 1</span>
        <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
      </div>
 </li>

This way using css, you can play around with the font sizes too.

Here's the the fiddle http://jsfiddle.net/s2L9P/

Solution 2

I think I solved your problem, but I can't test it because your fiddle doesn't work as you created it.

Change the code from Appends image captions to the DOM with this:

    /**
     * Appends image captions to the DOM
     * NETCreator enhancement (http://www.netcreator.ro)
     */
    var appendCaptions = function(){
        // cycle through each child
        slider.children.each(function(index){
            // get the image title attribute
            var title = $(this).find('img:first').attr('title');
            var nc_subtitle = $(this).find('img:first').attr('nc-subtitle');
            // append the caption
            if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) {
                $(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>');
            }
        });
    }

Now you can add subtitles to your caption titles:

<a href ="page.php">
    <img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/>
</a>

You can style the subtitle as you want to, using the CSS class nc_subtitle.

Hope it helps!

EDIT

Change the entire JavaScript shared by you in fiddle with this:

http://pastebin.com/0fvUezg1

And the HTML with this:

http://pastebin.com/T038drDV

It works.

Comments

[RandomPleb]

Hmm. It's not working. Your new addition really helps me understand how this works though.

[RandomPleb]

Brilliant! It works. Now I can really customize this. Thank you for the explanation as well.

[VJS]

@RandomPleb, happy to help :)

[Ben Sewards]

you can also remove the captions option in the api call

[h2ooooooo]

With the newer versions of bxslider you'll need a span element inside of a .bx-caption div: <li><img src="/img.png" /><div class="bx-caption"><span>My caption</span></div></li>