Slideshow with text using slidesjs and wp_get_attachment_image()

by Ashley N Cameron

Published: Dec 9, 2012

SnippetsWordPress

About a 1 minute read

"The art of living… is neither careless drifting on the one hand nor fearful clinging to the past on the other. It consists in being sensitive to each moment, in regarding it as utterly new and unique, in having the mind open and wholly receptive."

Alan Watts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php wp_deregister_script('jquery');

      wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', NULL, '1.5.1');

      wp_enqueue_script('slides', get_stylesheet_directory_uri().'/js/slides.min.jquery.js', array('jquery'), '1.1.9');?>



<div id="slideshow">

    <div class="slides_container">

    <?php $args = array(

        'post_type'      => 'attachment',

        'post_parent' => $post->ID,

        'post_mime_type' => 'image',

        'post_status'    => NULL,

        'numberposts'    => -1 );

        $attachments = get_posts($args);

        foreach ($attachments as $attachment) {

            $caption= $attachment->post_excerpt;

            echo "<div class='textBox'>

                    <div class='text'>

                      <h1>".$attachment->post_title."</h1>

                      <p>".$attachment->post_content."</p>"; ?>

                      <a href="/<?php echo $caption ?>">

                        <?php echo wp_get_attachment_image($attachment->ID, 'full', false, false); ?>

                      </a>

                    </div>

                 </div> 

        <?php } ?>

    </div>

    <a href="#" id="prev"><img src="<?php echo get_stylesheet_directory_uri(); ?>/image/arrow-prev.png"></a>

    <a href="#" id="next"><img src="<?php echo get_stylesheet_directory_uri(); ?>/image/arrow-next.png"></a>

</div>

<script>

$(document).ready(function() {

    $('#slideshow').slides({

        preload: true,

        preloadImage: '<?php echo get_stylesheet_directory_uri(); ?>/image/loading.gif',

        play: 4000,

        pause: 1500,

        hoverPause: true

    });

});

</script>