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

    Dynamic Photo Link Creation

    Ok, bit of a novice and not entirely sure if this is the best way of doing what i want but here goes...

    I would like a user to be able to select from a drop down menu one of (location 1, location 2 or location 3) and then select the date they wish to view from a calendar.

    I would then like to dynamically create the following:

    <a href="Photos/[location]/[date]/HQ/1.jpg"><img src="/Photos/[location]/[date]/TN/1.jpg"</a>

    for a specific e.g. choice location 1, date 21/04/08

    <a href="Photos/location1/210408/HQ/1.jpg"><img src="/Photos/location1/210408/TN/1.jpg"</a>

    And so a dynamic photo is created with a thumbnail and a link to a HQ version of the image.

    Is this possible or am I in the wrong place/dream world.

    Any help much appreciated.

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    	<title>test</title>
    <script type="text/javascript">
    function showThumbnail() {
      var location = document.getElementById('location').value;
      var date = document.getElementById('date').value;
      if ( date.length > 0 && location.length > 0) {
        var a = document.createElement('a');
        a.href = 'Photos/' + location + '/' + date + '/HQ/1.jpg';
        var img = document.createElement('img');
        a.appendChild(img);
        img.src = '/Photos/' + location + '/' + date + '/TN/1.jpg';
        var thumbnail = document.getElementById('thumbnail');
        while ( !!thumbnail.firstChild ) {
          thumbnail.removeChild(thumbnail.firstChild);
        } // endwhile
        thumbnail.appendChild(a);
      }
      return false;
    }
    </script>
    	</head>
    	<body>
        <form method="post" action="">
          <label for="location">location</label>
          <select id="location" name="location">
            <option value=""> - select - </option>
            <option value="location 1">location 1</option>
            <option value="location 2">location 2</option>
            <option value="location 3">location 3</option>
          </select>
          <label for="date">date</label>
          <input type="text" id="date" name="date" value="" />
          <button id="show" name="show" onclick="showThumbnail()">show</button>
        </form>
        <div id="thumbnail">
        </div>
    	</body>
    </html>
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow


  •  

    Posting Permissions

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