Blip Slideshow Reference

Shortcodes

Blip recognizes the following shortcodes:

  • [blip-slideshow] – the Blip Slideshow shortcode.
  • [blip_slideshow] – if you are still using WordPress 2.9 or earlier, you should use an underscore instead of a hypen for the Blip Slideshow shortcode.
  • [slideshow] – (deprecated) because of the potential for another plugin on your site to also define a conflicting [slideshow] shortcode, it is recommended you use
    instead.

Slideshow Options

Blip recognizes the following options in the [slideshow] shortcode:

  • captions – (boolean: default true) Whether to show captions.
  • center (0.2 and higher) – (boolean: default true) Whether the show should attempt to center images.
  • color (1.2 and higher) – (string: default “#FFF”) colours (separated by commas) to cycle through for the flash slideshow
  • controller – (boolean: default true) Whether to show controller.
  • delay – (integer: default 2000) The delay between slide changes in milliseconds (1000 = 1 second).
  • duration – (integer: default 750) The duration of the effect in milliseconds (1000 = 1 second).
  • fast – (boolean or integer: default false) Affects how the show behaves when the user is navigating via the controller or keyboard: if false/0 the show will always use transitions; if 1 the show will skip transitions if paused; if true/2 the show will skip all transitions and update the slide change instantly.
  • height – (integer) Optional height value for the show as a whole integer, if a height value is not given the height of the default image will be used. If you change the height of the default slideshow, you must use CSS to match the height of div.slideshow as well.
  • id – (string: default internally managed) Specify the <slideshow> element id here when you have two or more slideshows in the same page and wish to style each one individually. Remember, CSS dictates that element id’s must be unique per page!
  • link (0.2 and higher) – (boolean or string: default full) Determines what happens when a slideshow image is clicked:
    • full or true – Links each slide to the fullsize image, useful when mashing Slideshow with Slimbox, Lightbox, etc.
    • lightbox (0.3 and higher) – Links each slide to a WordPress Lightbox plugin. Requires Slimbox or WP-Slimbox2.
    • none or false – Disables hyperlinking altogether.
    • href – Links to the permalink given in the RSS, e.g. the original SmugMug or Flickr gallery.
    • link=http://www.someurl.com/ links to the specified URL
  • loader – (boolean: default true) Show the loader graphic for images being loaded.
  • loop – (boolean: default true) Should the show loop.
  • overlap – (boolean: default true) Whether images overlap in the basic show, or if the first image transitions out before the second transitions in.
  • pan (1.2 and higher) – (integers: default “100, 100″) controls the pan positioning for the Ken Burns slideshow
  • paused – (boolean: default false) Whether the show should start paused.
  • random – (boolean: default false) Random show, combined with thumbnails equals very cool!
  • resize (0.2 and higher) - (boolean or string: default “fill”) Whether the show should attempt to resize images, based on the shortest side (default) or longest side (“fit”) or resize without preserving proportions (“stretch”). Set to false to disable image resizing.
  • rss – (string: default is the internal slideshow) The media RSS feel URL to load. Currently supports SmugMug, Flickr and MobileMe feeds only.
  • slide – (integer: default 0) Slide from which to start the show.
  • thumbnails – (boolean: default false) Whether to show thumbnails.
  • titles – (boolean: default false) Whether to use captions for image and thumbnail title attributes.
  • transition (1.2 and higher) – (string: default “sine”) transition to use with base and push type shows
  • type (1.2 and higher) – (string: default “base”) the type of slideshow
    • flash – Flash (see the color option)
    • fold – Fold
    • kenburns – Ken Burns (see the pan and zoom options)
    • push – Push (see the transition option)
  • width – (integer) Optional width value for the show as a whole integer, if a width value is not given the width of the default image will be used. If you change the width of the default slideshow, you must use CSS to match the width of div.slideshow as well.
  • zoom (1.2 and higher) – (integers: default “50, 50″) controls the zoom positioning for the Ken Burns slideshow

Here is an example of the slideshow shortcode with all the options:

[slideshow captions=true center=true controller=true delay=2000 duration=750 fast=false height=300 id=myShow link=full loader=true loop=true overlap=true pan="100, 100" paused=false random=false resize=fill slide=0 thumbnails=true titles=false transition=sine type=base width=400 zoom="50, 50"]

13 Responses to Blip Slideshow Reference

  1. Elaine- says:

    having a little trouble with the slideshow, it won’t center on the page, and i can’t set the width so that it shows the entire photo, it always cuts off a little at the right hand side… other than that, i’m very grateful for this plugin!!! thank you!! :)

  2. JohnF says:

    I am totally new to this so go easy on me. What I want to do is create a Gallery page with a slide-show from one of my smugmug albums. But I’m a bit stuck as to what code to use where. Thanks

    • jason says:

      John, create a new page and type the following into the content:

      [slideshow]

      that’s step 1. step 2 is to get the RSS url from SmugMug… then modify you slideshow tag so it looks like this:

      [slideshow rss=the-rss-url-you-copied-from-smugmug]

      • JohnF says:

        Thanks Jason, This is what I had tried before I asked for help. I guess it would have been useful to let you know! lol

        [slideshow link=none thumbnails=false rss=http://nutter.smugmug.com/hack/feed.mg?Type=gallery&Data=2847649_nQmAU&format=rss200]

  3. Fred says:

    Hi Jason,

    Wonderful plugin. I do have some feature requests:

    1. The kenburns effect is not really a slide transision. I am trying to have a slideshow where the slides transition is relatively short, but the kenburns effect should be rather slow. I’ve tried various combinations of delay and duration, but i’m not getting the effect. If I choose a long duration, the kenburns effect is slow, but it kind of overrides the delay.

    2. captions=topleft, topcenter, topright, bottomleft, bottomcenter,bottomright,false. These settings decide where to put the caption.

    3. caption font, color (maybe this already can be done with css?)

    4. caption background color and opacity

    5. border the image (or maybe even the whole slide show, including the thumbnails). Maybe this is already possible with css. Like a background color or something

    6. Rounded corners

    Again, maybe some of this is already possible, but not obvious enough (for me).

    Fred

    • jason says:

      Hi Fred. For the first issue, you’ll have to go straight to the top. Leave a comment in the official MooTools Slideshow Google Group and Aaron might consider your request. I only make Slideshow work in WordPress :)

      As for the rest, yes they can all be done in CSS. I’m not sure if this could be done programmatically, because everyone’s use of Slideshow is different. But if you make nice with a CSS developer they might help you out.

      This should get you started:

      .slideshow-captions {
      text-align:center;
      font-size:.8em;
      color:lightgreen;
      background-color:brown;
      opacity:0.25;
      bottom:340px;
      }
      .slideshow-images {
      border: solid 1px #300;
      }
      .slideshow-images img {
      -moz-border-radius-bottom-right: 20px;
      -moz-border-radius-bottom-left: 20px;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      }
      div.slideshow {
      border: solid 1px green;
      margin-bottom:80px;
      width:404px;
      height:360px;
      }
      div.slideshow-thumbnails {
      height:60px;
      bottom:0px;
      z-index:1;
      }

  4. Fred says:

    What also would be nice (and then I will stop :-) ) is to delay the caption switch. Now, the caption of the new slide appears, while the slide is not even visible. The transition started, but the slide is not fully visible. That means you see the captions of the next slide with the previous slide for a while which is a bit confusing. Something like captiondelay=500 (ms).

  5. Herson Cruz says:

    Hi,
    Can I use this with the own WordPress RSS system?

  6. Jason says:

    Jason:

    Thank you for the Blip Slideshow — I was finally able to get it working on my website, but I have a question about placement. I currently use the shortcode on my static front page of illgiveyousomethingtocryabout.com. My goal is to have the blog title at the top, then the slideshow, then the menu underneath. You can see that the menu is in the header and the slideshow is at the bottom of the page. Should I use the example you provided on the Theme Example page:

    slideshow(array(‘id’=>’myShow’)); ?>

    to manually insert the slideshow above the menu? I tried that in the header and it blanked out everything except the blog title.

    Thanks,
    - Jason

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>