Self-contained Slideshow?

Slideshow Bob · September 02, 2006, 05:16:52 PM

Can anybody share a script they've created to make a (preferably random) slideshow from the CM albums?

I'm trying to set-up an HTML page that includes a fade-in/out slideshow. Here's the hardcoded javascript that works for a non-CM app. It allows for the slideshow to be called within an IFrame on a page.

<script>
var slideShowSpeed = 6000
var crossFadeDuration = 4
var Pic = new Array()

var a = 0
Pic[a++] = '0506a.jpg'
Pic[a++] = 'Museum.jpg'
Pic[a++] = 'Kitchen.jpg'
Pic[a++] = '0506f.jpg'
Pic[a++] = 'Tulip.jpg'
Pic[a++] = '0506h.jpg'
Pic[a++] = '0506j.jpg'
Pic[a++] = '0506k.jpg'
Pic[a++] = '0506l.jpg'
Pic[a++] = '0506m.jpg'
Pic[a++] = '0506p.jpg'
Pic[a++] = '0506q.jpg'

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

<body onload="runSlideShow()">

vuud · September 02, 2006, 07:00:28 PM

I know nothing about iframes... what part of that do you need cpmFetch to produce? The list of images? That can be done pretty easily. Let me know if thats all you need.

Slideshow Bob · September 02, 2006, 07:33:04 PM

>I know nothing about iframes... what part of that do you need cpmFetch to produce? The list of images? That can >be done pretty easily. Let me know if thats all you need.

That would definitely be helpful! I guess ya really don't need an IFrame for this. The code I uploded in the original message can be called with an IMG tag - for example:

<img src="0506a.jpg" name='SlideShow' width=230 height=229>

If would be ideal if there was a way to encapsulate the slideshow functionality so it would be callable in a similar way. I'll bet something like that would be a very popular feature in a future version -- if it's not already in the works

vuud · September 03, 2006, 02:12:13 AM

Quote from: scifiguy20904 on September 02, 2006, 07:33:04 PM
>I know nothing about iframes... what part of that do you need cpmFetch to produce? The list of images? That can >be done pretty easily. Let me know if thats all you need.

That would definitely be helpful! I guess ya really don't need an IFrame for this. The code I uploded in the original message can be called with an IMG tag - for example:

<img src="0506a.jpg" name='SlideShow' width=230 height=229>

If would be ideal if there was a way to encapsulate the slideshow functionality so it would be callable in a similar way. I'll bet something like that would be a very popular feature in a future version -- if it's not already in the works

I would really love to include this sort of functionality, at the least as an example for cpmfetch... But I need a concrete example to start with.

If I understand you, that IMG tag and the code above will work? If so, I will work something up that feeds it or something.

Thanks for your contribution to the cause

cgc0202 · September 03, 2006, 03:02:33 AM

Quote from: vuud on September 03, 2006, 02:12:13 AM

I would really love to include this sort of functionality, at the least as an example for cpmfetch... But I need a concrete example to start with.

If I understand you, that IMG tag and the code above will work? If so, I will work something up that feeds it or something.

Thanks for your contribution to the cause

Wow, I requested something similar in the dev version page. I do not want it to be an iframe though, but just like a traditional photobox, just like the one produced by the CPMFetch. Here are some features that would go with it. Let us start with one large photobox presented as the feature photo on a page:

The feature photo box will automatically create a slide-show of a set of photos from an album, category, etc., much like how the automated slide show is done in CPG, in its simplest format.

.

A more ideal case, is a random and automated presentation of photos, so that a visitor will not always be confronted with the same beginning to end, everytime (s)he revisits a page. A more complex presentation is one by flickr- as discussed here: http://forum.coppermine-gallery.net/index.php?topic=7920.0|%20flickr%20%22single%20photo%20box%22%20presentation

.

There are situations however, where a series of photos need to be presented in sequence, for example this mating dance: http://www.bios.treasuresoftheinternet.org/ecos001/displayimage.php?album=12&pid=349&slideshow=5000 .

Note: The above is an unpublished album, since I have yet to ask permission from the photographer before it could be shown to the public. Also, the PhotoGallery itself is still in demo stage, and not ready for public viewing, so I will remove the link, after Vuud responds.

.

The above two examples, random vs. sequential clearly indicates that both options must be available. Personally, I think this may be more simply achieved through CPMFetch.

.

I think this is doable already with CPMFetch, and I have seen it done in a number of automated slide show presentation. This involves the presentation of photo, with its related text caption, photographer, and brief description.

If you can make the process do a fade-in, fade out, so much the better. Vuud, there was flash application that I saw which is even more complex, but can have more educational features. I try to refrain from using "flash" applications because not everyone has, or some intentionally turn off their flash option.

CGC

Slideshow Bob · September 03, 2006, 05:04:54 AM

Yah, the IFRAME thing was an (unintentional :) red herring. I changed the subject to reflect that. Things will work s'long as the code can be called through an HTML tag.

I'm not sure what's needed for a more concrete example - but I can try to spell it out better. Let's say we've got a gallery with 100 pics - pic001.jpg ... pic100.jpg where Category=1. When placed in an HTML page outside of the CM directory, the following tag:

<img name='SlideShow' width=230 height=229 count=5 cat=1>

(or something similar to it)

will randomly pull/show 5 pictures from the category 1 gallery. So, the first time the page is loaded, the following pictures might show up as a slideshow:

pict053.jpg, pict010.jpg, pict070.jpg, pict037.jpg, pic078.jpg

where each picture overlays the next

the next time the page is loaded, the following pictures might show up as a slideshow:

pict027.jpg, pict003.jpg, pict006.jpg, pict078.jpg, pict029.jpg

Any user who views the page will see a different random list of pics (as opposed to always getting the same 'random' list the first time they view the page)

Does that make any more sense?

vuud · September 03, 2006, 06:24:57 AM

Alright, basically I like the idea of making an easy way to have a slideshow, or series or pictures, or something like that.

I also recognize there is probably a million ways to do it, and everyone will have his or her own favorite.

I also know next to squat about flash, although I did make a cool little thing once that I sent to my boss while promoting some internet stuff I wanted to do... It bascially was all black, with big white letters fading in and out in sequence that said "Make the Internet your bitch"... then .... "Slap dat bitch". All to some soothing Rob Zombie tune (I think it was Dragula). Mind you it was all in fun, and I was much younger then. It was funny though - and he did approve the project.

Anyway, I digress.

So I am going to probably work into CpmFetch some code that provides helpful calls to get image listings. Pretty much I envision it to be another return type, so you can use it with all the functions already in place.

Something like:

$objCpm->setReturnType("ImageList");
$list = $objCpm->getRandomPhotos();

$list would then contain:
/path/image.jpg Subtitle here if you wanted one

For each.

Then again, I already have a datatype that does all that except the full image path, so maybe I will just add that in there. No sense in re-inventing something. But this is all it takes currently to output the listing into that Pic[a++] format.

Code Select


$objCpm->cpm_setReturnType("resultset");
$data = $objCpm->cpm_viewLastAddedMediaFrom(1000, 1000, "");

foreach ($data as $row) {
   $imagename = $objCpm->cpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"thumb_");
   print "Pic[a++]='" . $imagename . "'\n";
}

So this would output the list. Of course I did not test this, but the concept stands. The most I would be integrating into CpmFetch directly is the getImageToUse call...

Now including it as a code fragment for people to put into web pages would be okay with me. But I am not out to provide a fully working application like CPG... this is developers library, not trying to be any more. I want this to be a base for people to be creative from... make life easier, etc...

Anyway, thoughts?

Slideshow Bob · September 03, 2006, 07:26:12 AM

Hmm, I think we're onto something here. One detail that's eluding me though is how to combine the Javascript with the PHP. Anybody have any ideas?

vuud · September 03, 2006, 03:10:07 PM

Quote from: scifiguy20904 on September 03, 2006, 07:26:12 AM
Hmm, I think we're onto something here. One detail that's eluding me though is how to combine the Javascript with the PHP. Anybody have any ideas?

