Acidfree feature request: Slideshow

No plans currently, but I am open to patches. Anybody else care about this feature?

I was going to do a patch for this that used javascript forward to send the user to the next image every N seconds. Probably in the next week. You want to give me any direction on this as to how you would like to see it done? Or should I just send you the patch (in this forum) when I have it done?

EvilBill,
What I think would be a decent UI:

• add a setting item to admin/acidfree/settings to enable/disable slideshows
• add a setting item to admin/acidfree/settings for default slideshow timing
• have a slideshow javascript link if the slideshow is not playing that changes to a stop link when the show has started. I think this should go at the bottom of the page so it doesn't detract from the view.
• have a dropdown? to select timing
• have a loop checkbox?

Feel free to comment/object to my ideas. I don't mind a bit of discussion on the matter.

I forgot to say that you can feel free to post a patch here when you have something you would like to share.

I would like a slideshow feature too:-)
Sorry I'm not up to programming in php...

I will code this. It will take a while because I first need to set up a dev drupal box where I can get the CVS versions of everything. And I plan on doing this with AJAX. The gallery2 slideshow code preloads every image so it can take a while for it to start. I think AJAX would be slick because it would make it much more seamless between each picture.

But life happens and I am still reading up a little on AJAX too... so don't expect anything too soon.

Also, I welcome the feature requests. So far everything I have seen seems like a good idea.

You may want to check out the dojo toolkit at http://dojotoolkit.org/. Besides being an AJAX toolkit, it includes a slideshow widget as a demostration of what it can be used to do. It might speedup development of a slideshow feature for Acidfree. (I hope to try this for the standard image module)

yogadex was looking at Coppermine and I think it is also worth looking at Linpha - http://www.linpha.org/
I used a beta of this as a standalone gallery. It has some good features including a nice configurable slideshow and the best import system. To upload all I had to do was set some system configurations then ftp a folder up to a specific location; linpha did the rest.
It is not possible - and the developers say its too hard - to use linpha within a cms like drupal but it does have some great features.

Not that I want acidfree to get too complex. Although something I REALLY need is a nice favourites system.

> To upload all I had to do was set some system configurations then ftp a folder up to a specific location; linpha did the rest.

Well, acidfree already has this feature. In the mass import page there you can find "Import local" down at the bottom of the page. This lets you import files that are on your servers directory... all you have to do is FTP the photos and do a "Mass Import" using this option. And although it's not completly automatic it serves the purpose.

Initially I thought it would be ideal if we would like to put the AJAX code into includes/pager.inc since pager.inc knows what the previous and next nodes are. However, I think it will be better to add an acidfree subroutine that will extract the picture URLs in order and populate a JavaScript array with the URLs. It needs to have an index that points to the current picture of when the slide show was started. The URLs should really be coded for the handler below to know which picture to use.

A function will need to be added that ala the "file_transfer" function in includes/file.inc will call ob_end_clean (PHP built in) and then spit out basic XML with embedded HTML. That is we will write our own headers and a little html that will contain an img tag that points to the configurable sized image (medium by default) as would normally be referenced by the file manager. While we should check the permission of each image when we form the above javascript list, we will check it again and return an "access not allowed" message in place of the image when such an instance occurs. Also note that we might want to alter the file.inc so that it tells the browser it is ok to cache pictures to save bandwidth esp. if we loop the sideshow. Take a look at includes/bootstrap.inc to see where drupal says NO CACHING! EVER!

Go here: http://dhtmlnirvana.com/ajax/ajax_tutorial/ to page 21 for an explanation about why we will do this for our AJAX image replacement. Note that the tutorial is AJAX so you may have to wait for the text to load if you quickly click to page 21. The text starts with "Thus far we have learned quite a few things..." and the "View Example" link should be to example 6.

To make the image transition seamless, we will have three divs. One for the previous image, one for the current image, and one for the next image. We will treat them as a ring buffer and use display: none while we are loading the image.

In the javascript code, we will want to keep track of how long we have been displaying the current image. If the user has a timeout of 1 second, then we do not want to immediately jump to the next picture every second. We want to wait until it has been loaded and then see if we are past the timeout or not. Note: I am going to have to research this because I am not sure if there is a way in javascript to tell when e.g. an image has finished loading. We can easily know when the image container has finished loading from the xmlhttprequest but not the image data its self. (anyone?)

We should also be looking at css3 opacity so we can do a fade between images. There are different names for it depending on the browser version: IE "alpha", Mozilla < 1.6 "-moz-opacity". See http://www.domedia.org/oveklykken/css-transparency.php

There should be controls for the sideshow that effect the javascript. That is the time between slides pull down should set a javascript variable and be dynamic without a page reload. The loop or not check box should also not require a page reload.

Whatever ajax library you include, be sure that it is GPL. Otherwise it cannot be added to the module. It does make me happy to see others with a desire to contribute. I am excited to see what you come up with.

