JaS – like your own mini-Flickr

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!

81 Comments

  • Jules says:

    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 says:

    Hmm, I tried it again and didn't see what I saw before, I will let you know if I see it again.

  • Jules says:

    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.

  • 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.

  • 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 says:

    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 says:

    Nice work again, maybe i find some area where i can this πŸ™‚

    Have a nice easter Robert!

  • s10ley says:

    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 says:

    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 <code>opacity</code>), but I guess it will do that in upcoming versions.

  • Jules says:

    I tested it with Opera 9 and it worked fine. Perhaps previous versions of Opera don't work with JaS properly.

  • Robert Nyman says:

    Jules,

    Fading might work in the latest version of Opera 9. In Opera 8, everything works but no fading is present.

  • Stoyan says:

    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 says:

    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 says:

    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 says:

    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. πŸ™‚

  • […] 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 says:

    How to make the slideshow to play in endless loop ?

  • Emily says:

    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 says:

    Stoyan,

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

    Emily,

    What you can do is to call the <code>startSlideshow</code> 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:

    <code>addEvent(window, "load", function(){ JaS.startSlideshow();}, false);</code>

  • Marre says:

    <blockquote cite="Robert">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 says:

    Marre,

    Then it becomes a bit more tricky…

    The easy way to do it is probably to just comment out the line <code>this.stopSlideshow();</code> in the <code>nextImage</code> method and I guess it will work.

    No guarantees, though! πŸ™‚

  • Robin says:

    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 says:

    Robin,

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

    It is described in the Implementation page.

  • Matt Henderson says:

    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 says:

    Matt,

    I'm glad you like it! πŸ™‚

    As of now, unfortunately, multiple instances in the same page isn't supported.

  • Matt Henderson says:

    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 says:

    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 says:

    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 says:

    Could JAS display swf files instead of photos? When you click over a thumbnail it'd show its related swf file

  • Robert Nyman says:

    chals,

    That's an interesting idea, but JaS doesn't support that as of now.

  • heartless says:

    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 says:

    heartless,

    What you want is adressed in Select specific tag add-on to JaS.

  • Andrew Laws says:

    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 says:

    Andrew,

    Thanks!

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

    <code>[â€Â4.jpgâ€Â, “Inside of carâ€Â, “Front of Carâ€Â],</code>

    should be:

    <code>[â€Â4.jpgâ€Â, “Inside of carâ€Â, “Front of Carâ€Â]</code>

  • Heartless says:

    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 says:

    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 says:

    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 says:

    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 <blockquote cite="">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 says:

    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:

    <code>addEvent(window, "load", function(){ setTimeout(" JaS.startSlideshow()", 1)}, false);</code>

  • Jobiwan says:

    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 says:

    Jobiwan,

    You need to tweak the <code>createThumbnails</code> for that then, to create links around each image. No default support for it, sorry.

  • Jobiwan says:

    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:

    <code>

    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 says:

    Above post continued:

    <code>

    for(var i=0; i

  • Robert Nyman says:

    Jobiwan,

    Sorry, what I meant to say os that you also need to alter the <code>setImage</code> 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 says:

    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 says:

    Jobiwan,

    No problem, I'm just sorry I can't help you more than giving pointers right now.

  • Luc says:

    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 says:

    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 says:

    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 says:

    Joseph,

    Unusual problem. I hope your hosting company sorts it out soon.

  • jeff says:

    Hi

    I'm wondering how to make the vertical minature scroll in the example "70s-wall" horizontal

  • Robert Nyman says:

    In CSS: set a <code>height</code> for the element and <code>overflow: auto;</code>. 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 says:

    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_galler

    Thanks for any tips! Really appreciate it.

  • Robert Nyman says:

    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 <code>imageTextContainerId</code> property in the JavaScript.

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

    <code>this.imageTextContainer.setAttribute("alt", this.imageText);</code>

  • Ben says:

    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 says:

    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 says:

    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 says:

    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 <code>setImage</code> method, you can see this code for image text, which can be duplicated for the image caption:

    <code>this.imageText = this.currentImages[this.imageIndex][1];</code>

    This is of course the base of what you need to do, there's some minor additional coding to do.

  • Hong says:

    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-

    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 says:

    Hong,

    Thank you.

    As it says at the beginning of this post:

    <blockquote cite="http://www.robertnyman.com/2006/04/12/jas-like-your-own-mini-flickr/#comment-186607"&gt;

    Add this code to the end of the <code>jas.js</code> to make it happen:

    <code>addEvent(window, “loadâ€Β, function(){ setTimeout(â€Β JaS.startSlideshow()â€Β, 1)}, false);</code>

    (The <code>setTimeout</code> is to avoid a content parsing bug in Internet Explorer)

  • Alex says:

    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 says:

    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 says:

    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 says:

    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:

    <code>

    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:

    <code>

    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

    ];

    </code>

    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 says:

    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 says:

    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:

    <code>

    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++;

    }

    ?>

    ];

    </code>

    Maybe the moderator can clean up my original post and delete this one.

    Andrew

  • Robert Nyman says:

    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.

  • 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+… 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 says:

    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 says:

    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 says:

    Andrew,

    Thank you! I'm glad to hear it all worked out for you!

  • Stéphan says:

    Can i control the output size of the pictutre?

    Thank-You!

  • Robert Nyman says:

    Stéphan,

    Yes, set it in your CSS file.

  • Ben says:

    One minor issue I've had with JaS is when you have a mixture of Portrait and Landscape photos.

    It all works ok, but some of the thumbnails will appear distorted as they are having an unatural aspect ratio forced upon them. Perhaps one enhancement would be to put a diiferent css class on thumbnails that are portrait, so you could minimise distortion?

  • Robert Nyman says:

    Ben,

    Yes, that could be an option. But generally, it's better to remove the CSS code which sets both height and width. In the evolved JaS, called PictureSlides, you can have different images for the thumbnails and the large images.

    This might also help you address your problem.

  • Ben says:

    Thanks Robert,

    I don't know why I didnt think of editing the css code on the image size! That's worked a treat.

  • Does anyone have the code to Hyperlink the MAIN image and text? Please let me know. Thank you,

    Jimmy

  • Hi, Im wondering if anyone knows how to hyperlink the text of each image or the image itself. This is a great software and I am willing to pay someone if they can help me.

    Thank you,

    Jimmy J. Camacho

  • […] the current 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 it; just give me some credit for it […]

  • Hi, im confused. I would just like to know if anyone created the code to make the image text or image go to a url? Dont know what Flickr has to do with my question?? please advise.

    Thank you,

    Jimmy

  • Shawn says:

    Coming up with a strange error in IE (imagine that). After reading through everyone’s posts, there isn’t a mention of it.
    The gallery works great in every browser except IE 8. When displaying the gallery it shows them in a vertical column instead of in 4 rows of 3 images each. Any idea’s?? I am not getting any errors and nothing I do seems to help.

    Thanks in advance!!
    ~Shawn
    FYI: In case you want to see it:
    http://romantasy.faeriefantastique.com/index.htm

Leave a Reply

Your email address will not be published. Required fields are marked *