ANNOUNCE: yet another Slideshow (beta)

[rberinger]

One area I'd like some input on is how to offer reasonable style customization of the whole thing, including the title, overall slide area, controls, etc. without going too crazy. It looks OK right now, but probably should allow more user control.

Great job so far, its really starting to shape up!

My suggestion would be to get rid of the inline styling and add some unique class names to the different sections at the same time allow for custom class names to be used. Then add your own style section for your default classes and the end user can over ride the styles by passing in their own class names and inserting their own style section or using Custom CSS from the control panel.

[neilw]

Great job so far, its really starting to shape up!

My suggestion would be to get rid of the inline styling and add some unique class names to the different sections at the same time allow for custom class names to be used. Then add your own style section for your default classes and the end user can over ride the styles by passing in their own class names and inserting their own style section or using Custom CSS from the control panel.

Agreed on pulling out the inline styles (bad habit I need to break), but I still would like additional customization on a per-slideshow basis. I guess I could provide options to allow the user to provide classes for each of the components and add those classes in addition to the defaults, or something? (yes, I know the last sentence is incomprehensible)

[rberinger]

I guess I could provide options to allow the user to provide classes for each of the components and add those classes in addition to the defaults, or something? (yes, I know the last sentence is incomprehensible)

Mine must have been incomprehensible also. We are almost talking the same thing. But custom style would be in-place not in-addition, If a section is not passed a custom class then it would default to yours. That allows for the most flexability. At that point the user can globally customize by changing your default CSS. Or on a per page basis by adding CSS to the custom css section in control panel and then passing in the class for the sections or adding a style block on the page itself and passing in the custom class names.

[bduran]

This is very cool, NeilW. I have a suggestion and a question:
Suggestion: how about having the option to use the image filename as the caption? In my case, I've got a bunch of images that have no description, but I would like to be able to identify which is being shown in the slideshow.

Here's my question: I'm trying to get into the nuts and bolts of the template. I see that it uses picpage to store a map (still don't fully understand these) from the page reference. What I'm trying to tweak the code to do is accept a list/map?? of image uri's from a SQL query and have it use those images in the slideshow. Am I on the right path or is there a better way to get there?

Thanks again.

[neilw]

This is very cool, NeilW. I have a suggestion and a question:
Suggestion: how about having the option to use the image filename as the caption? In my case, I've got a bunch of images that have no description, but I would like to be able to identify which is being shown in the slideshow.

That's a good idea. I'll add that when I get around to it (how's that for commitment? )

Here's my question: I'm trying to get into the nuts and bolts of the template. I see that it uses picpage to store a map (still don't fully understand these) from the page reference. What I'm trying to tweak the code to do is accept a list/map?? of image uri's from a SQL query and have it use those images in the slideshow. Am I on the right path or is there a better way to get there?

Sure. Your biggest problems will be that, with URIs rather than wiki file links:
1) You won't know the size of each image, and will be unable to intelligently expand them to fit the available space while maintaining aspect ratio. At least, not without some new JavaScript-side coding.
2) You won't have easy access to the webview, so if the image files are large it could take a while to start up the slideshow.

From the script, lines 184-186 create a sorted list of pictures, where each element is a wiki file object. You'll replace that with a simple list of URIs, which can be easily obtained from an SQL query (fill in your own code there). Now, in the foreach loop on line 188, you'll be iterating over URIs, instead of file objects. So any reference to "p" inside that loop needs to be reworked.

Lines 189-202 do the intelligent resizing. You'll replace all of that with just a single <img> element:

<img width=(width) height=(height) src=(p) />;

Finally, line 203 generates the caption, which you'll now replace with:

var uripath = uri.parts(p).path;
var caption = <div class="caption" style="display:none"> uripath[#uripath-1] </div>;

This sets the caption as the name of the file (not the whole URI, just the name).

That should do it. Part of the whole raison d'etre of Slideshow is to support image aspect ratios properly, which is why it focuses on wiki file attachments rather than URIs, but you can of course hack it to your own needs.

[bwhiting]

Anyone having luck getting this to work on 2010? Specifically Core?

Doesn't appear to work on developer.mindtouch.com either.

B

[neilw]

Fixed.

Bug filed.

[raine]

Hi,

I had a problem with this template. Firebug gave this error message when loading the page:

$slideshow.cycle is not a function
http://developer.mindtouch.com/App_Catalog/Slideshow%3A_customizable_slideshow_of_images_attached_to_a_page#
Line 56

I found out a workaround.

1. Download latest JCycle-plugin.
2. Attach to template
3. Add attachment-url to row: 163 on the template.

Cheers, Raine

[neilw]

Hmm, I'm not sure why you should have had that problem.

In any case, Slideshow was originally implemented using the bad methodology of pointing to the attachments on the developer wiki. What you've done by attaching the js file to your own attachment is far better.

My newer templates (or updates) automatically find the file attached to the template file, no need to put in explicit URLs. I'll have to fix up slideshow to do that as well (plus clean up the awful temporary documentation page, yeesh).

[knoxti]

The slideshow is great. Unfortunately, it cannot be viewed by users with IE or Chrome.