photo thumbnail and full view pages

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • alex091088180189
    New Member
    • Jul 2008
    • 7

    photo thumbnail and full view pages

    Hi all,

    I'm trying to expand my school's website with new features we've not had before and one of the things I've been wanting to do is to add a photo's section to the website.

    What I'd like is this:

    a photos page that has links to different photo albums (which i can do fine)

    if i were to select an album to view what i'd like is a page of thumbnails, say 24 photos per page arranged in a grid style, 6 rows of 4 thumbnails in each row

    a next page/previous page selector at the bottom (which i haven't tried but think I can do)

    and an enlarged view, so if you click on a picture you get a larger picture on the same page instead of opening a new window, and can then scroll through all the pictures full size

    hope this makes sense. if you want to see what I'd like to do then check out this page:



    any geniouses care to help out an amateur web developer

    many thanks!!!
    Last edited by jhardman; Jul 14 '08, 03:40 AM. Reason: put in [url] tags
  • idsanjeev
    New Member
    • Oct 2007
    • 241

    #2
    You can do it with the help of javascripts
    try this code
    Code:
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <!--Insert this code in the body section and set with your images-->
    <script language="javascript" type="text/javascript">
    
    <!-- Begin
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    
    ns3up = (browserName == "Netscape" && browserVer >= 3);
    ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);
    
    function doPic(imgName) {
    if (ns3up || ie4up) {
    imgOn = ("" + imgName);
    document.mainpic.src = imgOn;
       }
    }
    //  End -->
    </script>
    <center>
    <table width=360 border=1 cellspacing=0 cellpadding=0>
    <tr>
    <td><a href="javascript:doPic('img1.jpg');"><img src="img1.jpg" width=90 height=60 border=0></a></td>
    <td><a href="javascript:doPic('img2.jpg');"><img src="img2.jpg" width=90 height=60 border=0></a></td>
    <td><a href="javascript:doPic('img3.jpg');"><img src="img3.jpg" width=90 height=60 border=0></a></td>
    <td><a href="javascript:doPic('img4.jpg');"><img src="img4.jpg" width=90 height=60 border=0></a></td>
    </tr>
    <tr>
    <td colspan=4 align=center><img name="mainpic" src="img1.jpg" width=365 height=190 border=0></td>
    </tr>
    </table>
    </center>
    </body>
    </html>

    Comment

    • alex091088180189
      New Member
      • Jul 2008
      • 7

      #3
      thanks for that - apart from the java the thumbnails work a treat - for some reason the javascript doesn't work - is there something extra that I need? maybe another app installed or something

      Anyways - like I said code is ace. One thing though - is there a way that I can get the photos opening up on their own instead of in a bigger box underneath the thumbnails? I don't really want to go through and put seperate pages for all the pictures so that they open up in their own window, but I'd prefer it to open the picture full size with no thumbnails, then have maximum thumbnails on a page

      would this be easier linking into a SQL database, as I have a fair few hundred photos to put on here if it works. If so how would I integrate SQL into this? and make it so that I could have one full page for photos and have it just display a photo full size based on what was clicked?


      sorry this is starting to get too much to ask i know!!! really grateful!!!

      Comment

      • jeffstl
        Recognized Expert Contributor
        • Feb 2008
        • 432

        #4
        Yes you are asking alot.

        The javascript posted works fine for me . Quite excellent in fact. If its not working for you make sure the image paths are all correct

        Yes if you have that many images to deal with you would want to generate a page like the one posted for each set of images or an array of images read from a database. That way you can build ONE page that can be built to handle searches or navigation through the many images.

        A database table with all the image paths\names in it would work fine. Then you would read, loop through and write out a given set of images into a dynamic page of the one posted above. Changing the number of images shown at once to whatever you desire.

        If you want a link to the full image then just have a link open a new window when they click on the main image that points directly to the image itself, rather then a html page, or asp page. (Like link directly to http://www.mysite.com/images/imagename.jpg )

        Comment

        • jeffstl
          Recognized Expert Contributor
          • Feb 2008
          • 432

          #5
          I guess also if you are not sure how to do all this you would need to read up on using ASP with Access or MySQL or whatever database you are using.

          Comment

          • idsanjeev
            New Member
            • Oct 2007
            • 241

            #6
            Originally posted by alex09108818018 9
            thanks for that - apart from the java the thumbnails work a treat - for some reason the javascript doesn't work - is there something extra that I need? maybe another app installed or something

            Anyways - like I said code is ace. One thing though - is there a way that I can get the photos opening up on their own instead of in a bigger box underneath the thumbnails? I don't really want to go through and put seperate pages for all the pictures so that they open up in their own window, but I'd prefer it to open the picture full size with no thumbnails, then have maximum thumbnails on a page

            would this be easier linking into a SQL database, as I have a fair few hundred photos to put on here if it works. If so how would I integrate SQL into this? and make it so that I could have one full page for photos and have it just display a photo full size based on what was clicked?


            sorry this is starting to get too much to ask i know!!! really grateful!!!
            After putting codes in body section it working fine .
            i don't know whats your need to display all photo thumbnail you may use it with slide show or fader image show and display it on actual size of image popup window or in photo thumbnail sow it with expanded size on mouse over .
            otherwise if you think this be easier linking into a SQL database then try it .
            if you don't mind post your code here if getting any easier way ......
            thanks
            jha

            Comment

            • alex091088180189
              New Member
              • Jul 2008
              • 7

              #7
              Originally posted by jeffstl
              Yes you are asking alot.

              The javascript posted works fine for me . Quite excellent in fact. If its not working for you make sure the image paths are all correct

              Yes if you have that many images to deal with you would want to generate a page like the one posted for each set of images or an array of images read from a database. That way you can build ONE page that can be built to handle searches or navigation through the many images.

              A database table with all the image paths\names in it would work fine. Then you would read, loop through and write out a given set of images into a dynamic page of the one posted above. Changing the number of images shown at once to whatever you desire.

              If you want a link to the full image then just have a link open a new window when they click on the main image that points directly to the image itself, rather then a html page, or asp page. (Like link directly to http://www.mysite.com/images/imagename.jpg )
              yes after looking closely at the code i didn't realise i needed to put the image name in both

              <td><a href="javascrip t:doPic('img2.jpg');"> <img src="img2.jpg" width=90 height=60 border=0></a></td>

              and

              <td><a href="javascrip t:doPic('img2.j pg');"><img src="img2.jpg" width=90 height=60 border=0></a></td>

              quite how i managed to decide that it didn't need to go in both i don't know

              The original idea was going to have the pictures open up larger in a seperate window - but i wanted to avoid navigating the person away from the website if at all possible. That's why i wanted the picture to open up in another html page that was linked into the photo album. But i migh tre-think that and add it in if i have time

              at the moment we are using SQL database elsewhere on the site for other things so hopefully I can use this to help the user select different albums

              @ idsanjeev

              the reason i don't want to use the java window or a fader/slideshow feature is because each album is potentially 100+ photos, so I wanted to minimise caching and loading times

              thanks for all your help :)

              Comment

              Working...