Photo gallery: Javascript vs Flash?

OK, I'm a beginner at both JS and Flash, but I'm experienced in other computer languages and I don't think it'll be too hard to do one or the other.

This is what I want to do: create a photo gallery that has a set of thumbnails, and clicking on each one enlarges the photo--you've all seen this before. I also want the gallery to be able to read an XML file containing information on all the photos, including file location, size, and description information.

So what would be better for this task? JS or Flash? I know JS is pretty good at parsing through XML, but I'd like for some nice smooth sliding animation effects as you scroll through all the pictures, and Flash seems to be best at that, and I'll be able to add more effects later.

I say use flash....because almost everyone has flash installed someway or another, and besides, if you disable JS, they pack up and fall apart anyway.

Surely the main consideration should be how the data is structured - ergo, if you do it in Flash it won't be, whereas if you do it in JS it can be.

The number of people who support Flash and the number who support JS are probably about the same (maybe slightly more flash) but at least with JS behaviors there's still something there underneath - the underlying data still has semantic form on the page. If you do it in Flash it's just embedded binary data - no structure or semantics there at all.

So I'd go with JS. There are still quite a few cool effects you can do - have a look at these -- http://www.brothercake.com/site/resources/scripts/transitions/

I'd go for flash cos you can have more motion effects and smoother transitions than js and you can complete your work more quickly. I'd go for js for the reasons posted by brothercake.
I think it depends on what you're more comfortable with.

I think most of us, myself included, just use flash because it's what we are accustomed too -- and do effects similar to:
http://whatdoiknow.org/archives/001629.shtml

But javascript would be ultimately better, I agree with Brothercake, iit provides a great amount of usability that's lost through flash. However, advanced animation techniques aren't going to be able to compete with flash, unless it's SVG (which I'd love to see more of, but it's not fully supported in all browsers just yet).

Apparently the latest version of the Adobe plugin works in Firefox now, so that's better.

But ... Opera now supports SVG natively, as of Opera 8 beta 3 -- http://www.opera.com/features/svg/ I haven't had the chance to look into it yet, how much of the spec they've implemented, but it's looking good, and a step in the right direction whatever :) Closer to the day when we can let go of these ridiculous embedded binary formats. As far as I'm concerned, Flash UIs are the new Java Applets :D

oooh, I just tried it -- looks smooth. Since I have no idea how to code it yet, I'm going to do some illustrator exporting, and then tweak. You just locked up my evening Brothercake, girlfriends not gonna like this...

Apparently the latest version of the Adobe plugin works in Firefox now, so that's better.

But ... Opera now supports SVG natively, as of Opera 8 beta 3 -- http://www.opera.com/features/svg/

W00t! Yah for standards support. :D
(I know I'm a blind supporter of the W3C's work...I'm ok with that ;))

Apparently the latest version of the Adobe plugin works in Firefox now, so that's better.
But ... Opera now supports SVG natively, as of Opera 8 beta

Now THAT'S what I'm talkin' about
:thumbsup:

So how would one create a scalable vector spacer gif lol.

Gaz

Interesting discussion!

Im trying to lern JavaScript and I wounder if somebody could explain how to do a photogallery. Im trying to lern from this page (http://www.cryer.co.uk/resources/javascript/script13_gallery.htm#_self).

If I put small image (thumbnails) in my html how do I make an extern javascript page that are conected to the html? Im was thinking not to mix html with javaScript. But it seams like its mixed in this example Im studing. Can I use this cod in an extern page and how can I then put the "onklick" so its not mixing inside the html?

Here is the javaScript

// JavaScript Document

<script language=javascript>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbNormal";
}
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>

The part of my html were I have puted the thumbnails:

<!-- hämtar javascript -->

<script type="text/javascript" src="java.js"></script>


<img src="teambuilding_album/thumbnails/capoeira_icebreak_.jpg" alt="Malmö Capoeira" width="100" height="100" class="thumbNormal" id=1 onClick="SelectImg(1)">
<img src="teambuilding_album/thumbnails/capoeira_workshop_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/foretag_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/foretagshalsa_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/friskvard_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/grupputveckling_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/icebreak_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/inspiration_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/malmo_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/mindfullness_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/motion_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/traning_.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/trivselpengar.jpg" alt="Malmö Capoeira" width="100" height="100">
<img src="teambuilding_album/thumbnails/rekomendation_.png" alt="Malmö Capoeira" width="100" height="100">

<!-- slut på fotoalbum -->



Thankful for ideas!

Hi,
My advice is to wrap each of your <img> tags with anchor tags and enter the fullsize image as a link like this:

<img src=”” id=”image” />

<ul class=”thumbnails”>
<li><a href=”teambuilding_album/fullsize/capoeira_workshop_.jpg” onclick=”return selectImage()” ><img src="teambuilding_album/thumbnails/capoeira_workshop_.jpg" alt="Malmö Capoeira" width="100" height="100"></a></li>
....
</ul>
I also think it will be more clear to use <ul> and <li> tags as above.

Then your javascript function would be much simpler.
function selectImage()
{
document.getElementById(“image”).src=this.href;
return false;
}

Don't forget the return in the javascript function and onclick because it will prevent the browser from redirecting you page to your fullsize image.

Now for the part where you want to keep your javascript away from your html, you should using a framework, it will make you task easier. Then you could hook click event in the javascript itself. Therefore, you would not be using the onclick attribute on each anchor tags. I use jQuery a lot, here an example:
$(function() {
$(“.thumbnails a”).click(function(){
$(‘#image’).attr(“src”, $(this).attr(“href”);
return false;
});

Note: I have not tested the above code, but the idea is there.

--
how to javascript (http://www.squidoo.com/how-to-javascript)

Hi,
please see the demos in js to flash action sctipt

http://www.marcofolio.net/webdesign/22_beautiful_image_galleries_for_your_website.html



http://www.vivalogo.com/vl-resources/beautiful-javascript-flash-galleries.htm


http://www.slideshowbox.com/