用“jquery.cycle.all.js”创建特殊的WordPress幻灯片

时间:2014-08-05 作者:Hadi Omary

我想创建自己的幻灯片而不使用任何滑块插件Shear是我的代码

--在页脚中---

<script type="text/javascript"  src="<?php bloginfo( \'template_url\' );?>/js/jquery.cycle.all.js"></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(\'#slideshow\').cycle({
    fx: \'scrollLeft\',
    timeout: 3000,
    pager: \'#navSlider\',
    slideExpr: \'#mySlide\'
});
</script>
在我的头版。php

<div class="slideContent">
    <div id="navSlider"></div>
    <div id="slideshow" class="pics" style="position: relative; overflow: hidden;">
        <div id="mySlide">
            <div id="textBack"></div>
            <div id="textSlide">the title 1</div>
            <img src="<?php bloginfo( \'template_url\' );?>/slideimage/myimage1.jpg">
        </div>
        <div id="mySlide">
            <div id="textBack"></div>
            <div id="textSlide">the title 2</div>
            <img src="<?php bloginfo( \'template_url\' );?>/slideimage/myimage2.jpg">
        </div>
    </div>
</div>
--在css文件中----

#slideshow {
    width: 232px;
    height: 232px;
}
#navSlider {
    z-index: 50;
    position:absolute;
    width:19px;
    top:0;
    right:-5px;
}
#navSlider a {
    display:block;
    height:31px;
    margin: 0 0px;
    padding: 3px 6px;
    border: 1px solid #ccc;
    background: #cff;
    text-decoration: none
}
#navSlider a.activeSlide {
    background: #aaf;
    padding:9px 0 0 0;
    text-align:center;
}
#navSlider a:focus {
    outline: none;
}
#textBack {
    background-color:#000;
    /*color:#FFF;*/
    opacity: 0.4;
    height:30px;
    position:absolute;
    right:0;
    bottom:0;
    width:232px;
    /*text-align:center;*/
}
#textSlide {
    color:#fff;
    height:26px;
    position:absolute;
    bottom:0;
    right:10px;
    font-size:18px;
    /* margin:auto;*/
    /* width:232px;*/
    /* text-align:center;*/
}
.pics {
    height: 232px;
    width: 232px;
    padding: 0;
    margin: 0;
}
.pics img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0
}
.slideContent {
    margin: 30px auto;
    width: 244px;
    height: 234px;
    position:relative;
    top: 0;
    left: 0;
    background-color:#069;
}
我创建了这个,实际上它单独工作非常好,但我不知道为什么它在wordpress中不工作,如果有其他滑块,有什么关系吗?请帮忙

2 个回复
最合适的回答,由SO网友:Nicolai Grossherr 整理而成

not 使用外部jQuery库,使用WordPress附带的库。

使用wp_enqueue_script 要将脚本排队,请执行以下操作:

wp_enqueue_script( \'jquery\' );
另外,请注意WordPress将内部jQuery设置为noConflict() 模式,更多信息here.

SO网友:stiil

id="mySlide"在标记中使用了两次。只需尝试删除slideExpr: \'#mySlide\' 从插件选项。

尝试使用bloginfo(\'stylesheet_directory\').

结束

相关推荐

如何防止插件加载jQuery

我最近从wordpress下载了一个免费插件。我想从加载jQuery中删除插件,因为专家们知道它已经从wordpress头加载了。php文件。插件是testimonial-slider 如何编辑插件以防止其加载jQuery?我尝试了其他的方法,比如加入scrips,但没有成功。现在我正计划编辑这个插件,有人能指导我吗?谢谢