WordPress.org

Forums

[Theme: Sight] Slideshow Hack (5 posts)

  1. Dalenatran
    Member
    Posted 2 years ago #

    I'm using the sight theme from wp-showers. Very cool and clean theme. Their slideshow is also very simple but I'd like to change the way it works.

    The idea looks just like http://okayplayer.com/ 's slideshow. I want to somehow have five of the featured images side by side while the post meta and excerpt sits in a box under these five photos and slides while an arrow indicates the referenced photo post.

    I really want to do this but I just don't know how to start. Say I want to first call the most recent five featured images (that have been checked for the slideshow option) and place them side by side, what would I need to do with the php first? here is the code to slideshow:

    <?php
        $args = array(
            'meta_key' => 'sgt_slide',
            'meta_value' => 'on',
            'numberposts' => -1,
            );
        $slides = get_posts($args);
    
        if ( !empty($slides) ) : $exl_posts = Array(); ?>
    
            <div class="slideshow"><div id="slideshow">
    
            <?php foreach( $slides as $post ) :
                setup_postdata($post);
                global $exl_posts;
                $exl_posts[] = $post->ID;
            ?>
            <div class="slide clear">
                <div class="post">
                    <?php if ( has_post_thumbnail() ) echo '<a href="'.get_permalink().'">'.get_the_post_thumbnail($post->ID, 'slide',
                        array(
                            'alt'	=> trim(strip_tags( $post->post_title )),
                            'title'	=> trim(strip_tags( $post->post_title )),
                        )).'</a>'; ?>
                    <div class="post-category"><?php the_category(' / '); ?></div>
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    
                    <div class="post-meta">by <span class="post-author"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Posts by <?php the_author(); ?>"><?php the_author(); ?></a></span> on <span
                            class="post-date"><?php the_time(__('M j, Y')) ?></span> • <?php comments_popup_link(__('No Comments'), __('1 Comment'), __('% Comments'), '', __('Comments Closed') ); ?> <?php edit_post_link( __( 'Edit entry'), '• '); ?></div>
                    <div class="post-content"><?php if ( has_post_thumbnail() && function_exists('smart_excerpt') ) smart_excerpt(get_the_excerpt(), 50); else smart_excerpt(get_the_excerpt(), 150); ?></div>
                </div>
            </div>
            <?php endforeach; ?>
    
            </div>
    
                <a href="javascript: void(0);" id="larr"></a>
                <a href="javascript: void(0);" id="rarr"></a>
            </div>
        <?php endif; ?>

    and how would I change the css

    [ Moderator note: Code fixed, the backticks need to go above and below the code to display correctly. ]

    #slideshow, .slideshow {height: 200px; width:1050 px; overflow: hidden; position: relative; margin-top: 0px; margin-bottom: 15px;}
    .slide {height: 200; width: 1050px; background: #DFC874;}
    .slide img {display: block; float: left; width: 400px; height: 250px; position: relative; top: -20px; left: -30px;}
    .slide .post {padding: 20px 30px 0;}
    .slide .post-category {font-size: 11px; color: #000; text-transform: uppercase; margin-bottom: 5px;}
    .slide .post a {color: #000;}
    .slide .post .post-category a {text-decoration: none;}
    .slide .post .post-category a:hover {text-decoration: underline;}
    .slide .post h2 {margin-bottom: 5px;}
    .slide .post h2, .slide .post h2 a {color: #000; font-size: 20px; font-weight: 700; text-decoration: none; font-family: 'PT Sans', sans-serif;}
    .slide .post h2 a:hover {text-decoration: underline;}
    .slide .post .post-meta {font-size: 11px; font-style: italic; color: #000; margin-bottom: 10px;}
    .slide .post .post-meta span, .slide .post .post-meta a {color: #000; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-style: normal;}
    .slide .post .post-meta a:hover {text-decoration: underline;}
    .slide .post .post-author {text-transform: uppercase;}
    .slide .post-content p {margin-bottom: 15px;}
    #larr, #rarr {display: block; width: 50px; height: 50px; position: absolute; top: 80px !important; opacity: 0.2; z-index: 99 !important;}
    #larr {background: transparent url("images/infins.png") 8px 50% no-repeat; left: 0 !important;}
    #rarr {background: transparent url("images/infins.png") 8px 50% no-repeat; right: 0 !important;}
    #larr:hover, #rarr:hover {opacity: 1;}

    If I can get started here, I can try to find my way around the rest. If anyone has any suggestions, I'd really appreciate it.

    Thanks in advance

  2. Andrew
    Forum moderator
    Posted 2 years ago #

    Provide a link to your website so we can recommend code.

    It sounds as though you just want to remove the display: none; styles on your slideshow, get the slideshow images to fit nicely aside eachother, then apply CSS Tooltips on each image.

  3. Dalenatran
    Member
    Posted 2 years ago #

    @Andrew thanks for replying

    the domain i'm working on right now is neuronectar.com
    I've been messing with the code on the php file and placing the thumbnail before the slideshow function. Layout-wise, I'm getting a babystep closer but functionally, not so much.

    Yes, I would like to get the slideshow images to fit nicely together aside each other. How would I go about doing that in my slideshow.php file?

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    Does your current slideshow allow images?

  5. Dalenatran
    Member
    Posted 2 years ago #

    Yeah. The huge picture above the slideshow at the moment is the features image of the post seen in the golden slideshow

Topic Closed

This topic has been closed to new replies.

About this Topic