Geek asks and answers

Extended captions with bxslider

This question has already been asked, but there is no answer - I think because there is not enough information.

I am using bxslider as my template. Take a look here: http://bxslider.com/examples/image-slideshow-captions

I can create a very simple title using the "title" attribute, but I want to be able to create subtitles (with different attributes such as smaller text), and I want to turn this into a link. I tried implementing a div inside a container, and it is probably obvious that I cannot synchronize it with the slider without implementing it with jquery. I also tried editing CSS to no avail.

How to add a title that is more than just an image title? How is a div overlapping an image?

+3
source share
2 answers

You don't even need to use the caption option provided by bxslider. Add captions as part of the li tag that forms the slide. What signatures are: a true option, one way or another, adds a div with the bx-caption class to your slide.

For instance,

  <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>

Thus, using css, you can play with font sizes.

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

+12
source

I think I solved your problem, but I can’t check it, because your violin does not work when you created it.

Change the code Appends image captions to the DOMas follows:

    /**
     * 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 subtitle names:

<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 create subtitles the way you want using the CSS class nc_subtitle.

Hope this helps!

EDIT

JavaScript, , :

http://pastebin.com/0fvUezg1

HTML :

http://pastebin.com/T038drDV

.

+1

More articles:


All Articles