Revamped Slideshow
Update: The slideshow viewer now has its very own homepage. Check it out!
We recently updated the TripTracker photo slideshow interface. For a sample, click on the first thumbnail below and then the Play button:
(photos taken from the Thailand trip)
Feel free to use the JavaScript slideshow on your own personal web space (please have a look at the terms at the top of the JavaScript file). The interface to the slideshow is simple — insert the script source, initialize the viewer and photo links and then call the viewer.show() method. Here is an example:
<script type="text/javascript" src="http://slideshow.triptracker.net/slide.js"></script>
<script type="text/javascript">
<!--
var viewer = new PhotoViewer();
viewer.add('/photos/my-photo-1.jpg');
viewer.add('/photos/my-photo-2.jpg');
viewer.add('/photos/my-photo-3.jpg');
//--></script>
<a href="javascript:void(viewer.show(0))">Slideshow</a>
We’re also providing a bookmarklet that allows you to try out the slideshow on other web sites:
- Bookmark the following link: Slideshow Bookmarklet (e.g. by dragging the link to your bookmark toolbar).
- Visit a page with photo thumbnails, such as the page you are just reading.
- Click on your bookmark to bring up the slideshow.
Note that the bookmarklet will only work properly on web pages that include thumbnails linking directly to the full-sized photos. In other cases, the viewer needs to be initialized explicitly using the method described above.
September 13th, 2006 at 6:04 pm
Thanks Braco, so should i redownload the slide.js file? I assume that’s what you will be updating? I downloaded the file for my own server just because I was afraid you would take it down one day when I still needed its use.
September 13th, 2006 at 7:54 pm
This is great…
1 question
how do I make 2 slideshows on the same page? in other words use the same script 2 times on the same page.
Thanks!
September 13th, 2006 at 8:25 pm
I can’t seem to get this to work anyway I try it…
-with the .js file on my server or with your file
-with the extra “)” or without
-I’m not using the rich text editor in my wordpress (because it was stripping the js src out)
-I tried it with the pics in the root and /photos/picture.jpg neither worked
-when you click the link it does nothing… doesn’t open up anything.
This is the code I’m putting in my post:
var viewer = new PhotoViewer();
viewer.add(“/photos/picture 335.jpg”);
viewer.add(“/photos/picture 330.jpg”);
viewer.add(“/photos/picture 332.jpg”);
(Slideshow
(parentheses added to prevent this from becoming a link)
Any idea what I’m doing wrong?
Anything would be appreciated!
Thanks in advance,
-Doc
September 13th, 2006 at 8:26 pm
It would appear the comment thing took half the code away… my bad, I didn’t do pre…
var viewer = new PhotoViewer();
viewer.add(“/photos/picture 335.jpg”);
viewer.add(“/photos/picture 330.jpg”);
viewer.add(“/photos/picture 332.jpg”);
Slideshow
September 13th, 2006 at 8:29 pm
wow… makes me look like the novice… ugh…
(
(
(
var viewer = new PhotoViewer();
viewer.add(“/photos/picture 335.jpg”);
viewer.add(“/photos/picture 330.jpg”);
viewer.add(“/photos/picture 332.jpg”);
(
(Slideshow
(parentheses added to prevent me from looking like a moron and taking up your comment space
)
September 13th, 2006 at 8:30 pm
Ok fine… it’s the same code as you have there, only with MY picture links… since I can’t figure out how to use this comment thing…
September 13th, 2006 at 11:25 pm
Any way for someone to make a WordPress plugin for this?
September 14th, 2006 at 6:53 am
I can’t get this to work, either. I’m copying and pasting the code as is, and then changing the image locations to refer to my directory structure and files.
doc misterio, I think we may be having the same issue.
Do we need to add an onLoad command to the body tag, or something?
you can see mine at http://www.plexcomols.com/test/bdp/weddings.shtml
There’s a slideshow link just above the thumbnails.
September 14th, 2006 at 7:04 am
Hi, bdizzlefizzle! Looking at your HTML source, there appear to be some strange leading characters where you copied the JavaScript. Try deleting those. The bookmarklet also appears to be working on your page (at least in my browser).
September 14th, 2006 at 7:22 am
@Kenny
> Are there methods available to affect the behavior[...]
Please see the updated post and let us know if that fits your needs.
@Jonathan
> so should i redownload the slide.js file
I suggest you run the JavaScript off our host, since that will make upgrades much easier.
@randy
> how do I make 2 slideshows on the same page?
This is currently not supported, but it is definitely useful so we’ll add support shortly. We’ll keep you posted!
@doc misterio
> Iâââm not using the rich text editor in my wordpress
Are you sure WordPress is not modifying the JavaScript in any way? We were having issues with WordPress as well, so we eventually added the PhotoViewer using an <iframe> (see the HTML source of the post above). You might have better luck by including the JavaScript source though a WordPress template file. Does the bookmarklet work if you invoke it on your page? Also, if you could provide a link to your page, we might be able to spot the problem.
September 14th, 2006 at 7:38 am
The page that I’m working with here is….
http://www.docmisterio.com/?page_id=22
@bdizzlefizzle
>Yes I believe that we are having the same problem! That is exactly what mine is doing…
@ziga
>When I did have the rich text on what what was happening was it was stripping the src .js file out… and now upon post it would appear that there is a /br in between the type=text/javascript and the src… and also on the pictures instead of quotes the following number shows up:
“#8221;”
That is everything as far as I can tell, any ideas? Thank you everyone for your help!
September 14th, 2006 at 8:07 am
@doc misterio
> and now upon post it would appear that there is a /br in between
Yes, these breaks that WordPress inserts are exactly what causes the issue. We updated the post to use a more WordPress-friendly script syntax (note the XML comments and single-line script import). As you noted, the rich editor needs to be disabled. Details here: http://codex.wordpress.org/Using_Javascript
Let us know if this works.
September 14th, 2006 at 9:08 am
@ziga
> I just wanted to try it because I was curious, I uploaded it to the sidebar, which is NOT in a post, and it worked like a dream – it would appear that the post is the thing that is breaking it… and according to this link you sent me, it’s hard to do JS in a post… so… now with the comment tags and the single line script…. EUREKA!!! It works – Thanks you guys so much!!!
September 14th, 2006 at 9:35 am
… and just like that… it broke again… I sent it to a friend “hey dude check out this awesome thing…” and he told me that he clicks on it and nothing happens… so I went back and sure enough… it didn’t work
http://www.docmisterio.com/?page_id=22
I can’t see anything wrong… I’m going to keep trying things…
September 14th, 2006 at 9:44 am
Ok… it would seem that this is what works…
I have to put the NON single line code before the ul tags in my sidebar with a noscript around the anchor… and then I have to put the single-line code in the post, and it works… not sure why… thanks guys… I just hope I don’t have to update both instances of the code with the pictures… any idea why I have to have the code in both places… ?
docmisterio.com
Slideshow post page
September 14th, 2006 at 1:37 pm
Cool script, Thanks for sharing … I’ve implemented it into my gallery code.
Absolutely super!
September 14th, 2006 at 2:00 pm
Safari and IE do not run the script.
Not for me atleast, as my boss has not been able to view the script at all from either of the two browsers he has.
Can anyone out there view from ie or safari?
@Ziga what do you advise?
- – I would like to e-mail you the link to my site, its sensitive information I would rather not post on an open forum. if you don’t mind taking a look at my site,
mariande@gmail.com
j
February 25th, 2007 at 5:10 am
is there a way to implement that slideshow to a gallery?load pics from directory. (changing the highslide code)
//Different popup methods
switch ($displayPopup) {
//No popup
case 0:
break;
//Normal popup
case 1:
$imgtag = “target=”_blank”";
break;
//Fancy popup using JS (This one generates errors in IE6, so offered as an option)
case 2:
//Load stylesheet business for JS Highslide
$imgtag = “class=”highslide” onclick=”return hs.expand(this)”";
?>
/components/com_rsgallery2/js_highslide/highslide.css” type=”text/css” />
/components/com_rsgallery2/js_highslide/highslide.js”>
hs.graphicsDir = ‘/components/com_rsgallery2/js_highslide/graphics/’;
hs.showCredits = false;
hs.outlineType = ‘drop-shadow’;
window.onload = function() {
hs.preloadImages();
}
February 26th, 2007 at 8:32 am
hello
Wow, what a wonderfull and so class slideshow!
I’ve got the same question as Jamie :
“Just wondering if itâââs possible to start the slideshow automatically after the viewer is launched (ie. without having to press the ââ?playâââ button).”
It will be very helpfull .
Thanks!
February 26th, 2007 at 8:39 am
@Jamie, koponic
> Just wondering if itâââs possible to start the slideshow
> automatically after the viewer is launched
We’ve now added a new method: enableAutoPlay(). Check the slideshow documentation page for details:
http://slideshow.triptracker.net/howto.html
@D.Won
Loading the images from a directory is possible of course, but this needs to be done in server code (e.g. PHP). JavaScript alone cannot be used to browse photos on the disk.
In server code, you would basically list all of the images in a directory and output a “viewer.add(…);” script line for each file. I’m sure others will be able to provide samples here.
February 26th, 2007 at 8:40 am
@koponic, @Jamie
> Just wondering if itâââs possible to start the slideshow automatically after the viewer is launched…
Yes, this option was recently added to the API. Use the “enableAutoPlay()” method. It’s documented here:
http://slideshow.triptracker.net/howto.html
February 26th, 2007 at 10:28 am
Thank you! thank you! thank you!!!
March 2nd, 2007 at 10:14 pm
Just wanted to pass along a thank you for this slideshow script. I’m using it on my family website and it works perfectly and looks fabulous! Kudos to the programmer(s).
March 27th, 2007 at 2:50 pm
Great tool! I’m very impressed.
One question….how can I change the font color when using titles? Changing the font size with setFontSize() is great, but my Grandmother has bad eyes, so I was hoping to try a few different font colors or weights to help her out.
Thanks for the great tool!
March 28th, 2007 at 1:20 pm
got it. I just added the following line to the js file that sets the photoTitle style:
photoTitle.style.fontWeight=”bold”;
I didn’t bother making it configurable like setFontSize(), but I’m sure one could if they
March 28th, 2007 at 1:22 pm
…wanted to.
June 22nd, 2007 at 7:20 am
Wow! This is exactly what I was looking for! Thanx!
June 29th, 2007 at 8:23 am
I have a strange problem with this app :
when the app is on, all the flash (under IE, not Mozilla) disappears behind the transparent background…
Someone have already met this problem ? and fixed it ?
Thanks for the responses
Have a nice WE !
June 29th, 2007 at 11:50 am
@jonathan
> all the flash (under IE, not Mozilla) disappears
This is the expected behavior. Because of the problems with Flash displaying above the transparent background (see discussion above), we made it so that Flash controls are hidden for the duration of the slide show. The controls will reappear once the viewer is closed so this should not be a big issue.