Question

I’m pretty new to wordpress, html, css, and javascript and would love your help if possible:

I’m trying to create a dual slider for the featured content area of my blog where there will be three featured youtube videos on the left slider, and the post excerpt on the right slider. Here’s how I picture it.

I think i’m doing this inefficiently at the moment; using dualslider

Right now I have three divs on the right panel, one for each post where the_excerpt() is being output in each div:

<div class="detail" >
      <?php $args=array('tag' => 'Featured1', 'showposts'=>1, 'caller_get_posts'=>1);
               $my_query = new WP_Query($args);
                      if( $my_query->have_posts() ) 
                {
                      while ($my_query->have_posts()) : $my_query->the_post(); ?>
                      <p><a href="<?php the_permalink() ?>" <?php the_title(); ?></a></p>
                      <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>

                      <h3><?php the_excerpt(); ?></h3>
                        <?php endwhile;
                }
                      wp_reset_query(); ?>
</div><!--END detail1-->

And three divs on the left, one for each video where the_content is being output to each div:

<div class="detail" >
      <?php $args=array('tag' => 'Featured1', 'showposts'=>1, 'caller_get_posts'=>1);
               $my_query = new WP_Query($args);
                      if( $my_query->have_posts() ) 
                {
                      while ($my_query->have_posts()) : $my_query->the_post(); ?>
                      <p><a href="<?php the_permalink() ?>" <?php the_title(); ?></a></p>
                      <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>

                      <h3><?php the_content(); ?></h3>
                        <?php endwhile;
                }
                      wp_reset_query(); ?>
</div><!--END detail1-->

The three posts that I want featured are each tagged Featured1, Featured2, and Featured3, and the post content is just the iframe youtube embed code followed by whatever I want to be in the right content panel.

Finally, aside from it being difficult to format the carousel size of the videos given i don’t really understand the dualslider javascript file, my other problem is that I need the currently playing video to be paused when you move from slide to slide similar to the functionality provided in AnythingSlider (http://css-tricks.com/examples/AnythingSlider/#panel1-4).

Any help would be much appreciated. Thanks!

Answer 1

Try this…

https://gist.github.com/1848388

I’ve added the query and loops php into the index.html demo file.

This is the demo pack I downloaded… Dual Slider Demo File

I have not tested it so it may not work ha, and I’ve adjust your query to retrieve the latest 3 posts with the tag ‘Featured’.

Also instead of using <?php the_content(); ?> for the image or video, why not use a custom field, this way you can still have the full article content in your post.

If you use <?php the_content(); ?> for the featured image or video in the slider, then all your post content will feed into that area, which could be a pain if you have lots of text and other images in your post.

So I’ve included the custom field in my gist, replacing <?php the_content(); ?>, all you have to do is create a custom field called…

Slider Featured Image

…and paste the image code or video embed code into this. Once you’ve created this custom field, Slider Featured Image will be saved and you will be able to select it from a dropdown in the post editor on other features.

I’ve commented through out the gist so you know whats going on.

Good luck