Slider/text combination plugin

Question

I think I may have painted myself into a corner. I need to find a plugin, if such a thing exists, that will be a slider/text combo.

My client loves the way the pics on this page slide up to show some text:http://p3mma.com/. The sliders here look like they are a. all images and b. just some sort of javascript and not in WordPress.

He would like, when there is a mouseover the image, text about the special event in the picture appear in place of the image. He does not have resources to make new images, so that is out. He will be able to handle uploading a pic and adding some text.

To complicate matters, the rough I came up with had the image/rollover area with a kind of odd shape (Featured News Area on the top of the right column): http://blackbeltleadershipacademy.com/idea1and3-updated.jpg. I may, if I'm terribly clever, be able to figure out some css to do the shape (or close to it).

So, any ideas how I can this area an easily editable rollover with text and images? Yeah, me neither.

Answer 1

I don't know of a plugin, but you could do it yourself.

Structure :

• Each slide is a post.
• Each post contains text and one image (uploaded throught media uploader)
• To target the proper post, you could use differents techniques, the simpleiet is to use a category i.e. : "slider".

Where you want to use the slider, I propose to use something like :

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

    }

}

After that, you will need to find a jQuery plugin to does the trick, include it into your theme, and maybe adapt the output details, but this is a short bit of code to see if this logic could help you to start something.

I use this kind of fully customisable slider a lot and clients find is pretty easy to use.

Answer 2

This is kind of a tough one, but you should be able to do this using a good base plugin and some tricky imagery + CSS. First I recommend is Meteor Slides. If you look on the developer's site you'll see he has a good example of how to add a caption or content area. Give that a good read. You can also add support for the WYSIWYG editor to the actual slide, as it is just a Custom Post Type. Here is some example code you can add to functions to achieve this:

// Add editor to Meteor Slides
add_post_type_support('slide', 'editor');

Then just grab yourself a copy of the meteor-slideshow.php and meteor-slides.css from the plugins folder, edit those to your heart's content (including adding the_content() somewhere near the end of the .mslide div. Then edit that CSS file to allow the text room to breath (height and line-height might need tweaked).

As for the curved space, you could use an absolutely positioned image (like a stage) to mask out the space, or just make each image a .png cut to resemble that shape.

I have a fair working example of a slideshow where I have content inside the slideshow using Meteor Slides. I will PM you that link.

Answer 3

Found two good solutions for this in the end. I used the Smooth Slider plugin which tied in nicely with the Events Manager calendar system. Client decided they didn't want a tie-in so we switched to a scrollarama plugin which links to a post. Pics aren't 100% wonderful but it is very easy for the client to update.

Answer 4

One plugin that is very customisable would be WP Content Slideshow