I am using the jquery plugin flexslider to display some images and captions. I am using the code below to take captions out of the flexslider content and place into an outside element.
The captions are styled using spans but when they are placed into the new element called ".captions" they are not styled and all text is running together.
How can I apply styling and formatting to the text in the ".captions" div?
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$captions = $('.captions');
$('.flexslider').flexslider({
animation: "fade",
controlNav: "thumbnails",
directionNav: true,
slideshow: false,
useCSS: true,
touch: true,
start: function() {
$activecaption = $('.flex-active-slide .flex-caption');
$captions.html($activecaption.text());
},
after: function() {
$activecaption = $('.flex-active-slide .flex-caption');
$captions.html($activecaption.text());
}
});
});
</script>
For example I am echoing out this:
echo "<span class='artwork-title'>$page->title</span>,<span class='artwork-year'> $artwork->date</span><span class='artwork-year'>$artwork->dimensions</span>";
and my jquery seems to be getting rid of the span tags.