Question

我正在使用 jquery bookshelf Slider 创建书架。它的工作性很好，但我需要对自己的书进行一些修改。

我们的图书自我演示链接 Book shelf demo

我们的修改如下：

默认加载时间标题和图标是隐藏的。
如果我们需要点击标题或图标。显示标题或图标。

我们的脚本如下：

<script type="text/javascript">



jQuery(document).ready(function() {



    //define custom parameters

    $.bookshelfSlider('#bookshelf_slider', {

        'item_width': '100%', //responsive design > resize window to see working

        'item_height': 320,

        'products_box_margin_left': 30,

        'product_title_textcolor': '#ffffff',

        'product_title_bgcolor': '#c33b4e',

        'product_margin': 20,

        'product_show_title': true,

        'show_title_in_popup': true,

        'show_selected_title': true,

        'show_icons': true,

        'buttons_margin': 15,

        'buttons_align': 'center', // left, center, right

        'slide_duration': 800,

        'slide_easing': 'easeOutQuart',

        'arrow_duration': 800,

        'arrow_easing': 'easeInOutQuart',

        'video_width_height': [500,290],

        'iframe_width_height': [500,330]

        }

    );



});//ready



</script>

我们已尝试将'product_show_title': true,更改为

'product_show_title': false,

但它不适合我。所以请指教..

Answer 1

在插件初始化后正确设置标题和图标的不透明度。

    //define custom parameters
    $.bookshelfSlider('#bookshelf_slider', {
        'item_width': 605,
        'item_height': 720,
        'products_box_margin_left': 30,
        'product_title_textcolor': '#ffffff',
        'product_title_bgcolor': '#c33b4e',
        'product_margin': 30,
        'product_show_title': true,
        'show_title_in_popup': true,
        'show_selected_title': true,
        'show_icons': true,
        'buttons_margin': 15,
        'buttons_align': 'center', // left, center, right
        'slide_duration': 800,
        'slide_easing': 'easeInOutExpo',
        'arrow_duration': 800,
        'arrow_easing': 'easeInOutExpo',
        'video_width_height': [600,600],
        'iframe_width_height': [600,600]
        }
    );

$(".show_hide_titles, .show_hide_icons").css('opacity','0.5');
$(".product_title, .icons_sprite").css('opacity','0');

<强> DEMO

jquery书架滑块修改

1 个答案: