滑块/文本组合插件

时间:2012-08-07 作者:ERM

我想我可能把自己画进了一个角落。我需要找到一个插件,如果这样的东西存在,那将是一个滑块/文本组合。

我的客户喜欢这一页上的图片向上滑动以显示一些文本的方式:http://p3mma.com/.这里的滑块看起来像是a。所有图像和b。只是某种javascript,而不是WordPress。

他希望,当图像上有鼠标时,图片中有关特殊事件的文本会出现在图像的位置。他没有制作新图像的资源,所以这是不可能的。他将能够处理上传图片和添加一些文本。

让事情复杂化的是,我提出的粗略方案中,图像/滚动区域的形状有点奇怪(右栏顶部的特色新闻区域):http://blackbeltleadershipacademy.com/idea1and3-updated.jpg. 如果我非常聪明,我可能会想出一些css来制作形状(或接近形状)。

那么,你知道我如何才能easily editable 是否使用文本和图像进行滚动?是的,我也是。

4 个回复
最合适的回答,由SO网友:Simon 整理而成

我不知道有什么插件,但你可以自己做。

结构:

每张幻灯片都是一篇文章

  • 要定位正确的帖子,您可以使用不同的技术,简单网就是使用一个类别,即:“滑块”
  • 如果要使用滑块,我建议使用类似以下内容:

    function display_sliders() {
    
        // get posts 
        $args = array (
            \'category_name\' => \'slider\',
            \'numberposts\' => 3, // adapt the number to your needs
        );
        // fectching data
        $posts_sliders = get_posts( $args );
    
        foreach ( $posts_sliders as $post_slider ) {
    
        // we will need a image associated to the post
        $args = array (
            \'numberposts\' => 1,
            \'post_parent\' => $post_slider->ID, //the way we have image child of the post
            \'post_type\'   => \'attachment\',
            \'post_mime_type\' => \'image\'
        );
    
        $image_slide = get_post ( $args );
    
        // change ouput according to the requisite of plugin
        echo \'<div class="slider-wrapper">\';
        echo \'<div class="slider-texte">\';
        echo \'<h2 class="slider-title">\' . $post_slider->post_title . \'</h2>\';
        echo \'<p class="slider-body">\' . $post_slider->post_content . \'</p>\';
        echo \'</div>\';
    
        // Second div for image
        echo \'<div class="slider-image">\';
        echo wp_get_attachment_image( $image_slide->ID, \'medium\'); // change size in media to fit the correct size
        echo \'</div>\'; 
        echo \'</div>\';
    
        }
    
    }
    
    之后,您需要找到一个jQuery插件来完成这项任务,将其包含到您的主题中,并可能调整输出细节,但这只是一小段代码,看看这个逻辑是否可以帮助您开始一些事情。

    我经常使用这种完全可定制的滑块,客户发现它很容易使用。

    SO网友:GhostToast

    这有点困难,但您应该能够使用一个好的基本插件和一些复杂的图像+CSS来完成这项工作。我首先推荐的是流星幻灯片。如果你看到developer\'s site 你会看到他有一个很好的例子,说明了如何添加标题或内容区域。好好读一读。您还可以在实际幻灯片中添加对所见即所得编辑器的支持,因为它只是一种自定义的帖子类型。以下是一些可以添加到函数中以实现此目的的示例代码:

    // Add editor to Meteor Slides
    add_post_type_support(\'slide\', \'editor\');
    
    然后给自己拿一份meteor-slideshow.phpmeteor-slides.css 从plugins文件夹中,将这些内容编辑到您的核心内容中(包括添加the_content() 在接近终点的某个地方.mslide div.然后编辑该CSS文件以允许文本室呼吸(高度和线条高度可能需要调整)。

    至于弯曲的空间,你可以使用一个绝对定位的图像(比如一个舞台)来掩盖这个空间,或者只是让每个图像都成为一个。png切割成类似该形状。

    我有一个很好的幻灯片示例,其中我使用Meteor幻灯片在幻灯片中显示内容。我会PM你的链接。

    SO网友:ERM

    最终找到了两个很好的解决方案。我使用了Smooth Slider插件,它与Events Manager日历系统很好地结合在一起。客户决定他们不想搭讪,所以我们切换到一个scrollarama插件,它可以链接到帖子。图片并不是百分之百的精彩,但客户端很容易更新。

    SO网友:carmat

    一个非常可定制的插件是WP Content Slideshow

    结束

    相关推荐

    resize images not crop

    正在寻找一种将上传的图像(wordpress上所有形式的图像上传)调整到精确尺寸的方法,但是not to crop. 我会悬赏回答这个问题,因为我相信这对很多人都有帮助。理想的解决方案必须是作为插件,并使用媒体设置页面(options-Media.php/Thumbnail,Medium和Large)上已经指定的图像尺寸我知道理想有时无法实现,所以最接近的答案将是公认的答案