如何从滑块“平滑 div 滚动”上的帖子加载图像

Question

我想使用“Smooth Div Scroll”滑块Slider Website

在我的自定义 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，但仍然没有:(

Answer 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');

同样基于smooth div scroll site，说明图片应该以这种方式列出

    <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 答案更新：

第 9 行应该 /css 而不是 /js，除非你将 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');