I'm currently on parental leave till September. During that time, I will not read any e-mail or blog comments.

Until I'm back, please read through my archives, take a look at my code/applications and check out my pictures.

Have a great summer, and a splendid winter to you aussies and kiwis!

JaS - like your own mini-Flickr

Published on Wednesday, April 12th, 2006

Lightbox feature added September 15th 2006.

Select specific tag add-on added September 21th 2006.

Updated September 29th 2006

I’ve done a very minor change to the event handling to cover up for a bug in IE’s garbage collector (something I hear will be addressed automatically in IE 7). In 99,9% of the cases you won’t notice any difference, but if you use it in a very advanced web site/web application it might make things better and less resource intensive.

Updated October 25th 2007

I get a number of e-mails asking how to start the slideshow as soon as the page is loaded. Add this code to the end of the jas.js to make it happen:

addEvent(window, “load”, function(){ setTimeout(” JaS.startSlideshow()”, 1)}, false);

(The setTimeout is to avoid a content parsing bug in Internet Explorer)

Pretty much everyone wants to display and show images to other people, right? So many use Flickr for it, and while I think it’s a great idea and that it has got some wonderful features, my main gripe is that if I present images, I want to do it in my own web site.

People who do it themselves, on the other hand, always think Flash is necessary just to have fading and a nice little slideshow. Not true.

Therefore, I created JaS - JavaScript Slides. It is a highly customizable JavaScript library for easily turning your images into a collection viewable as a slideshow, and with fading effects, if desired. It also supports automatic thumbnail creation and tagging of images, so the viewers can find the exact images they’re looking for.

Humbly described, it’s like your own little mini-Flickr that you can use wherever you want to, and skin and brand it the way you feel appropriate. It’s also a way to showcase the independence and separation of the interaction and the design of a web page.

So, go take a look at it! Submit your own design to the gallery or vote for which design you like the best.

Enjoy!

Posted in CSS, Developing, JavaScript, Technology | 73 comments

73 comments

Jules
April 12th, 2006 at 16:12

Excellent! Many thanks for this, I think I know where I can use it.

However, there is a minor problem with Opera 9 (TP2). The JS fading seems to be incomplete in that the large image is not displayed with full colour contrast but appears washed out.

I haven’t checked this in any other browser so I don’t know if this is an Opera thing or wider.
Jules
April 12th, 2006 at 16:19

Hmm, I tried it again and didn’t see what I saw before, I will let you know if I see it again.
Jules
April 12th, 2006 at 16:21

Hah! Ignore my comments (other than the line that states how much I like this). It turns out that the fading is a result of the outside light reflecting off my monitor.
Ryan Campbell
April 12th, 2006 at 21:19

Very sweet. Thanks for taking the time to package all of this together. It will definitely save some of us from a bit of hard work down the line.
Steve Williams
April 12th, 2006 at 22:35

I’ve done a few sites recently where lots of photos were involved and I too chose to make use of some JS and CSS to fade in the images and offer a little feedback as to what was happening as they loaded… nothing as clever as a slideshow tho’

Thank you for JaS, it’s *really* nice and I have a use in mind right away
Robert Nyman - author
April 13th, 2006 at 8:49

Jules,

Thanks!
Also, I’m happy your problems worked themselves out.

Ryan,

Thank you!

Steve,

I’m glad that you like it!

Also, all of you, feel free to submit your own theme. I’d love that!
Jorkas
April 13th, 2006 at 9:10

Nice work again, maybe i find some area where i can this

Have a nice easter Robert!
s10ley
April 13th, 2006 at 9:49

sorry4myEnglish over & over again.
Jas is great.
I was test it under IE, firefox(moz) & opera(some trouble with fading, as you know before).
but anyway - it’s great
Robert Nyman - author
April 13th, 2006 at 12:59

Jorkas,

Thank you, and Happy Easter to you too!

s10ley,

Thanks!
From my testing, Opera didn’t support fading at all (the CSS 3 property opacity), but I guess it will do that in upcoming versions.
Jules
April 14th, 2006 at 14:09

I tested it with Opera 9 and it worked fine. Perhaps previous versions of Opera don’t work with JaS properly.
Robert Nyman - author
April 15th, 2006 at 11:43