You put your javascript in the page like normal, then put the php code where you want the list of images generated (the cpmfetch calls go smack in the middle of the javascript block)

Good?

Slideshow Bob · September 03, 2006, 03:48:15 PM

I wish it were that easy. As far as I understand, PHP is server side and gets executed first. Javascript is client side and kicks in afterwards. However, having the two interact is possible - but complicated.

I wonder if it would make sense to do the whole enchillada in PHP?

P.S. Just for laughs, I tried mixing the two, but it was definitely a no-go...

vuud · September 03, 2006, 05:39:09 PM

Quote from: scifiguy20904 on September 03, 2006, 03:48:15 PM
I wish it were that easy. As far as I understand, PHP is server side and gets executed first. Javascript is client side and kicks in afterwards. However, having the two interact is possible - but complicated.

I wonder if it would make sense to do the whole enchillada in PHP?

P.S. Just for laughs, I tried mixing the two, but it was definitely a no-go...

Yes, technically you are right. However, you are also confused.

Think of it this way...

CLIENT REQUEST -> WEB SERVER -> LOADS PAGE IN SERVER -> EXECUTES PHP -> RETURNS TO CLIENT -> CLIENT EXECUTES JAVASCRIPT.

Okay, so the PHP executes on the server and creates all of those Pic[a++] lines for you, and places them into the content that is being returned. So if you have a PHP page that has a bunch of HTML in the beginning of it, the client will see that first.

So yes, PHP is executing first (and on the server), but our PHP is generating javascript code for us to execute later on the client side.

I am trying to get a working copy, and I have it looking right, but for some reason its not running in my browser. Will post an example page when I get it working.

Sigh

vuud · September 03, 2006, 08:10:34 PM

This works okay on my setup. There is a bug in there that it starts off with a blank image, so if you really want it to look decent you have to set something in the image tag.

I would play around with it and fix that, but someone more versed in javascript could probably do it faster.

Hope this helps.

BTW: document.all is not really a great way to go - IIRC it was used to test for IE, but other browsers now support it... so future generations should fix that up.

Code Select


<html>
<head>
<script>
var slideShowSpeed = 3000
var crossFadeDuration = 4
var Pic = new Array()
var a = 0

<?php
include "./cpmfetch.php";

// For 1.6.x releases you need to add your partial url into the cpm() call below.
$objCpm = new cpm();
$objCpm->cpm_setReturnType("resultset");
$data = $objCpm->cpm_viewLastAddedMediaFrom(1000, 1000, "");


foreach ($data as $row) {

//For 1.6.x versions uncomment the following line, then comment the one following it (add // to the start of the line)
// $imagename = $objCpm->cpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"normal_");
   $imagename = $objCpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"normal_");
   print "Pic[a++]='" . $imagename . "'\n";
}
?>

var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
   preLoad[i] = new Image()
   preLoad[i].src = Pic[i]
}

