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 3 of 3

Thread: picture gallery

  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    picture gallery

    Hey.


    I would like to to make a image gallery like the one on this page...... http://www.loejtegaardirving.dk/galleri.html .......... anybody who can let me in on some secrets:-)

  • #2
    New Coder
    Join Date
    Nov 2004
    Posts
    55
    Thanks
    8
    Thanked 2 Times in 1 Post
    That was made using javascript for the most part. If you want to see how it was done just view the page source find the <script> tag and go to the src url and you can see how it was done by looking at that and the page source.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this prigram of mine.

    You will obviously need to substitute your own images,

    Frank

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Image Gallery</title>
    <style type="text/css">
    img {
      border: none;
    }
    
    a {
      outline: none;
    }
    
    li {
      display:inline;
    }
    
    #desc {
      font-style: italic;
    }
    </style>
    
    
    <script type="text/javascript" src="imageGallery.js"></script>
    
    </head>
    
    <body bgcolor=#dddddd>
    
    <ul>
      <li><a onclick="toggleMe('para1'); showPic(this); return false;" href="112.jpg" title="Picture 1."><img src="112a.jpg" width="50" height="38"></a></li>
      <li><a onclick="toggleMe('para2'); showPic(this); return false;" href="85.jpg" title="Picture two"><img src="85a.jpg" width="50" height="38"></a></li>
      <li><a onclick="toggleMe('para3'); showPic(this); return false;" href="92.jpg" title="Picture three"><img src="92a.jpg" width="50" height="38"></a></li>
       <li><a onclick="toggleMe('para4'); showPic(this); return false;" href="89.jpg" title="Picture four"><img src="89a.jpg " width="50" height="38"></a></li>
      <li><a onclick="toggleMe('para5'); showPic(this); return false;" href="69.jpg" title="Picture five"><img src="69a.jpg" width="50" height="38"></a></li>
    <a onclick="toggleMe('para6'); showPic(this); return false;" href="110.jpg" title="Picture six"><img src="110a.jpg" width="50" height="38"></a></li>
      <li><a onclick="toggleMe('para7'); showPic(this); return false;" href="93b.jpg" title="Picture one"><img src="93a.jpg
      " width="50" height="38"></a></li>
      <li><a onclick="toggleMe('para8'); showPic(this); return false;" href="winhs13.jpg" title="Picture two"><img src="winhs13a.jpg" width="50" height="38"></a></li>
      <li><a onclick="toggleMe('para9'); showPic(this); return false;" href="YoungSteve.jpg" title="Picture three"><img src="YoungStevea.jpg" width="50" height="38"></a></li>
       <li><a onclick="toggleMe('para10'); showPic(this); return false;" href="Bluebell1.jpg" title="Picture four"><img src="Bluebell1a.jpg
      " width="50" height="38"></a></li>
      <li><a onclick="toggleMe('para11'); showPic(this); return false;" href="web15.jpg" title="Picture five"><img src="web15a.jpg" width="38" height="50"></a></li>
      <li><a onclick="toggleMe('para12'); showPic(this); return false;" href="web17.jpg" title="Picture six"><img src="web17a.jpg" width="50" height="38"></a></li>
    
      </ul>
    
    <!--  Place the title of each image here.  -->
    <div id="para1" style="display:none; font-size: 1.2em; font-weight: 800;">Mr Keogh and Steven at John's wedding.</div>
    <div id="para2" style="display:none; font-size: 1.2em; font-weight: 800;">Steven at Achilla Heights - Dorset.</div>
    <div id="para3" style="display:none; font-size: 1.2em; font-weight: 800;">Steven at Hove. 2007.</div>
    <div id="para4" style="display:none; font-size: 1.2em; font-weight: 800;">Steven walking in the Peak District.</div>
    <div id="para5" style="display:none; font-size: 1.2em; font-weight: 800;">Steve in the Lake District.</div>
    <div id="para6" style="display:none; font-size: 1.2em; font-weight: 800;">Steven, on the Stiper Stones.</div>
    <div id="para7" style="display:none; font-size: 1.2em; font-weight: 800;">Steven at Hove.</div>
    <div id="para8" style="display:none; font-size: 1.2em; font-weight: 800;">Relaxing at Winchester'</div>
    <div id="para9" style="display:none; font-size: 1.2em; font-weight: 800;">Steven - quite a few years ago'</div>
    <div id="para10" style="display:none; font-size: 1.2em; font-weight: 800;">On the "Bluebell Line" - A preserved Railway.</div>
    <div id="para11" style="display:none; font-size: 1.2em; font-weight: 800;">Steven again. Just a boy.</div>
    <div id="para12" style="display:none; font-size: 1.2em; font-weight: 800;">EffPeeTee on the right-a few yrs ago.</div>
    
    
    
    <!--  Place the name of any image you want to initially display here. Do not give the size of this image.  -->
    <img id="placeholder" src="steve.jpg">
    <div id="DivContent"></div>
    <div id="desc">Choose an image to begin</div>
    
    <!--  If you want the smaller images to display at the bottom, place the images in the list above (with the 'onclick' events) here.  -->
    <img src="112.jpg" style="display: none">
    <img src="85.jpg" style="display: none">
    <img src="92.jpg" style="display: none">
    <img src="89.jpg" style="display: none">
    <img src="69.jpg" style="display: none">
    <img src="110.jpg" style="display: none">
    <img src="93b.jpg" style="display: none">
    <img src="winhs13.jpg" style="display: none">
    <img src="YoungSteve.jpg" style="display: none">
    <img src="Bluebell1.jpg" style="display: none">
    <img src="web15.jpg" style="display: none">
    <img src="web17.jpg" style="display: none">
    
    </body>
    </html>
    Javascript. "imageGallery.js"
    Code:
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Jeremy Keith / Anonymous :: http://www.alistapart.com/articles/imagegallery/
    Licensed under: Creative Commons License */
    
    function showPic(whichpic) {
      if (document.getElementById) {
        document.getElementById('placeholder').src = whichpic.href;
        if (whichpic.title) {
          document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
        } else {
          document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
        }
        return false;
      } else {
      return true;
      }
    }
    
    var previousToggle=null;
    function toggleMe(a){
      var e=document.getElementById(a);
      if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block";
        if(previousToggle)previousToggle.style.display="none";
        previousToggle=e;
      }
      return true;
    }
    Last edited by effpeetee; 10-30-2008 at 02:54 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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