0

我想使用“Smooth Div Scroll”滑块滑块网站

在我的自定义 Wordpress 主题中，我已经有一个滑块，但我的问题是我不需要像我在堆栈溢出的其他帖子中发现的那样只加载图像，而是必须从一个类别中加载图像wordpress 中的帖子。

这是我的网站Diario Metropolis

我怎样才能做到这一点？我目前正在使用“简单滑块”，其参数存储在 .php 文件中。

这是在我的实际滑块上加载内容的代码（简单滑块）

在 index.php 上

<?php include (TEMPLATEPATH . '/slide.php'); ?>

在 Slide.php 上

<?php $slide = get_option('repo_slide_cat'); `$count = get_option('repo_slide_count');
$slide_query = new WP_Query( 'category_name='.$slide.'&posts_per_page='.$count.'' );
while ( $slide_query->have_posts() ) : $slide_query->the_post();
?>

还有经典的 timthumb 脚本

<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>"><img class="slidimg" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&amp;h=350&amp;w=655&amp;zc=1" alt=""/></a> <?php } else { ?>
<a href="<?php the_permalink() ?>"><img class="slidimg" src="<?php bloginfo('template_directory'); ?>/images/dummy.png" alt="" /></a>

我如何调整 smoothdivscroll 滑块来完成此行为？正如我之前所说，我不需要从指定文件夹加载图像，我需要从我网站中的帖子动态加载图像。

任何帮助都会有很大帮助，在此先感谢。

Robert Lee 我的 wp-enqueue-script 代码如下：

<?php wp_enqueue_script('jquery'); 
wp_enqueue_script('superfish', get_stylesheet_directory_uri() .'/js/superfish.js');
wp_enqueue_script('jqui', get_stylesheet_directory_uri() .'/js/jquery-ui-1.8.23.custom.min');
wp_enqueue_script('slides', get_stylesheet_directory_uri() .'/js/jquery.smoothdivscroll-1.3.js'); 
wp_enqueue_script('slides', get_stylesheet_directory_uri() .'/js/jquery.kinetic'); 
wp_enqueue_script('slides', get_stylesheet_directory_uri() .'/js/jquery.mousewheel.min'); 
wp_enqueue_script('effects', get_stylesheet_directory_uri() .'/js/effects.js');
wp_enqueue_script('liscroll', get_stylesheet_directory_uri() .'/js/liscroll.js');
?>

我修改了你告诉我的 effects.js，但仍然没有:(

4

1 回答 1

1

尝试这个。

下载 Smooth Div Scroll 并将其添加到您的主题 JS

在主题的 Functions.php 中，将 js/slides.min.jquery.js 的入队脚本替换为您下载的 Smooth Div Scroll JS。

从那时起，您需要编辑 wp-content/themes/Metropolis_/js/effects.js

代替

jQuery('#slides').slides({

            play: 5000,
            crossfade: true,
            pause: 2500,
            hoverPause: true,
            animationStart: function(current){
                jQuery('.caption').animate({
                    bottom:-35
                },100);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationStart on slide: ', current);
                };
            },
            animationComplete: function(current){
                jQuery('.caption').animate({
                    bottom:0
                },200);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationComplete on slide: ', current);
                };
            },
            slidesLoaded: function() {
                jQuery('.caption').animate({
                    bottom:0
                },200);
            }
        });

有了这个

$("#slides").smoothDivScroll({
        mousewheelScrolling: "allDirections",
        manualContinuousScrolling: true,
        autoScrollingMode: "onStart"
    });

更新：

您需要将所有图像、JS 和 CSS 上传到您的主题文件夹。

再次更新我的答案：

在您的 functions.php 中，您拥有或在任何地方将您的脚本排入队列

wp_enqueue_style('smoothdivcss', get_stylesheet_directory_uri() .'/css/smoothDivScroll.css');
wp_enqueue_script('jquery'); 
wp_enqueue_script('superfish', get_stylesheet_directory_uri() .'/js/superfish.js');
wp_enqueue_script('jqui', get_stylesheet_directory_uri() .'/js/jquery-ui-1.8.23.custom.min.js');
wp_enqueue_script('smoothdivscroll', get_stylesheet_directory_uri() .'/js/jquery.smoothdivscroll-1.3.js'); 
wp_enqueue_script('kinetic', get_stylesheet_directory_uri() .'/js/jquery.kinetic.js'); 
wp_enqueue_script('mousewheel', get_stylesheet_directory_uri() .'/js/jquery.mousewheel.min.js'); 
wp_enqueue_script('effects', get_stylesheet_directory_uri() .'/js/effects.js');
wp_enqueue_script('liscroll', get_stylesheet_directory_uri() .'/js/liscroll.js');

同样基于平滑的div滚动站点，它表明应该以这种方式列出图像

    <div id="slides">
        <img src="images/demo/field.jpg" alt="Field" id="field" />
        <img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
        <img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
</div>

根据您的 Pastbin 答案更新：

除非您将 css 放在 js 文件夹中，否则第 9 行应该 /css 而不是 /js。

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/smoothDivScroll.css" media="screen" />

删除第 19 行

wp_enqueue_script('style', get_stylesheet_directory_uri() .'css/smoothDivScroll.css');

第 20、21 行您缺少 .js 扩展名

wp_enqueue_script('kinetic', get_stylesheet_directory_uri() .'/js/jquery.kinetic');
wp_enqueue_script('mousewheel', get_stylesheet_directory_uri() .'/js/jquery.mousewheel.min');
于 2013-04-02T02:59:28.533 回答