PictureSlides plugin released for DOMAssistant

We have just released a PictureSlides plugin for DOMAssistant, with which you can create picture slideshows, image presentations and also complete picture galleries.

Two years ago, I created JaS – JavaScript slides to offer this functionality to people. Since then, it has been widely popular and I got continuous requests about new features. Four things that held me back with JaS was that required every large image to be loaded before the document could be used, it wasn’t based on a more solid architecture, it was by default inaccessible without JavaScript (you could create fallbacks, but as well all know, most people don’t), and it just wasn’t customizable enough.

I wanted to improve on this and instead use links, texts, images from the existing HTML code instead, to make it into a much better approach. Naturally, the JavaScript only way is still supported, if you, for instance, want a slideshow to start playing when the web page loads.

Another motivating factor was to make it easier to just turn on or off the features people wanted to use, and add things like autoplay at load, looping slideshows, optional preloading of images, separating thumbnail images from large images etc.

All the features can now be controlled from a separate settings file, while the core PictureSlides takes care of the functionality itself. Features include:

  • Have slideshows start at page load.
  • Automatically loop slideshows.
  • Use a Lightbox-like feature to dim out the rest of the page during slideshows.
  • Fade ins and fade outs.
  • Optionally preload all the images, to improve end user experience.
  • Programmatically choose what images to start with; for instance, taken from the requesting URL to the page using PictureSlides.
  • Use keyboard shortcut support.
  • Use back and forward navigation links.
  • Presenting a text next to the picture.
  • Use an image counter.

Downloads and demos

But, nothing says it better than you trying out one of the demos, complete with downloadable packages that you can just take and use. The demos are:

The source code to download is available through Google code, where you can report any potential issue or just download the latest versions of the files.

Try it out and let me know what you think!