function runSlideShow(){

  if (document.all){
     document.images.SlideShow.style.filter="blendTrans(duration=2)"
     document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
     document.images.SlideShow.filters.blendTrans.Apply()
  }

  document.images.SlideShow.src = preLoad[j].src

  if (document.all){
     document.images.SlideShow.filters.blendTrans.Play()
  }

   j = j + 1
   if (j > (p-1)) j=0
   t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>
<body onload="runSlideShow()">

<img src="" name='SlideShow'>

</body>
</html>

Edited after the post, thanks to slideshow bob (Ahhhh - I get it, funny name) for the suggestions.

vuud · September 03, 2006, 08:23:12 PM

Quote from: cgc0202 on September 03, 2006, 03:02:33 AM
A more ideal case, is a random and automated presentation of photos, so that a visitor will not always be confronted with the same beginning to end, everytime (s)he revisits a page. A more complex presentation is one by flickr- as discussed here: http://forum.coppermine-gallery.net/index.php?topic=7920.0|%20flickr%20%22single%20photo%20box%22%20presentation

Use the cpmfetch random type functions like above

Quote
There are situations however, where a series of photos need to be presented in sequence, for example this mating dance: http://www.bios.treasuresoftheinternet.org/ecos001/displayimage.php?album=12&pid=349&slideshow=5000 .

Note: The above is an unpublished album, since I have yet to ask permission from the photographer before it could be shown to the public. Also, the PhotoGallery itself is still in demo stage, and not ready for public viewing, so I will remove the link, after Vuud responds.

I dunno... once you retrieve the data you could use php to sort it by filename or something? Are you assuming they were added into CPG in the correct order?

Quote
The above two examples, random vs. sequential clearly indicates that both options must be available. Personally, I think this may be more simply achieved through CPMFetch.

For your case I guess it clearly must be available, but this is the first case that actually demonstrated needing that that I have seen... so its not exactly a commonly requested thing. Sorting the results is on the scope, so maybe that would solve your problem.

Quote
I think this is doable already with CPMFetch, and I have seen it done in a number of automated slide show presentation. This involves the presentation of photo, with its related text caption, photographer, and brief description.

I would think so... I am not sure how much data comes back in that call, you'd have to check. You could probably access the subtitle routines directly like the getImageToUse call - then again, they may already be in there...

Nope, just checked - the descriptions for subtitles and alt are created during the rendering of the table, so they are not done for passing back a result set.

Once you have a row back call something like this:
$caption = $objCpm->createDescription("Pattern of %a and stuff",$row);

I will probably add that to the dataset at somepoint in the future...

Quote
If you can make the process do a fade-in, fade out, so much the better. Vuud, there was flash application that I saw which is even more complex, but can have more educational features. I try to refrain from using "flash" applications because not everyone has, or some intentionally turn off their flash option.

Fade in / fade out is an MS/IE thing which I don't use and don't have Windows to even test it on. Your on your own there. :p Like I mentioned before I will probably provide a reference implementation, but I don't want to make creating slideshows a big part of cpmfetch.

Vuud

Slideshow Bob · September 04, 2006, 09:37:32 PM

I'm probably doing something dumb (it won't be the first time :), but this code doesn't work on my site at all. I've tried putting it into a file named test.html and in a file named test.php. I also tried changing the include from:
include "./cpmfetch.php";

to

include "/Coppermine/cpmfetch/cpmfetch.php";

with no luck. When I call it from the .htm file, all I get is a broken icon. When I call it from the .php file, the page is just blank. Any ideas?

Quote from: vuud on September 03, 2006, 08:10:34 PM
This works okay on my setup. There is a bug in there that it starts off with a blank image, so if you really want it to look decent you have to set something in the image tag.

I would play around with it and fix that, but someone more versed in javascript could probably do it faster.

Hope this helps.

BTW: document.all is not really a great way to go - IIRC it was used to test for IE, but other browsers now support it... so future generations should fix that up.

Code Select Expand
<html> <head> <script> var slideShowSpeed = 3000 var crossFadeDuration = 4 var Pic = new Array() var a = 0 <?php include "./cpmfetch.php"; $objCpm = new cpm(); $objCpm->cpm_setReturnType("resultset"); $data = $objCpm->cpm_viewLastAddedMediaFrom(1000, 1000, ""); foreach ($data as $row) { $imagename = $objCpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"normal_"); print "Pic[a++]='" . $imagename . "'\n"; } ?> var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } </script> <body onload="runSlideShow()"> <img src="" name='SlideShow'></td> </body> </html>

vuud · September 04, 2006, 10:31:59 PM

Quote from: Slideshow Bob on September 04, 2006, 09:37:32 PM
I'm probably doing something dumb (it won't be the first time , but this code doesn't work on my site at all. I've tried putting it into a file named test.html and in a file named test.php. I also tried changing the include from:
include "./cpmfetch.php";

to

include "/Coppermine/cpmfetch/cpmfetch.php";

with no luck. When I call it from the .htm file, all I get is a broken icon. When I call it from the .php file, the page is just blank. Any ideas?

* It must be in a file named something with .php as the extension

* I did that using the development version, so if you are using the stable version:

This line:
$objCpm = new cpm();