I will second the desire for a slideshow feature.. Seems like this could be done more easily in 4.7 since it already includes AJAX... Anyone working on this?

cheers...

I've had some success in another CMS embedding the following GPL-licensed slideshow:

http://www.barelyfitz.com/projects/slideshow/index.php/1

With some CSS tweaking to bring it in-line with the Acidfree look, it may be a nice addition. I have a need for this feature in Drupal, but I don't know enough about it and Acidfree to do the integration yet. :(

Can this be integrated somehow?

http://drupal.org/node/59469

well drubeedoo, i used that javascript from the link you gave and came up with a very quick little slideshow module for acidfree.. I've attached it.. just dump the contents of the zip into your acidfree folder..

i finished it all of 5 minutes ago, so it's very likely that it has a bug or something...

cheers..

speaking of bug... I forgot to add the slide titles...

q0rban,

It works nicely. I have a few suggestions.

1. Theme the main slideshow page (e.g. theme_af_slideshow())
2. Require Acidfree (you can see how Acidfree requires Filemanager in acidfree_help using module_exist())
3. Call _acidfree_get_children rather than duplicating the code
4. Maybe use a drop-down or "faster"/"slower" javascript links to control the speed so there is more control than just 3 or 10 seconds
5. fix up code to create an html anchor in theme_af_slideshow_link to use l() instead of your own hardcoded html. (I am pretty sure what you are looking for is the attributes array to add target=_blank.)

Fix these up and I will add it to the Acidfree distribution. And just to be sure, I need a confirmation that all the code is either original code from you or GPL. (it looks like the javascript file has a big GPL header already).

1. Theme the main slideshow page (e.g. theme_af_slideshow())
2. Require Acidfree (you can see how Acidfree requires Filemanager in acidfree_help using module_exist())
3. Call _acidfree_get_children rather than duplicating the code
4. Maybe use a drop-down or "faster"/"slower" javascript links to control the speed so there is more control than just 3 or 10 seconds
5. fix up code to create an html anchor in theme_af_slideshow_link to use l() instead of your own hardcoded html. (I am pretty sure what you are looking for is the attributes array to add target=_blank.)

Hi vhmauery... Good catch on #5.. I don't know what I was thinking... It's been a while since I wrote a module... As you can see this was a very quick implementation..

I don't know if I'll have time to set up the theme functions like you suggest.. I just needed a quick fix... I didn't even bother seperating the css into a file, which would be smart as well...

As far as number 3... The way I understand it is that if a function has an underscore under it, it is a private function, hence the duplication... It would be nice if those two functions were made public in acidfree (_acidfree_get_children(), _acidfree_get_small_url())

The attached has #2 and #5 fixed..

And btw, all code is original or GPL...

cheers..

q0rban,

I made some minor modifications to af_slideshow. One was to rename it to acidfree_slideshow. I also added your name and a GPL header to the module file. I split out the css into its own file to make it easier for theme overrides. I also made the main slideshow page use theme('page',...) so it looks like it is still part of drupal. I also modified the controls so it uses a dropdown and has slower/faster links. I also updated the form so it uses the forms API. Much of my updates were to make it feel more drupalish.

As far as the private/public API of Acidfree goes, I think since acidfree_slideshow gets distributed as a contrib module for Acidfree, I think it is safe to say it can make use of some of the private API of Acidfree.

I have posted a patch to let you see what I have in mind. Let me know what you think.

Looks good.. I made a few slight changes...

Is the absence of the <body onLoad="SLIDES.update()"> going to be a problem? That was the only reason I didn't theme the page...

it would be nice to wrap the slideshow link in a div and class, and add a text-align: center; line to acidfree.css... That way we can lose the <center> tag... thoughts?

Thanks for.. ahem.. "drupalizing" the module...

Okay, I made two more nice little changes. Rather than having the centered, out-of-place slideshow link, I put it in its place -- the local tasks menu for that album. I think that was 'The Right Thing to Do' in this case. Things you do with an album: view, album contents, slideshow, and edit. This way, I also don't need to add an unused css entry (if the slideshow module is not enabled) to the main acidfree.css file. Two wins.

The other change I made was to only allow photos to be in the slideshow. As I was going to bed last night, I realized that you had excluded albums, but not all non-photos from your selection. Actually, there wasn't a good way to do that, so I made one. I guess that's what you get for working with the maintainer. So I have gone ahead and committed this to the 4.7 branch of CVS as acidfree.module revision 1.62.2.36. You can check it out now or wait for 12 hours or so for it to be repackaged. Congratulations, you are the first person to give me a contrib module. Thanks for working with me.

Sounds great! I hadn't thought about the "non-photo" issue...

Thanks for being so quick to jump on this stuff, it was great working with you....

THANKS FOR DEVELOPING THIS!!