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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help adding image alternate description from dynamic photo gallery

    Hi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated.

    Here is the code I have:

    Code:
    <html>
    <head>
        <style media="screen,projection" type="text/css">
    
    /* begin gallery styling */
    #jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; }
    #jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
    #jgal li img { width: 80px; height: 60px; }
    #jgal li.active img { display: block; float: left; }
    #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
    
    /* styling without javascript */
    #gallery { list-style: none; display: block; }
    #gallery li { float: left; margin: 0 10px 10px 0; }
    
        </style>
        <!--[if lt IE 8]>
        <style media="screen,projection" type="text/css">
            #jgal li { filter: alpha(opacity=50); }
            #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
        </style>
    	<![endif]-->
        <script type="text/javascript">        document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
        <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
        <script type="text/javascript">
            var gal = {
                init: function () {
                    if (!document.getElementById || !document.createElement || !document.appendChild) return false;
                    if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
                    var li = document.getElementById('jgal').getElementsByTagName('li');
    enlargedImg = document.createElement('img');
    document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
    enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
      li[0].className = 'active';
      for (i = 0; i < li.length; i++) {
        li[i].style.backgroundRepeat = 'no-repeat';
        li[i].title = li[i].getElementsByTagName('img')[0].alt;
        gal.addEvent(li[i], 'mouseover', function () {
           var im = document.getElementById('jgal').getElementsByTagName('li');
           for (j = 0; j < im.length; j++) {
              im[j].className = '';
                            }
                            this.className = 'active';
    enlargedImg.src = this.getElementsByTagName('img')[0].src;
                  });
               }
            },
          addEvent: function (obj, type, fn) {
                 if (obj.addEventListener) {
                     obj.addEventListener(type, fn, false);
               }
                else if (obj.attachEvent) {
                    obj["e" + type + fn] = fn;
                    obj[type + fn] = function () { obj["e" + type + fn](window.event); }
                    obj.attachEvent("on" + type, obj[type + fn]);
            }
        }
            }
            gal.addEvent(window, 'load', function () {
                gal.init();
            });
        </script>
    </head>
    <body>
    <ul id="gallery">
        <li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li>
        <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li>
        <li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li>
        <li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li>
        <li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li>
        <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li>
        <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li>
    
    </ul>
    </body>
    </html>
    Again, any help is greatly appreciated.

    Thanks,

    Ben.

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts

  • Users who have thanked Sciliano for this post:

    fewer_98 (07-16-2010)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Sciliano. Those are pretty nice. I will give that a shot and let you know how I come out.

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, I ran into a problem trying to get those to work. Kind of hard to explain, but basically the HTML section I am trying to implement this on is with in a third party web site. There are several HTML pages with in the same website link (I know that doesn't make any sense and I don't know how to explain it). So, the styling affects all of the pages. What is also nice about what I have posted is that the images are different sizes. My only hold up is the text. Could anyone explain how to stop the styling from taking effect on all pages in the example that Sciliano posted? I'll be on vacation next week, so I may not be able to repsond until after next week. Help is always appreciated. Sorry for the untechnically explination.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    One more thing. In the link in my original post, there is a post by Steve mentioning how he achieved the text display of the alt text, but I haven't been able to concour it. If someone could help me figure it out that would be appreciated.

    Thanks,

    Ben.


  •  

    Tags for this Thread

    Posting Permissions

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