Ashley Cameron Design

Ashley Cameron Design

Shop the Creative Design Market

Good morning

Slideshow with text using slidesjs and wp_get_attachment_image()

SnippetsWordPress

About a 1 minute read

"It is the supreme art of the teacher to awaken joy in creative expression and knowledge."

Albert Einstein


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>