Jules,

Fading might work in the latest version of Opera 9. In Opera 8, everything works but no fading is present.
Stoyan
June 28th, 2006 at 8:27

It would be nice if you could use a list from pre-generated thumbnails, each holding a link to the original image:

images : [
[”thumb.jpg”, “big.jgp”, “Bat bridge in Austin”, “Bridge”] ….

In this way there is much less server load because you don’t have to wait the bigger images to load.

Would be hard to implement this functionality ?
Robert Nyman - author
June 28th, 2006 at 13:35

Stoyan,

I was thinking about that initially, but decided not to for two reasons.

1) I wanted it to be as easy as possible for people with having just one image and one image name.

2) It is also done that way so browsing the images and slideshows are very fast since it then works with the cached images, and also to avoid an extra place for entering image names to preload them.

As of now, I will not personally do any changes to the JaS script, but you’re more than welcome to add thumbnail and/or preloading functionality. I don’t think it would be that hard for you to do, but it takes some time to test it etc.
Billy Scott
July 18th, 2006 at 23:57

Hi Robert,

Love the package, very customisable.

I’m designing a site for a friend, but he is not very computer savvy. I’m trying to make it easier for him to change the pictures by using the folder structure to fill the tags section and the name of the file to be the text underneath.

Can you suggest ways of doing this or point me in the right direction of where I can find out?

Cheers

Billy Scott
Robert Nyman - author
July 24th, 2006 at 13:40

Billy,

That might be tricky. The only way I know how to make that with JavaScript is through the FileSystemObject, but except for securiey warnings it will only work in Inernet Explorer on a PC.

Sorry to say this, but I think it’s a better bet to teach him how to fill in that info alternatively use the real Flickr.
I’m on Flickr - pros and cons - Robert’s talk
August 24th, 2006 at 19:29

