[SOLVED] Automatic Image Resizing + Slideshow

So I’ve got a client that wants a slideshow implemented into his site in which he can change the pictures himself. Here’s my challenge: he wouldn’t understand how to resize a photo even if I were to provide exhaustive documentation.

What I’ve done in the past is simply used PHP Thumb and Lightbox together (example: http://rent2ownhomesonline.com/1591-loma-alta.html ... simply click on any of the thumbnails on the left and you’ll see the larger image). I use PHP Thumb b/c it doesn’t require the client to know how to resize images.

So here’s an example of a simple slideshow I’ve implemented on a site I’m working on now:

http://getsmartt.aldriena.com/ (if this link is dead b/c I’ve migrated the site over from a testing sub-domain to the actual domain, try http://www.getsmartt.com)

My dilemma is how do I put the 2 together? Resizing images on the fly for the client (so they don’t have to) and then output them in a slideshow like on the homepage of this site I’m constructing (http://getsmartt.aldriena.com/)?

My ultimate goal would be for the client to be able to simply insert their images into T.V.’s I set up for that document and the rest of the requirements mentioned above be fulfilled...

Thanks!

Just use Ditto to output your slideshow.js file array. Something like this:



Stick your ditto call (with a template like the above code) in the top of a doc, then copy the rest into the doc. Change the document’s content type to text/javascript or whatever it should be, and then link to that document instead of a file on your server.

That’s what I’d do, at least. I’m not sure if you’ll need the latest beta of Ditto or not to handle the iteration placeholder, but that’s key to getting it to work.

isn’t MaxiGallery can do both?

Hey Brett (a.k.a. The Man Can!),

Yeh, I see the logic...will give it a try. Thnx for the advice. As soon as I complete the project, I’ll post up the example here on the forums.

Thanks again.

Here’s a simple example of getting this to work:

http://bigskygc.aldriena.com/index.php?id=50 (if this link is dead b/c I’ve moved from the testing sub-domain to the actual domain, try http://bigskygc.com/index.php?id=50)

I used a javascript slideshow script found here: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

In the document for the slideshow, I have 3 Image template variables (for this example) in which the client can add their images that are large and have not been resized.

I followed Brett’s explanation above and it works great. Add the Slideshow JS (see link above from Dynamic Drive) to a document in MODx (change the content type to text/javascript). Then in that Javascript document, have a Ditto call which has a TPL with PHP Thumb (http://phpthumb.sourceforge.net/) resizing the images.



the "slideshow" tpl has this:



Create a new document w/image T.V.’s (in this case slideshow_img1, slideshow_img2, and slideshow_img3) in which the client can add their images. On that document, have a link in the head to the JS document you just created with the PHP Thumb call in it. Create a new parent document...the document with the image T.V.’s is a child document of it. On that parent document, have the JS array:



And that’s it!