Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/reso...s/transitions/
    Last edited by brothercake; 03-30-2005 at 10:22 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Regular Coder
    Join Date
    Oct 2004
    Location
    In front of this computer. (Where else?)
    Posts
    442
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Tomorrow is the first day of the rest of your life... What have you done today?
    Tutorials
    Web: w3schools, htmldog General tips: Hardware, Networking

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #8
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    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.
    (I know I'm a blind supporter of the W3C's work...I'm ok with that )

    I take no responsibility for the above nonsense.


    Left Justified

  • #9
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    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


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

    Gaz

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Create a photogallery with JavaScript

    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.

    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

    Code:
    // 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:

    Code:
    <!-- 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!
    Last edited by Energia; 03-13-2011 at 02:33 PM.

  • #11
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    My advice is to wrap each of your <img> tags with anchor tags and enter the fullsize image as a link like this:

    Code:
    <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.
    Code:
    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:
    Code:
    $(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
    Last edited by godfather001; 04-09-2011 at 10:10 AM.

  • #12
    New Coder
    Join Date
    Apr 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •