Blip Slideshow Examples 2/2

A SmugMug slideshow with links and thumbnails disabled:

[blip-slideshow link=none thumbnails=false rss=feed://www.smugmug.com/hack/feed.mg?Type=popular&Data=all&format=rss200&Size=Small]

 

A MobileMe slideshow with a lightbox. WordPress plug-in “Lightbox Plus” has been installed and activated (click the image to view).

[blip-slideshow captions=false link=lightbox thumbnails=false rss=http://photocast.me.com/jasonhendriks/100242/rss/&#93

 

A Flickr slideshow with uncropped photos linking to the original Flickr galleries. Inline styling tells the browser how much space to leave for the the thumbs. If you said to yourself “what the heck is inline styling!”, be sure to read the section on Styling Blip Slideshow for tips.

[blip-slideshow link=href captions=false controller=false fast=2 overlap=false resize=fit rss=feed://api.flickr.com/services/feeds/photos_public.gne?id=41064421@N08&lang=en-us&format=rss_200/]
<style>div.slideshow {margin-bottom:95px}div.slideshow-thumbnails {height:95px;bottom:-95px}</style>

 

A Google Picassa Web slideshow.

[blip-slideshow rss=http://picasaweb.google.com/data/feed/base/featured?alt=rss&kind=photo&access=public&slabel=featured&hl=en_US]
<style>div.slideshow {margin-bottom:86px}div.slideshow-thumbnails {height:86px;bottom:-86px}</style>

 

A Photobucket slideshow. A “default” image has been added in the shortcode content in case the visitor has Javascript disabled.

[blip-slideshow thumbnails=false rss=feed://feed.photobucket.com/images/photography/feed.rss&#93<img src="http://www.mobilecrunch.com/wp-content/uploads/2011/02/Cat_fail_Fail-s446x354-10288-580.jpeg"/>[/blip-slideshow]

Cat Fail

 

Continue to the Styling Blip Slideshow page for more options.

52 thoughts on “Blip Slideshow Examples 2/2

    • Sure, first turn off the slide captions, controller and loader:
      [slideshow captions=false controller=false loader=false]

      And then add some CSS to hide the slides into your theme’s blip-slideshow.css:
      div.slideshow {margin-bottom:65px}
      div.slideshow-images {display:none}
      div.slideshow-thumbnails {height:55px}

  1. Hi!
    How can I set the showed files? I deleted the files in the wp-contentpluginsblip-slideshowSlideshowimages folder and I rename the files from 1 to 16 but it dont play only the first 4.
    So, how can I set to play all file in my folder.

    thanks.

    • At this moment, Blip does not read files from a folder. It only reads them via RSS. This means you must have an account with SmugMug, Flickr, Picasa, Photobucket, MobileMe, or another photo-sharing service.

      • Hi again, thank u very much for help! I’m still stuck with this effect, i can’t reropduce it I did everything above, but still nothing. Do I need to activated some additional effect on Gallery’ options ? I tried thickbox and it works, but toss did not.Could u give me some additional tips how to add that effect on my blog ? I’ll be appreciate! Thank you!V.

  2. Hi Fred,

    How can I align the slideshow to the left?
    Here’s my code..
    [slideshow resize=fill loader=false width=700 height=478 link=none thumbnails=false captions=false loop=true delay=5000 rss=http://picasaweb.google.com/data/feed/base/user/1xx/albumid/5604281330682695841?alt=rss&kind=photo&hl=en_US]

    It displays the slideshow to the center of my website.. it should be just at the left.

    • Create a file called blip-slideshow.css in your theme and paste the following:

      div.slideshow {
      width:700px;
      height:478px;
      margin-bottom:75px
      }
      div.slideshow-thumbnails {
      bottom:-75px;
      height:75px
      }

    • Leigh, I notice you have activated the Jetpack plugin on your Blog. Jetpack also defines a [slideshow] shortcode which is taking precedent over Blip. To activate Blip in your blog post, use the shortcode [blip-slideshow] instead of [slideshow].

      • I tried and still am getting nothing. I’m using the following code:

        [blip-slideshow rss=https://picasaweb.google.com/data/feed/base/user/sleighthompson/albumid/5607659071235861345?alt=rss&kind=photo&hl=en_US]

        My site is hosted on GoDaddy. Thanks again for your prompt and attentive assistance!

  3. Hi Jason,

    your Slideshow looks really good and i tried to get it work, but I didn’t.

    Maybey you see my mistake.
    The website is: http://staudte.bplaced.net/wp/?page_id=84
    I found the the prototype.js and renamed it into prototype.js.old, i think that should worked. If i look through the source code of that page, I see that the [blip-slideshow .. ist replace by ur script but it doesn’t work. Any idea?

  4. Hi Jason,

    Love the concept, and want to make it work on the front page of my new website I am starting to build – but failing at present. Its a 2010 Weaver theme, which is great for everything else I want (I think), but all I’m getting on screen is “div.slideshow {margin-bottom:95px}div.slideshow-thumbnails {height:95px;bottom:-95px}” I’m sure I’m being thick…can you point me in the right direction?!

    thanks

    Rob

  5. Hi Jason,

    your Slideshow looks really good and i tried to get it work, but I didn’t.

    Maybey you see my mistake.
    The website is: http://staudte.bplaced.net/wp/?page_id=84
    I found the the prototype.js and renamed it into prototype.js.old, i think that should worked. If i look through the source code of that page, I see that the [blip-slideshow .. ist replace by ur script but it doesn’t work. Any idea?

    Thank You

  6. Hey Jason,

    Can you please help me. I used your plugin to show a flickr photo slideshow. This is the code I used:

    [blip-slideshow link=href captions=false controller=false fast=2 overlap=false resize=fit rss=feed://api.flickr.com/services/feeds/photos_public.gne?id=63513008@N03&lang=en-us&format=rss_200/]

    But it won’t load the photo’s. What am I doing wrong?

  7. Hi Jason,
    I feel like i’ve done everything mentioned in Installation but the slideshow won’t show up on my page. I have WordPress 3.1.3 (latest) and PHP5, I installed it through FTP and then activated it. I put the code on my page (http://www.ifgfdallas.com/?page_id=192) but the slideshow won’t show up.

    Here is my code:

    [blip-slideshow thumbnails=true captions=false loop=true rss=http://feed213.photobucket.com/albums/cc134/ifgfdallas/2007%20Christmas%20Dinner/feed.rss]

    Any clues?

  8. Hi Jason,

    similar to Leigh I’ve added the plugin, activated it, copied the external Picasa code
    and posted it to a new post in HTML, but in there post there is no slideshow. Highlighting the area where it’s supposed to be gives an area larger than just one line, so I suspect there is *something* going on with the plugin, but it’s not working correctly.

    I’ve used the code shown above for the Picasa example just as it is displayed on the website, but tried my own RSS data as well. I used the blip-slideshow tag.

    After it didn’t work I’ve also installed a mootools framework plugin, renamed the prototype.js (otherwise it gives an Error message), deactivated all other plugins, tried different browsers, but can’t seem to make it work.

    Any ideas? Help would be appreciated a lot, because otherwise I think it’s a great plugin.

  9. Hi Jason. Great plugin.

    It was working fine bringing in Picasa RSS feeds on my dev site (MAMP w/ PHP 5.3.5 and mySQL 5.5.9).

    When I went to production, the viewer no longer loads. The host is iPower with PHP 5.2.17 and mySQL 5.0.51a. (I know.. a step back from my dev environment, but I was mainly concerned that WP 3.1.3 works fine, which it does).

    No prototype.js or Jetpack in use.

    Anyway, on this page: http://www.sterneschool.org/?page_id=1299 I get no viewer for the Picasa RSS feed. There are several other picture pages linked from here.

    This is the shortcode I’ve been trying:
    [blip-slideshow rss=http://picasaweb.google.com/data/feed/base/user/mrssararoth/albumid/5384406339124922913?alt=rss&kind=photo&hl=en_US]

    I also tried [blip_slideshow ...] and just [slideshow ...]

    I also tried some of your RSS examples from this site – none work.

    I tried the vanilla code to make sure the Blip viewer was functioning. This works fine: [blip-slideshow overlap=true delay=1000 height=300 width=400]

    I even created a rendered-HTML-source version of the working page from my dev site’s WP install, and moved it to the host. No luck: http://www.sterneschool.org/pictest.html

    Any thoughts? Should I blame the host’s lower versions or be looking for something else in their config?

    Thanks in advance!

    AJ

  10. I am probably just not understanding or finding a bit more detailed installation guide. I am extremely new to php. I have a good bit of experience using dreamweaver. I understand I am no expert.

    I am looking for a detailed (non video if possible), instruction guide. I have seen the instructions of 4 or so bullet points posted but I am still not sure how to successfully implement it.

    any assistance would be greatly appreciated.

    I am attempting to use this with photobucket.

  11. I’m getting all these warnings and the slideshow doesn’t work. Can you help please?

    Warning: mkdir() [function.mkdir]: Permission denied in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 609

    Warning: chmod() [function.chmod]: No such file or directory in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 610

    Warning: touch() [function.touch]: Unable to create file /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/cache/342da42455e65bd57f9a4431e3867893 because No such file or directory in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 616

    Warning: chmod() [function.chmod]: No such file or directory in /home/www/f2009231c6963a840a9222daa70cea4d/web/general/wp-content/plugins/blip-slideshow/blip.php on line 617

    This is a test of a new slideshow program:

    div.slideshow {margin-bottom:86px}div.slideshow-thumbnails {height:86px;bottom:-86px}

  12. Hi,

    I’ve also done the installation steps as instructed. I am trying to add a slideshow to a post and am using this code:

    [blip-slideshow captions=false link=lightbox thumbnails=false rss=http://maulin.smugmug.com/hack/feed.mg?Type=gallery&Data=16827457_BbcPgn&format=rss200]

    Nothing is showing up however. Any ideas?

  13. Hey Jason! I’ve been trying your plugin with WordPress 3.2.1 + Smugmug feeds and have not been having any luck. Are you aware of any limitations?

    Thanks!

  14. Hi Jason,
    nice Plugin. I´m wondering why it doesn´t work on my blog with mobileme. all the others like flickr etc. are fine. can you please give me a helping hand to sove it.

    thanks

  15. Hi Jason:

    Love the plug-in and the post is very helpful, but I cannot get it to work with my limited coding skills. I really like the format of the Flicker gallery on this post, can I use that shortcode with the code I copy from my PhotoBucket account? I tried using both the shortcode you provided from both Flicker and PhotoBucket and neither worked.

    Thanks for your help!
    Donna

    Here is my website: http://www.ellensirot.com

    Here is the code for my Photo Bucket photo album:

    OR

    http://photobucket.com/handperfection

  16. hey thanks for the plugin it is amazing

    i just need this tiny help

    i typed ” [slideshow captions=false link=lightbox controller=false thumbnails=false ]
    ” and i need “border-radius:10px” for the pictures

    where should i changed? because I’ve been all over the CSS file and no changes at all :S

  17. I have installed Blip-Slideshow on my WordPress site and it does not show up. I don’t have prototype or Jetpack installed. I have set the Picasa album to public.

    I’m stumped. I have read all the comments and stuff I could find. Please help.
    My site is http://artbysunshine.com and the picasa album is displayed on the Art page. http://artbysunshine.com/?page_id=6

    I have pasted the code example directly from your site as well as using my own rss link to my picasa album.

  18. Hi Jason,

    Thank you for an awesome plugin.

    2 quick questions for you:
    – I have created a blip-slideshow.css like you advised Spidey on May 12th, 2011. I made it a bit different:

    div.slideshow {
    width:500px;
    height:375px;
    margin-bottom:30px
    }

    I’m having trouble with the alignment of the caption (it pokes out of the picture and isn’t in the bottom of the frame). What do I need to input to get it in its right place?
    – Is there a way to adjust how long the caption stays visible?

    Thank you,

  19. Hey,

    I found out what I had done wrong … There was a discrepancy between the blip-slideshow.css and the styling. Now the caption is in the right place.

    I’m still curious about lengthening the intervall the caption is visible.

    Thank you,

  20. Hey 😀
    Blip is great!
    Sadly, all pictures of my Picasa Webalbum have exactly 512px width. But I uploadet them in 2048px. Can you please help me to get that working properly. I’ve made the blip-slideshow.css and adjusted it to 600px width and in 4/3 ratio, 450px height. I also adjusted the slidshow to this size. What can I do?
    Manuel

  21. I cannot get my smugmug gallery to load. I have tried:

    [blip-slideshow thumbnails=true width=1030 height=585 random=false resize=fill captions=false rss=feed://api.smugmug.com/hack/feed.mg?Type=gallery&Data=23966440_5S98fV&f=rss200&Size=Large]

    and
    [blip-slideshow thumbnails=true width=1030 height=585 random=false resize=fill captions=false
    rss=feed://jessyandmelissa.smugmug.com/hack/feed.mg?Type=gallery&Data=23966440_5S98fV&rss200&Size=Large]

    Both resolve in a browser but neither start the slideshow. When I revert back to the smugmug sample above it works. Do you know what I’m doing wrong?

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=""> <s> <strike> <strong>