SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Gallery by Jeremy Keith

    Well I excuse me for that kind of question but I am new to this one and I really want to learn as much as I can.

    Recentlly I was searching a script to build an online gallery so I found this method here http://www.alistapart.com/articles/imagegallery/ at Alist Apart described by Jeremy Keith. It's one pof the best scripts I ever saw. So simle. And it works like a charm.

    So, (I am really new to this) what I want to do is to be able to have a description of the image BUT this description should be able to be formated with html tags like <a> <b> <br/>, which something that you can't do at the moment, you can only use the title attribute of any picture as a description.

    I have no idea how to use DOM or Javascript this is why I order "The Javascript Anthology" from sitepoint and the book of Jeremy Keith but I have to wait more or less 2 weeks in order to have the books in my hand.

    Thanks in advance for your help.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's one I made - but it is Javascript-only.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice script, but if some one has the time can just show me how to do what I am looking for. It's not for the script but to see how javascript and DOM can work together.

    Thanks for your time and thanks for sharing your knowledge.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not just trying to get you to use my code. I thought it might be helpful for you to see how I implemented caption support.

    I think it is very instructive to compare my script with the one at ALA. Jeremy's works without Javascript, but mine requires Javascript. This difference will determine how caption support is implemented.

    In my script I simply use an array of strings for the captions, but if you want the gallery to work without Javascript then the caption data have to, somehow, be in the HTML. And how are they going to see the caption when they click the link (with Js disabled)? This question is not addressed in Jeremy's article.

    So now you need to look at your page layout and think about how to add captions in the HTML - and do this assuming that Javascript will be disabled.

    The DOM manipulation for this will be relatively easy. But you can't start implementing it until you know how the HTML will be structured and how and where the caption data will be embedded in it.


  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I remember when that ALA article was published. I was quite surprised. It uses inline styles and inline event handlers... yuck! Here's a better way:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Demo</title>
    <style type='text/css'>
    #galleryContainer {
      border: 1px solid #999;
      padding: 1em;
      margin: 0 0 15px 0;
    }
    #galleryImage {
      border: none;
    }
    </style>
    <script type='text/javascript'>
    /*
      This is a rewrite of the demo at ALA by Jeremy Keith:
      (http://www.alistapart.com/articles/imagegallery/).
      MF, 23Jan07
    */
    window.onload = function()
    {
      if (!document.getElementById || !document.getElementsByTagName) {
        return;
      }
      var a, i;
      a = document.getElementById('galleryContainer').getElementsByTagName('a');
      for (i = 0; i < a.length; ++i) {
        a[i].onclick = showPic;
      }
    }
    function showPic()
    {
      document.getElementById('galleryImage').src = this.href;
      if (this.title) {
        document.getElementById('galleryCaption').childNodes[0].nodeValue = this.title;
      }
      else {
        document.getElementById('galleryCaption').childNodes[0].nodeValue = this.childNodes[0].nodeValue;
      }
      return false;
    }
    </script>
    </head>
    <body>
    
    <div id='galleryContainer'>
    <ul>
    <li><a href="/d/imagegallery/bananas.jpg" title="">some bananas</a></li>
    <li><a href="/d/imagegallery/condiments.jpg" title="Condiments in a Chinese restaurant">two bottles</a></li>
    <li><a href="/d/imagegallery/shells.jpg" title="Seashells on a table">some shells</a></li>
    </ul>
    <p id="galleryCaption">Choose an image to begin</p>
    <img id="galleryImage" src="/d/imagegallery/blank.gif" alt="">
    </div> <!-- end galleryContainer -->
    
    </body>
    </html>

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your advice, I didn't want to be rude or anything. I see everything that people with your experience point me to see.

    Thank you for your advice, I was just a little bit impatient. I am new to the whole web design thing and I am trying to learn as many things as I can.

    CSS XHTML Javascript DOM PHP MySQL, it's a new world for me!

    Sorry one more time for being impatient but I was only trying to solve things one by one.

    I will study more your script and thank you for sharing your knowledge.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I didn't think you were being rude - not at all. Don't worry about that. Besides, I'm only on my first cup of coffee today

    Don't spend too much time on my script (unless you just want to) - I mainly just wanted you to think about the main difference between a feature that requires Javascript and one that does not.

    We are hitting on a very important topic related to creating unobtrusive Javascript enhancements. I'm glad you are interested in learning

    So, the first decision you need to make is... "Do I want the page to work even when Javascript is disabled?"

    If so, then we can begin discussing ideas for embedding the caption data in the HTML. Here's a quick idea: the caption could be above, below or follow the image link. The script could hide it and only display the caption when that link is clicked. When Js is disabled they will see all captions beside their links. But this still doesn't provide a solution for the fact that when Js is disabled and they click the link, there will be no caption on the pic.

    I'm just trying to generate ideas. Please feel free to ask any questions


Bookmarks

Posting Permissions

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