[…] rent image’s title/caption in the slideshow, and it was one of the reasons I created JaS and its functionality (yes, Flickr, you’re allowed to use; just gi […]
Stoyan
September 5th, 2006 at 16:52

How to make the slideshow to play in endless loop ?
Emily
December 23rd, 2006 at 2:52

I am trying to get the slideshow to start when the page loads and then loop continuously. I got it working in Firefox but not in IE which I know means I am doing it wrong! Any suggestions would be really appreciated.
Robert Nyman - author
December 25th, 2006 at 13:54

Stoyan,

You need to do some more scripting for that to happen, I’m afraid.

Emily,

What you can do is to call the startSlideshow method as soon as the document has loaded.

The easiest way to do this is to include this line at the end of the jas.js file:

addEvent(window, "load", function(){ JaS.startSlideshow();}, false);
Marre
January 4th, 2007 at 18:21

The easiest way to do this is to include this line at the end of the jas.js file:

addEvent(window, “load”, function(){ JaS.startSlideshow();}, false);

But then it will only play once… I want it to loop. Can you help?
Robert Nyman - author
January 5th, 2007 at 22:38

Marre,

Then it becomes a bit more tricky…
The easy way to do it is probably to just comment out the line this.stopSlideshow(); in the nextImage method and I guess it will work.

No guarantees, though!
Robin
March 31st, 2007 at 1:50

Hi Robert,
Seeing your dynamic PHP advice and the use of a source folder prefix I was quite hopeful that there may have been a script around to automatically populate the pix array from a folders pic file contents, which would have been wonderful for updating the pix list and for having different galleries - but then seeing your response to Billy Scott suggests not - so if not to automatically populate with files, what was the dynamic functionality that you were suggesting the use of PHP for?
Robert Nyman - author
April 2nd, 2007 at 10:04

Robin,

My answer to Biilly was just about scripting possibilities; maybe that wasn’t clear. Thorugh PHP, you can populate the images array used by the script.

It is described in the Implementation page.
Matt Henderson
April 18th, 2007 at 17:28

I really like JaS. I’m using it with success on a redesign of our company website. You can see the demo version here:

http://www.marinegrademkt.com/2007/marketing.html

As you can see I’m using tabs to break up my content. I would like to know how to put JaS on multiple tabs. Is it possible to have multiple JaS without multiple jas.js files or lots of redundant javascript code?

Thanks, Matt
Robert Nyman - author
April 18th, 2007 at 17:39

Matt,

I’m glad you like it!

As of now, unfortunately, multiple instances in the same page isn’t supported.
Matt Henderson
April 18th, 2007 at 19:21

What is the IE.css for? Iâ€™m running IE7, but I can’t seem to find a use for it.

I tried using it and saw no effect. So, I’m not using it currently.

I only ask because JaS seems to be working fine for me on FireFox, but in IE I get an error box stating there is a problem with lines 391 and 210 (I assume itâ€™s referring to the jas.js file). And the picture count is off when using IE (there are actually 9 pictures, but the count says 12 or 10 depending on which picture youâ€™re viewing). And on IE the thumbnails don’t show up. Weird.

Here’s the page I’m working on:

http://www.marinegrademkt.com/2007/marketing.html

Thanks, Matt
Matt Henderson
April 18th, 2007 at 21:14

Sorry, I figured it out.

I had a comma after my last picture in the javascript file. Because I deleted pictures 10-12, but didn’t remove the comma after number 9.

Everything works great, now. Thanks for the script. Feel free to remove my confusing posts.

Peace, Matt
Robert Nyman - author
April 19th, 2007 at 9:10

Matt,

No problem, I’m glad that you solved it!
The IE CSS is for version 6 of IE. That’s why it’s included with a conditional comment that tells it to only use it for any IE version lower than (lt) IE 7:

<!–[if lt IE 7]>
<link rel=”stylesheet” href=”CSS/ie.css” type=”text/css”>
<![endif]–>
chals
May 18th, 2007 at 15:34

Could JAS display swf files instead of photos? When you click over a thumbnail it’d show its related swf file
Robert Nyman - author
May 18th, 2007 at 16:59

chals,

That’s an interesting idea, but JaS doesn’t support that as of now.
heartless
June 11th, 2007 at 2:01

MAny Thanks for the script but i have a very newbie question….how to make jas lstart without select all tags thing and not loading all thumbnails?… in case if i want to start it with a certain tag( for example [birds]) and corresponding thumbnails….and going thru all the pics by cheking tags….i know it must be very simple…but as i sad IM a total newb….thank you…
Robert Nyman - author
June 11th, 2007 at 22:27

heartless,

What you want is adressed in Select specific tag add-on to JaS.
Andrew Laws
June 19th, 2007 at 15:41

Amazing code thanks, however when i am trying to dynamicall populate the array in the header of my page as per implementaion page a get no results

IE
I have commented out the following in the js file
images : [

[”1.jpg”, “Bat bridge in Austin”, “Bridge”],
[”2.jpg”, “Blossoming tree”, “Tree”],
[”3.jpg”, “Bat bridge from below”, “Bridge”],
[”4.jpg”, “Birds”, “Birds”],
[”5.jpg”, “Stevie Ray Vaughan Memorial”, “Memorial”],
[”6.jpg”, “Me in river park”, “River park”],
[”7.jpg”, “Woode Wood playing guitar”, “Woode Wood, River park”], // Separate multiple tags by a comma
[”8.jpg”, “Woode’s sign”, “Woode Wood”]
],

and added the following to my head section within an aspx page

JaS.images :
[
[”1.jpg” , “Front of Car”, “Front of Car”],
[”2.jpg” , “Back of car”, “Front of Car”],
[”3.jpg” , “SideOfCar”, “Front of Car”],
[”4.jpg”, “Inside of car”, “Front of Car”],
],

and i get no results; can any one please help as i love this code
Robert Nyman - author
June 20th, 2007 at 19:45

Andrew,

Thanks!

The problem in your code is that you shouldn’t have a comma after the last picture row. I.e:

[â€4.jpgâ€, â€œInside of carâ€, â€œFront of Carâ€],

should be:

[â€4.jpgâ€, â€œInside of carâ€, â€œFront of Carâ€]
Heartless
July 5th, 2007 at 15:49

YOur script is amaizing….it is flexible and simple
But i have a problem with making it understand cirilik tags and image comments…
Thank YOu!
Ps..oh and thanks for “Select specific tag add-on to JaS”. Works like a charm!
Robert Nyman - author
July 5th, 2007 at 21:46

Heartless,

Thank you! I think, when it comes to cyrillic characters, that it is just up to what encoding you use for the web page in general. As far as I know, the script should work with them as long as the general encoding is correct.

Good luck!
Roger
July 26th, 2007 at 14:49

Would like this for our school website. How do we get hold of the alternative designs? The download only seems to be for the original.

Thanks.
Jobiwan
September 19th, 2007 at 4:37

Robert, I’ve very much enjoyed using this code, thanks for making it available. I’ve run into a few issues with IE and would appreciate your input. The code behaves as expected in Firefox, Netscape and IE, but if I add the

addEvent(window, “load”, function(){ JaS.startSlideshow();}, false);

line (to get the images to start when the page loads), I get an error with IE. It still works fine in Firefox and Netscape. The versions I’m using are:
Firefox 2.0.0.6
Netscape 9.0b3
IE 7.0.6000.16512

I’ve tried inserting this line in several places (end of jas.js, within body onLoad tag in index.html), but I get the same issue regardless. You can see where I’m at with this at the URL listed above. Any suggestions how I can resolve this? Thanks!
Robert Nyman - author
September 19th, 2007 at 9:17

Jobiwan,

I’ve seen the error once before, and when it appears it’s due to a flaw in IE’s rendering where it calims that a certain property doesn’t exist, although it does.

The solution is to add a one millisecond timer and it will work. Like this:

addEvent(window, "load", function(){ setTimeout(" JaS.startSlideshow()", 1)}, false);
Jobiwan
September 20th, 2007 at 2:56

Robert, that worked like a charm, thank you so much.

Now, sorry to bug you again, but do you know how I would add a URL to each image, so that if someone were to click on that image, it would take them to a different page, going into more detail about that image? Thanks! Joe
Robert Nyman - author
September 20th, 2007 at 8:56

Jobiwan,

You need to tweak the createThumbnails for that then, to create links around each image. No default support for it, sorry.
Jobiwan
September 20th, 2007 at 17:22

This attempt at adding the link is obviously not working, or I wouldn’t be posting it here. But what am I doing wrong? Sorry, it’s been a while since I tweaked Javascript. I added an additional var oURL to your code under oThumbnailsList in the createThumbnails function and tried to define it, but I’m pretty much ‘wandering in the dark’ here:

createThumbnails : function (){ this.thumbnailContainer.innerHTML = ""; this.thumbnailCollection = []; var oThumbnailsList = document.createElement("ul"); var oURL; var oListItem; var oThumbnail; var oCurrentImage; for(var i=0; i
Thanks for your patience and assistance.
Jobiwan
September 20th, 2007 at 17:26

Above post continued:
for(var i=0; i
Robert Nyman - author
September 21st, 2007 at 11:39

Jobiwan,

Sorry, what I meant to say os that you also need to alter the setImage method as well, to wrap a link around the current image. It takes some work, and unfortunately I don’t have the opportunity to do that now.
Jobiwan
September 21st, 2007 at 13:42

I understand, Robert. I’m quite busy myself, these days. Thanks for all your help and input, and for making this Javascript feature available.
Robert Nyman - author
September 21st, 2007 at 14:09

Jobiwan,

No problem, I’m just sorry I can’t help you more than giving pointers right now.
Luc
October 15th, 2007 at 12:51

Hi Robert,

Thanks for your JaS, it’s great.

My problem :

How can I do a pre-load of ALL images BEFORE the slide-show is ready to use ?
Now, I’ve a “glitch” between images at the first use of the gallery;
after, in a other use, all is correct. Thus it’s seem that the problem is in the presence of all images in memory for a correct transition between two images, isn’t it ?!

I’ve thinking in use of a function like this :
(found in “JavaScript”- by David Flanagan, exemple 22-4)

/**
* ImageLoop.js: An ImageLoop class for performing image animations
*
* Constructor Arguments:
* imageId: the id of the tag which will be animated
* fps: the number of frames to display per second
* frameURLs: an array of URLs, one for each frame of the animation
*
* Public Methods:
* start(): start the animation (but wait for all frames to load first)
* stop(): stop the animation
*
* Public Properties:
* loaded: true if all frames of the animation have loaded,
* false otherwise
*/
function ImageLoop(imageId, fps, frameURLs) {
// Remember the image id. Don’t look it up yet since this constructor
// may be called before the document is loaded.
this.imageId = imageId;
// Compute the time to wait between frames of the animation
this.frameInterval = 1000/fps;
// An array for holding Image objects for each frame
this.frames = new Array(frameURLs.length);

this.image = null; // The element, looked up by id
this.loaded = false; // Whether all frames have loaded
this.loadedFrames = 0; // How many frames have loaded
this.startOnLoad = false; // Start animating when done loading?
this.frameNumber = -1; // What frame is currently displayed
this.timer = null; // The return value of setInterval()

// Initialize the frames[] array and preload the images
for(var i = 0; i < frameURLs.length; i++) {
this.frames[i] = new Image(); // Create Image object
// Register an event handler so we know when the frame is loaded
this.frames[i].onload = countLoadedFrames; // defined later
this.frames[i].src = frameURLs[i]; // Preload the frame’s image
}

// This nested function is an event handler that counts how many
// frames have finished loading. When all are loaded, it sets a flag,
// and starts the animation if it has been requested to do so.
var loop = this;
function countLoadedFrames() {
loop.loadedFrames++;
if (loop.loadedFrames == loop.frames.length) {
loop.loaded = true;
if (loop.startOnLoad) loop.start();
}
}

// Here we define a function that displays the next frame of the
// animation. This function can’t be an ordinary instance method because
// setInterval() can only invoke functions, not methods. So we make
// it a closure that includes a reference to the ImageLoop object
this._displayNextFrame = function() {
// First, increment the frame number. The modulo operator (%) means
// that we loop from the last to the first frame
loop.frameNumber = (loop.frameNumber+1)%loop.frames.length;
// Update the src property of the image to the URL of the new frame
loop.image.src = loop.frames[loop.frameNumber].src;
};
}

What do you think about this, and where can I put this fonction in your JaS code ?

Thanks in advance,

Luc
Robert Nyman - author
October 16th, 2007 at 12:00

Luc,

In general, that’s functionality that would be nice to add. Implementing it, though, would take some time, and the scope of saying if code would work or not is a little bit bigger than I have the ability to reply to, or test.

Therefore, JaS is released as open source so anyone can alter and improve it any way they seem fit. So, therefore I wish you luck in accomplishing what you want, although I’m sorry I don’t have the time to help you.
Joseph
October 28th, 2007 at 8:22

Just having a problem displaying jpg images after uploading code on to the web server. The code works fine on my machine, however I was told by the web hosting co it was a coding issue.
Robert Nyman - author
October 29th, 2007 at 8:54

Joseph,

Unusual problem. I hope your hosting company sorts it out soon.
jeff
November 28th, 2007 at 13:54

Hi

I’m wondering how to make the vertical minature scroll in the example “70s-wall” horizontal
Robert Nyman - author
November 28th, 2007 at 22:36

In CSS: set a height for the element and overflow: auto;. Like this:

#jas-thumbnails{
height: 200px;
overflow: auto;
}

This means that the horizontal scrollbar will appear if the content is higher than 200 pixels.
mizchels
December 17th, 2007 at 22:24

Great gallery–thanks a million for making it open source. I’m just having an issue with IE 7…it won’t display the thumbnails, only the main image and “previous”/”next” links. Any ideas? Also, the image counter keeps saying I have more images than I do…but only in IE, not in FF.

The gallery I’m working with is: http://www.weddingstheislandway.com/flower_gallery.html

Thanks for any tips! Really appreciate it.
Robert Nyman - author
December 17th, 2007 at 22:38

mizchels,

Lovely pictures! The error is that in the JavaScript file, you need to specify the id of the element which will show each image’s text; it’s the imageTextContainerId property in the JavaScript.

If you don’t want to use any text, it should work by setting the property useImageText to false in the JavaScript file. If that doesn’t work, just comment out this line in the script:

this.imageTextContainer.setAttribute("alt", this.imageText);
Ben
January 11th, 2008 at 11:04

Hi, I was wondering whether you could offer any pointers on creating a non-javascript fallback.

I realise I need to use server side scripting to create a page displaying the images and thumbnails, but then is it possible to apply this slideshow script to such a page (where the images aren’t rendered by javascript).
Robert Nyman - author
January 11th, 2008 at 13:06

Ben,

Absolutely. I’m glad that you ask!
If you take a look at the Vanilla theme, for example:

First, make sure the links within <ul id="navigation-controls"> point to a URL where you have the logic to show the next/previous image. Naturally, hide the links for starting and stopping slideshow since it won’t be supported.

For the same reason, hide <ul id="dim-background-controls">.

A good way to do this can be to apply a class to those elements which hides or positions them off screen, and then have a JavaScript which adds another class that resets that, so they’re shown for script-enabled web browsers.

And, lastly, have server-side code to generate thumbnails within <div id="jas-thumbnails"></div> (the exact code that the script generates). If wcript is enabled, what’s generated on the server side will basiccally just be replaced by the script.

Good luck!
Ben
January 14th, 2008 at 11:12

Thanks for that Robert, very helpful. One more question though, if I may…

In our gallery we will have a number of text fields as well as the caption (photographer, location etc). Is it possible to extend the JaS.images array to include these extra fields alongside the caption?

If so, do you have any pointers on doing this?

Many thanks!
Robert Nyman - author
January 14th, 2008 at 13:11

Ben,

Sure, add another field in that array. You need to add another property to the JaS object, and then add a line like the one below, but with image caption. instead

Within the setImage method, you can see this code for image text, which can be duplicated for the image caption:

this.imageText = this.currentImages[this.imageIndex][1];

This is of course the base of what you need to do, there’s some minor additional coding to do.
Hong
January 16th, 2008 at 10:13

Hi Robert,
Thanks for creating this great solution, I’m using it for a web project as per below:
http://www.virtuoso.com.my/ajc_test2/project-smp-kota-kemuning.php

In Firefox, the slideshow starts playing automatically after page loaded, but it doesn’t autoplay in IE6 with ‘error’ in js.

Is there a way to solve the problem?

Thanks a lot!! Cheers~
Robert Nyman - author
January 16th, 2008 at 12:54

Hong,

Thank you.
As it says at the beginning of this post:

Add this code to the end of the jas.js to make it happen:
addEvent(window, “load”, function(){ setTimeout(” JaS.startSlideshow()”, 1)}, false);
(The setTimeout is to avoid a content parsing bug in Internet Explorer)
Alex
January 24th, 2008 at 23:09

HI:

I used the script and in my local machine works perfectly, but as soon as I uploade it in the server, the images won’t show, I know the ‘jas.js’ it’s working because the page shows exactly the numer of pictures, but i get the ‘undifined’ for every picture, am I doing something wrong, or is it just that the script doesn’t finds the images route in the server.

Hope to hear from you soon¡

Alex
Robert Nyman - author
January 25th, 2008 at 10:03

Alex,

That’s really impossible to say, but if it works locally, and it finds the JavaScript file on the server, it sounds like it’s a matter of invalid paths to the images.
Andrew
January 27th, 2008 at 7:49

This looks great, but it would be nice to see some more information about how to dynamically generate the image list. I’d like to pull the information from a mysql database using PHP, which is easily done with a repeat region in Dreamweaver. But every row would be identical, including the comma at the end of the last line, which would cause the script to fail. I’ve been trying to find a way to drop that last comma, but have come up empty so far. Are the any working examples that you could post somewhere?

Thanks very much,

Andrew
Andrew
January 28th, 2008 at 2:40

Well after a lot of trial and error I finally figured out how to dynamically generate the image list from a mysql database. If anyone else is trying to do this here’s what worked for me. I hope it saves someone else some time.

Put this at the very top of your PHP page to connect to your database and edit to your needs:
mysql_connect("localhost", "mysql_user", "mysql_password") or die("Could not connect: " . mysql_error()); mysql_select_db("mydb");
$result = mysql_query("SELECT image, caption, tags FROM mytable"); </code Then put this in the head section after the jas.js file has been included and wrap it in the appropriate javascript tags:JaS.images = [
<?php $row_num = mysql_num_rows($result); $count = 1; //the first record while ($line1 = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "[\"".$line1['image']."\",\"".$line1['caption']."\",\"".$line1['tags']."\"]"; //print the comma unless it is the last record if ($count ];
You also have to remove the original images section in the javascript file. I’ve just started testing this tonight, and it seems to be working fine. However, any suggestions or feedback would be much appreciated.

Cheers,

Andrew
Andrew
January 28th, 2008 at 2:46

I was just looking at the source code for the dynamically generated slideshow I described above, and was surprised to see the caption “Bat bridge in Austin” and src=”../pictures/1.jpg”. It doesn’t seem to display any of my images or captions, unless I use the “view generated source” feature in the Firefox web developers toolbar.

Do you know if this will affect search engine ranking? Would they see the same thing I’m seeing in the source code or the actual generated code with all the right captions, alt tags, etc?

Thanks,

Andrew
Andrew
January 28th, 2008 at 2:59

Oops! I just noticed that I screwed up some of the code above when I was cutting and pasting. The part that goes in the javascript section of the head should look like this:
JaS.images = [
<?php $row_num = mysql_num_rows($result); $count = 1; //the first record while ($line1 = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "[\"".$line1['src']."\",\"".$line1['caption']."\",\"".$line1['title']."\"]"; //print the comma unless it is the last record if ($count < $row_num) { echo ', '; } $count++; } ?>
];
Maybe the moderator can clean up my original post and delete this one.

Andrew
Robert Nyman - author
January 28th, 2008 at 8:53

Andrew,

I have no idea how regions work in Dreamweaver, but any programming language allows you to single out if an item is the last within a loop, so you can distinguish whether to omit the comma or not.

As described in how to make a fallback, dor search engines as well as accessibility, you naturally should have the HTML code generated in the web page to begin with, and then let the JaS functionality be added on top of that.
Richard Sparks
January 29th, 2008 at 1:58

Thanks for this great slideshow. I’m using it on a real estate agent’s website to show photos of the local area. I modified your code a bit, and everything’s working fine, except for one problem - and it’s only showing up on (you guessed it) Internet Explorer. When you start the slideshow, the main image text become pixelated in IE 7, and in IE 6 it appears pixelated and bold. See it here: http://www.bearvalleyspringsrealty.com/page-bear+valley+springs+photo+gallery-8.html Any idea what’s going on or how to fix it? It works perfectly in Firefox and Safari, but as usual IE sucks! Thanks for any suggestions.
Robert Nyman - author
January 29th, 2008 at 9:59

Richard,

I’m glad to hear that you like it!
That problem in IE is indeed weird, and it appears if you apply the filter CSS (the one used for fades) to the element containing the image text. Therefore, try and have the text in a separate element, and things should be fine.
Andrew
January 31st, 2008 at 4:11

I’m loving JaS! I figured out all the dynamic, PHP, mysql stuff, and tonight I was able to add pagination to my galleries as well. And the fact that you can build the underlying HTML and then have let the JaS functionality be added on top of that has allowed me to build a dynamic, non-javascript gallery on the same pages. I’m also using SlideShowPro Director to manage the backend of the galleries, and I couldn’t be happier with the non-flash, search-engine friendly, front-end with some awesome dynamic features like the auto slide show.

If anyone wants to have a look here’s the link to one of my galleries. Any feedback or suggestions would be much appreciated.

I just wish I had found JaS earlier. It would have saved me a lot of time and headaches.

Thanks very much for making this available Robert.

Cheers,

Andrew
Robert Nyman - author
January 31st, 2008 at 10:28

Andrew,

Thank you! I’m glad to hear it all worked out for you!
Stéphan Leith
March 6th, 2008 at 2:01

Can i control the output size of the pictutre?
Thank-You!
Robert Nyman - author
March 6th, 2008 at 11:38

Stéphan,

Yes, set it in your CSS file.

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.

Pictures

Web sites

Maps

Frappr

Affiliation