How to create Slideshow for WordPress

Create a dinamic slideshow of the last post image attachments for WordPress

header.php

Open your header.php file of your theme determine where you will place the slideshow.

Retrieve the posts and attachments

Copy and paste the following code to get the last 5 posts and thier attachments.

You can change the get_post function with additional arguments.

The Slideshow

I’m gona use the jQuery Cycle wich I think is one of the best slideshows ever. You could use any other slideshow.

We will need an style, a container and the JavaScript includes.

Extra

You could use the timthumb library to resize the image dinamically 😉

18 comments
  • hey

    incredible, I will try it when I am done with a special offer that we are preparing for our magento e-commerce store.

    thank you 🙂
    Nicole

  • Hi can I grab only the pictures of that post?

  • Hi i am using this great code in my site and working perfectly with a little modification to suit my needs. Thank you very much. I have also a question, do you kno how i could implement some prev/next controls?

    And do you know also how can i create a meta box in wordpress theme to control the velocity and effects of this slide?

    Thank you very much!

  • Thank you so much Rick, i have my slideshow working now with thumbnails thanks to another code i have found, but i would like to implement the prev next button too.

    I have look inside the code and cannot find which are the functions i have to add to mines to make it work with the prev/next buttons…

    My demo site “without design” with the slideshow is

    http://framecero.com/aagantrywordpress/?project=project-1

    I have made a meta box in wordpress to upload this images for each portfolio project, a custom post type in wordpress.

    when you go inside the portfolio items they show the images in a slideshow but would like to control it!! , i have the images, but the buttons…

    I would appreciate so much your help. Thank you very much for your attention..and sorry for my english, i am spanish.

    • First of all you need to add the following options to the function.

      As you can see there’s “prev” “next” and “pager” options:

      [code]
      $(‘#slideshow’).cycle({
      fx: ‘scrollHorz’,
      timeout: 0,
      prev: ‘#prev’,
      next: ‘#next’,
      pager: ‘#nav’,
      pagerAnchorBuilder: pagerFactory
      });

      [/code]

      Then you need this HTML code, wich is used to show the buttons and the pager:

      [code]

      <a href="#"><span id="prev">Prev</span></a>
      <a href="#"><span id="next">Next</span></a>
      <ul id="nav"></ul>

      [/code]

      Let me know how it goes.

      Regards

  • Thanks again Rick, i have tried to implement the code but know it shows the prev/next button but not the thumbs

    the code i had before, it was showing only the thumbs

    [code]

    $(‘.slideshow’).before(‘<ul id="nav">’).cycle({
    fx: ‘turnDown’,
    speed: ‘fast’,
    timeout: 0,
    pager: ‘.nav’,

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
    return ‘<li><a href="#"><img src="’ + slide.src + ‘" width="50" height="50" /></a></li>’;
    }
    });

    [/code]

    and in html
    [code]

    <ul class="nav"></ul>

    [/code]

    when i change to your code i cannot see thumbs but yes the buttons prev/next

    I implement your code like this:

    [code]
    $(‘.slideshow’).before(‘<ul id="nav">’).cycle({
    fx: ‘turnDown’,
    speed: ‘fast’,
    prev: ‘#prev’,
    next: ‘#next’,
    pager: ‘.nav’,
    pagerAnchorBuilder: pagerFactory
    timeout: 0,

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
    return ‘<li><a href="#"><img src="’ + slide.src + ‘" width="50" height="50" /></a></li>’;
    }
    });

    [/code]

    And in html

    [code]

    <a href="#"><span id="prev">Prev</span></a>
    <a href="#"><span id="next">Next</span></a>
    <ul class="nav"></ul>

    [/code]

    Well i think it should show the buttons and thumbs but it doesn´t, i really don´t know where is the problem…Do you see it?

    I appreciatte so much your help, continue with the great work, thanks !!

  • Well i don´t want to abuse, but i will appreciatte so much if you can guide how can i implement a meta box in wordpress post editing page to control all the slideshow parametersthrough an options panel..

  • well and when i implement this code it shows the prev/next buttons but they don´t work , i forgot to tell you, now i have seen it, i though they were working when i saw them firstly.

    thanks!!

  • Thank you, i have to clean it, but, well i show you one function, can you tell me where i am repeating the function, it is my firts php project and i am a bit lost.

    thank you very much

  • Well i am trying to make a theme for a user that is not a wordpress user, i have to give the maximum posibilities to the user, the less plugins the best, also for updateds and things like that.

    Now the user has a custom post type called projects in which he can show he´s portfolio, i have implemented this slideshow in the post options panel and it works great, the user can upload all the images he wants and then they show in the slide, it´s perfect for wordpress non user that don´t know anything about plugins, updates and things like that.

    I have not repeated that code you send me, i have change it, one for the other, replace it, sorry for my english. well added your code to mine.

    My working function only for thumbs was:

    [code]

    $(‘.slideshow’).before(‘<ul class="nav">’).cycle({
    fx: ‘turnDown’,
    speed: ‘fast’,
    timeout: 0,
    pager: ‘.nav’,

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
    return ‘<li><a href="#"><img src="’ + slide.src + ‘" width="50" height="50" /></a></li>’;
    }
    });

    [/code]

    i only added your 3 lines to my function:

    [code]
    prev:’#prev’,
    next:’#next’,
    pagerAnchorBuilder: pagerFactory,

    [/code]

    and added the html

    [code]

    <a href="#"><span id="prev">Prev</span></a>
    <a href="#"><span id="next">Next</span></a>

    [/code]

    before my:

    [code]
    <ul class="nav"></ul>

    [/code]

    But as i told you, it doesn´t work, i think the problem can be in the :

    pagerAnchorBuilder: tha is called 2 times ???

  • I am working in a site for a client that is not a wordpress user and i think this is the best solution, no plugins, no updates, only a custonm post type where he can modify everything intuitivesly(What the … means this word ?? 😉 )

    I have read about this and it seems to be the best solution.

    I have only added this 3 lines of code from yours to mine,

    [code]

    prev: ‘#prev’,
    next: ‘#next’,
    pagerAnchorBuilder: pagerFactory

    [/code]

    Perhaps the problem is in the pagerAnchorBuilder that is called 2 times?

    the last function for me was:

    [code]

    $(‘.slideshow’).before(‘<ul id="nav">’).cycle({
    fx: ‘turnDown’,
    speed: ‘fast’,
    prev: ‘#prev’,
    next: ‘#next’,
    pager: ‘.nav’,
    pagerAnchorBuilder: pagerFactory
    timeout: 0,

    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
    return ‘<li><a href="#"><img src="’ + slide.src + ‘" width="50" height="50" /></a></li>’;
    }
    });

    [/code]

    and also added the 2 hrefs for prev and next button before my nav ul.

    do you understand me?

    • The solution, for this last function, delete line

      [code]

      pagerAnchorBuilder: pagerFactory

      [/code]

      Thanks Rick!! It works perfect now !! both thumbs and prev/next buttons

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*