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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts

    DOM Scripted Photo Gallery

    http://domscripting.com/domsters/photos.html

    How can I modify this photo gallery script to accomodate a more detailed list and not just pull text from the title attribute?

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all, depending upon which browser you are using different things are happening with this page to begin with. Except for IE, virtually no browser will show the alt attribute of the thumbnails as a 'tooltip' when hovering over them. In a those browsers, the title attribute of the link will be shown. The alt attribute, according to specification, is only to be used if the picture is not loaded. OK, add to that the fact that even IE will not use the alt attribute of the thumbs, as a 'tooltip' if the the thumbs also have a title attribute, it will use the title attribute instead and that all browsers, including IE will use the title attribute of the thumbnail, if present, for the text displayed on hover of the thumbnail, even if the thumbnail's link also has a title attribute, with me so far?

    Good, I thought so. To put this to some practical use, try modifying the HTML of one of the link/thumbnail pairs, say - the first one, which looks like so in the source:

    Code:
            <a href="images/photos/concert.jpg" title="The crowd goes wild">
              <img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" />
            </a>
    Change it to this, and see what happens when you hover the thumbnail and also what happens when you click on it:

    Code:
            <a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
              <img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
            </a>
    - John

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    ok. i THINK i'm following you so far. now what.

  • #4
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do similar for each one and you are done.
    - John

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, i'm not sure we're on the same page. What is it you think i'm trying to do here?

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Isn't there a way to take an Unordered List and have it be displayed underneath the title for each photo with different info for each one?

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by wyclef
    Ok, i'm not sure we're on the same page. What is it you think i'm trying to do here?
    Have expanded text capabilities for display over the top of each of the large images, while still having the mouseover 'tooltip' of the thumbnails be a short or completely different string of text.
    - John

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Not exactly. I'm less concerned with the mouseover tooltip of the thumbnails. I really want to be able to include an unordered list of details underneath the rendered title. I have no clue how to modify the photo.js source of the example posted to accomplish this.

  • #9
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not much room for that in the current layout, try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Jay Skript And The Domsters: Photos</title>
    <base href="http://domscripting.com/domsters/" />
      <link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
      <script type="text/javascript" src="scripts/global.js"></script>
      <script type="text/javascript">
    
    var placeholderTopMargin="20px"; // set to space between thumbnails and large image
    var descriptionHeight="175px"; // set to height for description area
    
    function showPic(whichpic, num) {
      if (!document.getElementById("placeholder")) return true;
      var source = whichpic.getAttribute("href");
      var placeholder = document.getElementById("placeholder");
      placeholder.setAttribute("src",source);
      if (!document.getElementById("description")) return false;
      if (typeof num=='number'&&document.getElementById('cdiv'+num)){
      document.getElementById('description').innerHTML='<span> </span>'+document.getElementById('cdiv'+num).innerHTML;
    }
     else if (whichpic.getAttribute("title")) {
        var text = whichpic.getAttribute("title");
      } else {
        var text = "";
      }
      var description = document.getElementById("description");
      if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue = text;
      }
      return false;
    }
    
    function preparePlaceholder() {
      if (!document.createElement) return false;
      if (!document.createTextNode) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("imagegallery")) return false;
      var placeholder = document.createElement("img");
      placeholder.setAttribute("id","placeholder");
      placeholder.setAttribute("src","images/placeholder.gif");
      placeholder.setAttribute("alt","my image gallery");
      placeholder.style.marginTop=placeholderTopMargin
      var description = document.createElement("div");
      description.style.height=descriptionHeight
      description.setAttribute("id","description");
      var desctext = document.createTextNode("Choose an image");
      description.appendChild(desctext);
      var gallery = document.getElementById("imagegallery");
      insertAfter(placeholder,gallery);
      insertAfter(description,placeholder);
    }
    
    function prepareGallery() {
      if (!document.getElementsByTagName) return false;
      if (!document.getElementById) return false;
      if (!document.getElementById("imagegallery")) return false;
      var gallery = document.getElementById("imagegallery");
      var links = gallery.getElementsByTagName("a");
      for ( var i=0; i < links.length; i++) {
        links[i].onclick = new Function('return showPic(this, '+i+');') 
      }
    }
    
    addLoadEvent(preparePlaceholder);
    addLoadEvent(prepareGallery);
    
    </script>
    </head>
    <body>
      <div id="header">
        <img src="images/logo.gif" alt="Jay Skript and the Domsters" />
      </div>
      <div id="navigation">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="photos.html">Photos</a></li>
          <li><a href="live.html">Live</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Photos of the band</h1>
        <ul id="imagegallery">
          <li>
            <a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
              <img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
            </a>
          </li>
          <li>
            <a href="images/photos/bassist.jpg" title="An atmospheric moment">
              <img src="images/photos/thumbnail_bassist.jpg" alt="the bassist" />
            </a>
          </li>
          <li>
            <a href="images/photos/guitarist.jpg" title="Rocking out">
              <img src="images/photos/thumbnail_guitarist.jpg" alt="the guitarist" />
            </a>
          </li>
          <li>
            <a href="images/photos/crowd.jpg" title="Encore! Encore!">
              <img src="images/photos/thumbnail_crowd.jpg" alt="the audience" />
            </a>
          </li>
        </ul>
      </div>
    <div style="display:none;">
    <!-- Put your descriptions here -->
    <div id="cdiv0">Whatever you like</div>
    <div id="cdiv1"><div style="margin-left:50px;"><ul><li>Yo!<li>an<li>unordered<li>list!</ul></div></div>
    <div id="cdiv2">Can be nothing, like the next one.</div>
    <div id="cdiv3"></div>
    <!-- End descriptions -->
    </div>
    </body>
    </html>
    - John

  • #10
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    maybe it's just one of those days but 'yo, an unordered list' is pretty funny today. This looks to be pretty decent at first glance, I can't really look at it much until tonight. I think my main concern with it would be accesibility. If you remove the styles it doesn't seem like the content descriptions correspond to their photos anymore. I think what would make this thing work is if the descriptions could be put right inside each list element. Like this...that way when the styles are removed it degrades in an understandable way...

    Code:
    <li>
            <a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
              <img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
    <div id="cdiv0">Whatever you like</div>
            </a>
          </li>
    The only problem is I don't think the W3C allows a DIV inside a list element. Thanks for your help on this.

  • #11
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, the style set for the element with the id of 'description' is the style that will affect the displayed content unless it is overridden or added to like I did with the left margin added to the unordered list. In the DOM, the large image and description area appear in the same locations as they did before, only their order is reversed.
    - John

  • #12
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    so does this mean I can't put the description inside the list item for each element? or does that not make any sense?

  • #13
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, yes you can but, I'd think it would be easier to keep them all in one spot. You can do like so:

    Code:
          <li>
            <a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
              <img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
            </a>
    <div class="desc" id="cdiv0">Whatever you like</div>
          </li>
    It will even validate with the current DOCTYPE but you will notice I've given it class="desc". The display must be none:

    Code:
    .desc {
    display:none;
    }
    Now, please bear in mind what is happening here. The script creates a division with the id of 'description'. These other divisions that we are hardcoding into the HTML section are just data containers. It is the content of these divisions that gets inserted into the the description division, not these cdiv# divisions themselves. So, only style within the cdiv# divisions or set for the id 'description' will still apply once the content is made visible. Any style applied to the id's 'cdiv#' or the class 'desc' is destroyed in the translation. This is why we can set the style for 'desc' to display:none and still see the content once it is inserted into the description division.
    - John

  • #14
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I don't see how a div inside a list element will validate. Am I mistaken about this?

  • #15
    Regular Coder
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    375
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I ran it through the w3c validator and the only errors were no closing tags for the li's that I had added and erroneous ones for the script which I now have on the page. With the script returned to an external file (or commented out using the old fashioned <!-- script contents here // --> method as I did for this exercise) and adding </li> tags where required, the page passed the validator with flying colors. It would be useful to remember that a div is a basically meaningless element and can be placed within virtually any other. The anchor tag being the one exception I know of for sure, there may be others.
    - John


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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