doushang3352 2013-03-18 18:05
浏览 32
已采纳

too long

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.

  • 写回答

2条回答 默认 最新

  • douqi1931 2013-03-18 18:56
    关注

    After rereading the question, it seems like you need the active caption in the .captions element. All you have to do is switch .text() to .html() and all of the elements should come with it.

    $(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.html());        
            },
            after: function() {
                $activecaption = $('.flex-active-slide .flex-caption');
                $captions.html($activecaption.html());
            }
        }); 
    });
    

    Reference: http://www.woothemes.com/flexslider/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题