19 Comments

  • Looks pretty cool Robert!

    Use a Lightbox-like feature to dim out the rest of the page during slideshows.

    There seems to be a bug here? Firefox 2.0.0.14 dims out the entire page, including the images. I can’t imagine that’s what’s supposed to happen? This happened on the “Picture gallery” demo page.

  • Maciej Staron says:

    Sample files links are bad, could You please rewrite them ? It`s good to know how Picture Galery was implemented on page πŸ™‚

  • I have the same issue – the slideshow works but the whole screen darkens and then I can't click on anything on the page anymore.

    Running FireFox 2.0.0.13 on Ubuntu

    Otherwise, it looks very nice and I'll enjoy playing with it!

  • Robert Nyman says:

    Harmen, Jennifer,

    Thanks!

    That was a real nasty CSS bug! It works fine in Firefox 3, IE 6-7, Opera 9 and Safari 3, so silly me thought it would work fine in Firefox 2.

    I went through the demo page to just change the HTML to approach it another way. If you go to the gallery demo page now, it should work just fine for you.

    Maciej,

    Sorry about that, apparently I was tired wneh I deployed it. The download links are now working.

  • Thanks for the quick fix… It works fine now, but the link is broken…

    <a id="start-slideshow" href="index.htm"

    should be <id="start-slideshow" href="index.htm<b>l"

    πŸ™‚

    Cheers!

  • Ahhh… I apologise. That's not what's happening.

    Well, what happens is this: When you first load the page, or hit refresh; both "start slideshow" and "stop slideshow" appear underneath the "Previous 1/12 Next" line for about 5 seconds, before disappearing and showing just "start slideshow" on the same line as "Previous 1/12 Next"

    If you hit "start slideshow" in that period, then the browser redirects to index.htm which gives a "Page Not Found" message.

    Did that make sense? I need to lay off the caffeinated beverages πŸ˜‰

  • Robert Nyman says:

    Jennifer,

    I see what you mean. PictureSlides itself is initialized when the window has loaded, to avoid starting any actions before the images being used are in place.

    If that is a problem, i.e. that the start slideshow link is clickable before the actual event has been applied, one can either use something else than an <code>a</code> element for that functionality (it's solely id-dependent), or have it hidden with CSS and then show it when the page has loaded.

    The latter is something which PictureSlides doesn't do automatically right now, but something I'll make sure to include in the next upgrade (which will probably be just small fixes such as that one); I hope it's not a show-stopper for the moment.

    Does that sound ok?

    Also, I just made a CSS change to that demo to make sure the stop slideshow link is hidden when the page is loaded.

  • Andy says:

    Such a shame it isn't built unobtrusively.

    By the way, there's some nasty margin issue with the title on firefox 2.

  • Robert Nyman says:

    Andy,

    Not sure I understand what you mean. It is indeed built in an unobtrusive manner, where all links in the page should point to a page presenting the image if JavaScript isn't available.

  • Andy says:

    Well, my issue isn't the thumbnails, but the picture frame itself, where no graceful degradation takes place.

  • Robert Nyman says:

    Andy,

    In what way? The previous and next links? They should, of course, be linked to a page that shows the correct image, if JavaScript isn't enabled (which would require some server logic, which isn't really applicable for the demo).

    The start slideshow link, as mentioned above, should be hidden through CSS at load, and then enabled through JavaScript. It doesn't happen automatically through PictureSlides as of now, but will be in the next version.

  • It wasn't really a show-stopper, but I've checked out the demo page and it works like a charm now πŸ™‚ Thanks!!

  • Robert Nyman says:

    Jennifer,

    No, thank you for helping me make it better! πŸ™‚

  • Andy says:

    Robert,

    My point was that if your script needs HTML that only makes sense when being driven or changed by JavaScript, generate it with JavaScript.

    But seeing as you've now explained that it will fall back on server-side scripts, I guess everything's fine. Not my personal preference, but fine nonetheless.

  • Robert Nyman says:

    Andy,

    The idea was to be able to offer non-JavaScript users as much of the functionality as possible, hence having it in the HTML.

    But, the start-slideshow link shouldn't be there, since it's JavaScript-dependent, so I'll remove that in the next version. I just want to wait a couple of days to see if any other potential fixes needs to be done first.

  • ENKi says:

    I'm new bird of ASP.net and found your code is VERY interesting.

    I know how to retrieve data from DB and populate to somewhere but i dunno how do i dynamically generate the image information.

    I don't understand what do u means by "juz need to crate an array like this (after the JavaScript file has been included)"

    Clues or Guideline is highly appreciate…. thx a lot

    Kindly refer to what you have posted in "javascript.internet.com"

    If you want to dynamically generate the image information on the server through ASP.NET or PHP, you just need to create an array like this (after the JavaScript file has been included):

    // In a JavaScript file

    JaS.images : [

    ["1.jpg", "Bat bridge in Austin", "Bridge"],

    ["2.jpg", "Blossoming tree", "Tree"],

    ["3.jpg", "Bat bridge from below", "Bridge"],

    ["4.jpg", "Birds", "Birds"]

    ]

    // In a JavaScript block

    JaS.images = [

    ["1.jpg", "Bat bridge in Austin", "Bridge"],

    ["2.jpg", "Blossoming tree", "Tree"],

    ["3.jpg", "Bat bridge from below", "Bridge"],

    ["4.jpg", "Birds", "Birds"]

    ];

  • Robert Nyman says:

    ENKi,

    Firstly, I haven't posted at javascript.internet.com, it was someone else.

    Second, the code you mention is the old JaS code, and not the new PictureSlides code. Please look at the implementation instructions and the demo pages.

  • ENKi says:

    Hi robert,

    Thx for your reply but i still found the old one is more suitable for my requirement since there is tags compatible (allow user to select his desired tag)

    Last but not least, i still go no idea how do i populate my array list to javascript file (*.js) in order to dynamically generate the image information on the server through ASP.NET

    pls advice… hundred thanks

  • Robert Nyman says:

    ENKi,

    I'm not really sure what to say more: your ASP.NET code needs to generate the code that I show in the example, through a Repeater or something.

Leave a Reply to ENKi Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.