Will need to have the partial URL to your CPG directory:
$objCpm = new cpm("/Coppermine");

(If that is indeed your CPG directory)

* The include :
include "./cpmfetch.php"

Must be correct so that it can find cpmfetch.php. The one above assumes your page is in the same directory as cpmfetch.php. Adjust it to reflect your particular slice of reality.

One last thing... when I run it, there is always a broken icon there for a few seconds before it switches. Like I said, in that post - I did not tweak everything, just got the proof of concept working.

Vuud

Davide Renda · September 04, 2006, 11:14:50 PM

I was curious and tried this code (I use the dev 193 version). I've created a test.php file, chmoded it 755, placed in the cpmfetch directory and I have following errors:

- if I leave $objCpm = new cpm(); as it is I obtain a "simple" INTERNAL SERVER ERROR etc etc and nothing else

- even if I shouldn't, if I change $objCpm = new cpm(); into $objCpm = new cpm(/); (my cpg is on the root) I obtain

Code Select

Parse error: parse error, unexpected '/', expecting ')' in /web/htdocs/www.daviderenda.com/home/cpmfetch/test.php on line 11

Any idea?

vuud · September 04, 2006, 11:55:14 PM

Quote from: lontano on September 04, 2006, 11:14:50 PM
I was curious and tried this code (I use the dev 193 version). I've created a test.php file, chmoded it 755, placed in the cpmfetch directory and I have following errors:

- if I leave $objCpm = new cpm(); as it is I obtain a "simple" INTERNAL SERVER ERROR etc etc and nothing else

- even if I shouldn't, if I change $objCpm = new cpm(); into $objCpm = new cpm(/); (my cpg is on the root) I obtain
Code Select Expand
Parse error: parse error, unexpected '/', expecting ')' in /web/htdocs/www.daviderenda.com/home/cpmfetch/test.php on line 11

Any idea?

Well, for the latter issue... just putting a / inside the () will cause a problem. You would want to enclose it in quotes at least. But if your cpmfetch directory is inside your CPG directory (even if its in the root) do not use that. Leave it blank.

Internal Server Error is pretty heavy. If you can check your servers error and / or access logs for a clue as to why it is doing that. Those errors are typically a configuration issue mostly, but can be other things. Sometimes it is other things, but its wierd that PHP is parsing the file, then choking on something.

Slideshow Bob · September 05, 2006, 12:20:23 AM

I have a feeling this must only be working with the development version. I've tried a lot of variations (even putting the test.php in the cpmfetch directory) and all I get is a blank page. A source view of the page seems to contain only the first few lines of the file - stopping right before the <?php line.

Ah well, showing the same 5 photos in a slideshow each time isn't all that bad... :(

If anybody else runs across something workable, pls pass along. thx!

vuud · September 05, 2006, 02:40:32 AM

Quote from: Slideshow Bob on September 05, 2006, 12:20:23 AM
I have a feeling this must only be working with the development version. I've tried a lot of variations (even putting the test.php in the cpmfetch directory) and all I get is a blank page. A source view of the page seems to contain only the first few lines of the file - stopping right before the <?php line.

Ah well, showing the same 5 photos in a slideshow each time isn't all that bad...

If anybody else runs across something workable, pls pass along. thx!

Ah phooey, your right... the dev version syntax has changed on some of the calls... In the stable version these lines need to be modified:

Code Select

$imagename = $objCpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"normal_");

to

Code Select

$imagename = $objCpm->cpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"normal_");

I think nothing else relevant has changed.

Slideshow Bob · September 05, 2006, 02:47:01 AM

Hiya. I wasn't using cpmFetch for anything else so I switched over to the development version. I just posted some feedback in the development section.

coppermine-gallery.com/forum

News:

Self-contained Slideshow?

Slideshow Bob

vuud

Slideshow Bob

vuud

cgc0202

Slideshow Bob

vuud

Slideshow Bob

vuud

Slideshow Bob

vuud

vuud

vuud

Slideshow Bob

vuud

Davide Renda

vuud

Slideshow Bob

vuud

Slideshow Bob