Adding Captions to Sorgalla jCarousel

I recently was tasked to write up a custom homepage carousel for ‘featured’ content on one of the leading gaming sites on the internet. I am not the kind of person who is going to reinvent the wheel and immediately went hunting for a slider that had the base features I needed. There are literally hundreds upon hundreds of sliders but I ended up settling on Sorgalla as the base for my carousel.

Visually JCarousel by Sorgalla is a very slick jquery carousel and the developer did a fantastic job programming it. The only downfall for me was that it was designed to be images only, without links and without captions. The site I am working on is hosted with wordpress and I wanted to use it for a featured slider which includes headers / captions, etc so I had to do some modifications which I am going to share.

Your Sorgalla carousel by default will look like this;

<div class="jcarousel">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
</ul>
</div>

The above demo code looks like so using the base CSS;

sorgalla jcarousel default

To setup Jcraousel captions in my case I pulled data from WordPress and stored it in the ALT and title field for each image.  So my version of the Sorgalla Carousel code looks like so;

<div class="jcarousel">
<ul>
<li><img alt="caption" title="article-title" src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<div class="image-caption"></div>

Simple right? Using the Sorgalla Jcarousel api I wait for the next ‘targetedin’ image to load and when it does I grab meta data from the image, namely the title and ALT and I then write that data to a DIV called ‘image-caption’.

  $('.jcarousel').on('jcarousel:targetin', 'li', function(event, carousel)
                {
                    var comment = $(this).find('img').attr('alt');
                    var title = $(this).find('img').attr('title');
                    if(comment) $('.image-caption').html('<strong>'+title+'</strong> '+comment);
                });

The final results look like the screenshot below. In my example I also added links using the same method above. Hopefully you find this helpful and will save you pulling your hair out.

sorgalla jcarousel with captions

Advertisements

One Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s