Forums

WordPress › Support » Themes and Templates

Slider + Thumbnail page (3 posts)

  1. kortschot
    Member
    Posted 2 years ago #

    Hi there,

    I was wondering if anybody van point me the right direction. Im developing my own theme for my own use. Im not a programmer, do know my HTML and CSS and a little PHP and so on.

    The THING!
    I'm creating a page with a wide slider on top, below that it pulls thumbs and excerpts. So I started messing around with multiple loops, due I think that is the case.

    What the page has to do. Only load posts from a certain category, show the 1th 5 in the nivo slider (which already has been setup) followed by thumbnails from the rest of the posts in the category.

    <?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">

jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
		effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
    slices:15,
		animSpeed:500, //Slide transition speed
		pauseTime:5000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		captionOpacity:0.8, //Universal caption opacity
	});
});
</script>

<body>
    <nav>
      <?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>
      <a href="http://www.twitter.com/Kortschot" target="_blank" class="twitterbird-nav"></a>
    </nav>

    <p style="font-size: 16px; text-align:center; padding:10px 0 0 0;">Deze pagina is nog in ontwikkeling</p>

    <div id="main-content-werk">
      <div id="slider">
       <?php $my_query = new WP_Query('showposts=5&category_name=werk'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
       <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
       <img src="<?php echo get_post_meta($post->ID, 'slider-image', true); ?>" alt="" title="<?php the_title(); ?>" />
       </a>
       <?php endwhile; ?>
      </div>
      <br clear="all" />
    </div> <!-- end main-content-werk -->

    <?php get_footer(); ?>

    Anybody who can show me the way... I appreciate it.

    With Regards,
    Paul te Kortschot

  2. kortschot
    Member
    Posted 2 years ago #

    These threads go soooo quickly =) just a comment to try and get the post up a bit.

    (no idea if it works though)

  3. kortschot
    Member
    Posted 2 years ago #

    little update,

    Now I have:

    <div id="slider">
          <?php $my_query = new WP_Query('category_name=werk&posts_per_page=3');
           while ($my_query->have_posts()) : $my_query->the_post();?>
           <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_meta($post->ID, 'slider-image', true); ?>" alt="" title="<?php the_title(); ?>" /></a>
           <?php endwhile; ?>
         </div> <!-- END slider -->

         <br clear="all" />

        <?php rewind_posts(); ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
          <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
      <?php endwhile; endif; ?>

    But now it posts the page permalink below the slider... I cant get it to list the category posts. When I get this working I can use offset to skip the posts in the slider... at least thats the plan.

    Anybody who has an idea.... please, i'm all ears.

    With Regards,
    Paul

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags