Web Analytics Made Easy -
StatCounter How to get images in their original form as thumbnails? - CodingForum

Announcement

Collapse
No announcement yet.

How to get images in their original form as thumbnails?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to get images in their original form as thumbnails?

    I would like to make a photo gallery with thumbnails which can be enlarged by clicking on a thumbnail. I made a first html on www.festifood.gallery5.html. I use a table and thumbnails of photo's with height=80 and width=60 all fixed in the html code. But if an image is square or landscape I'll be in trouble.

    This is my question: is there a way to get the thumbnails automatically in the correct form of original image? So if the image is landscape it shows a landscape thumbnail, of the image is portrait it shows a portrait thumbnail, if it is a square image it shows a square thumbnail.

  • #2
    Hi there kippie,

    apart from suggesting that it would save page load time to use thumbnails instead of full size images, this can be achieved without javascript.
    Have a look at this css example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>scaled thumbnails</title>
    <base href="http://mysite.orange.co.uk/azygous/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    #thumbs {
        width:100px;
        padding:0 5px;
        border:3px double #000;
     }
    #thumbs img {
        width:100%;
        display:block;
        margin:5px 0;
     }
    -->
    </style>
    
    </head>
    <body>
    
    <div id="thumbs">
    <img src="images/Autumn.jpg" alt="" title="800x600"/>
    <img src="images/floating_clouds.jpg" alt="" title="1264x113"/>
    <img src="images/buddha.jpg" alt="" title="770x535"/>
    <img src="images/ball_shad.jpg" alt="" title="300x300"/>
    </div>
    
    </body>
    </html>
    If you mouseover the thumbs you will see the actual image size.

    coothead
    ~ the original bald headed old fart ~

    Comment


    • #3
      Originally posted by coothead View Post
      Hi there kippie,

      apart from suggesting that it would save page load time to use thumbnails instead of full size images, this can be achieved without javascript.
      coothead
      Hi Coothead,

      Thanks for your reaction. You are completely right. Thumbnails are much better. But maybe I was not clear enough. I want to make a new gallery every day with a lot of photos each day. And I don't know which photo is portrait or landcape because I don't want to spend a lot of time in finding this out. So I would like to have a system in which I can load landscape thumbnails en portrait thumbnails mixed together in a random order. Now my problem is that I don't know how to get a nice grid of thumbnails, in which landscape and portrait photos can be loaded at random.

      I hope this make it more clear, if not please let me know.

      Kippie

      Comment


      • #4
        Hi there kippie,

        well try the css method that I have posted. It does just that.

        coothead
        ~ the original bald headed old fart ~

        Comment


        • #5
          Originally posted by coothead View Post
          Hi there kippie,

          well try the css method that I have posted. It does just that.

          coothead
          OK so I tried the following: www.festifood.nl/coothead2.html. But this is not a nice grid, a bit uneven. I don't know if this is possible at all but I wonder if it's possible to get these kind of picture loaded in lines of horizontal cells which have always the same size irrespective of the image loaded.

          Maybe I'm not clear .........????

          Kippie
          Last edited by kippie; Sep 24, 2006, 03:31 PM.

          Comment


          • #6
            Hi there kippie,
            in your original post you say..
            This is my question: is there a way to get the thumbnails automatically in the correct form of original image?
            ...and in your last post you say...
            I wonder if it's possible to get these kind of picture loaded in lines of horizontal cells which have always the same size irrespective of the image loaded.
            So what do you require, thumbs that have the aspect ratio preserved or thumbs that fit specified dimenesions?

            coothead
            ~ the original bald headed old fart ~

            Comment


            • #7
              Originally posted by coothead View Post
              Hi there kippie,
              in your original post you say..

              ...and in your last post you say...

              So what do you require, thumbs that have the aspect ratio preserved or thumbs that fit specified dimenesions?

              coothead
              Hi Coothead,

              Thanks for all your attention and your help in making things clear in English. In fact I would like to have both. My idea is this. Is is possible to have a grid of cells (a table for example) with fixed dimensions (for example 80px by 80 px) and a mechanism that automatically places images in their correct aspect ratio in those cells. So: if it is a landscape image it will be 80px wide and 60 px heigh (with blank space above and under it) and if it is a portrait image it will be 60px wide and 80px heigh with blank spaces on the left and on the right side of it.

              Maybe this is not possible at all and I have to choose one of your choices, but this is what I would like to make.

              Kippie
              Last edited by kippie; Sep 25, 2006, 02:37 AM.

              Comment


              • #8
                Would something like this be any good?

                PHP Code:
                <HTML>
                <
                HEAD>
                <
                TITLE>Dom Table 2</TITLE>

                <
                script type="text/javascript">
                <!--
                var 
                data = [
                "p1.jpg","p2.jpg","p3.jpg","p4.jpg","p5.jpg","p6.jpg","p7.jpg","p8.jpg","p9.jpg","p10.jpg"
                ]

                cellsPerRow=// Number Of cells Per Row

                spanLastCell=// 0 = no, 1 = yes

                function createTable(){
                cellsPerRow=cellsPerRow

                if(cellsPerRow>window["data"].length){
                cellsPerRow=window["data"].length 
                }

                totalCells=window["data"].length
                totalRows
                =Math.ceil(totalCells/cellsPerRow)

                if(
                spanLastCell==0){
                totalCells=Math.ceil(totalCells)
                while(
                totalCells%cellsPerRow != 0){ 
                totalCells++
                window["data"][totalCells-1]=[" "]
                }
                }

                startCount=0
                endCount
                =cellsPerRow

                newTable 
                document.createElement("TABLE")
                newTable.setAttribute("border","1px")
                newTable.setAttribute("id","thumbtable")

                newTBody document.createElement("TBODY")

                for(
                i=0;i<totalRows;i++) {
                newRow=document.createElement("TR")

                for (
                j=startCountj<endCountj++){
                newCell=document.createElement("TD")
                //newCellText = document.createTextNode(data[j]+" "+(j+1))
                //newCell.appendChild(newCellText)

                newImg=document.createElement("IMG")
                newImg.setAttribute("src",data[j])
                newCell.appendChild(newImg)

                spanSize=(totalRows*cellsPerRow)-totalCells
                maxCells
                =totalRows*cellsPerRow
                spanColumns
                =(maxCells-totalCells)+1
                if(j==totalCells-1){
                newCell.colSpan=spanColumns
                newCell
                .align="center"
                }

                newRow.appendChild(newCell)

                }

                startCount+=cellsPerRow
                endCount
                +=cellsPerRow
                if(endCount>totalCells){
                endCount-=endCount-totalCells
                }

                newTBody.appendChild(newRow)

                }

                newTable.appendChild(newTBody)

                document.getElementById("my_table").appendChild(newTable)

                }

                // add to the opening BODY tag

                // -->
                </script>

                <
                style>
                #thumbtable td{
                width:80px;
                height:80px;
                text-align:center;
                }
                </
                style></HEAD>
                <
                BODY onload="createTable()">
                <
                h1><span>Dom Table 2</span></h1>
                <
                P>The length of the array determines how many cells are initially createdchoose how many cells in a row by changing the value of variable <b>cellsPerRow</b>, the script will calculate the number of rows required.

                <
                P>If there is less cell data than there are cells needed to finish the last row the script creates the additional cells to finish the row or you can have the last cell span the remaining columns by changing variable <b>spanLastCell</bto 1.

                <P>
                <
                div id="my_table"></div>

                </
                BODY>
                </
                HTML
                Last edited by Mr J; Sep 25, 2006, 05:26 AM.
                The silent one.

                The most dangerous thing in the world is an idea.
                The most dangerous person in the world is the one with an idea.

                Comment


                • #9
                  Hi there kippie,

                  you may view a javascript example here......and here is the code...
                  Code:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                     "http://www.w3.org/TR/html4/strict.dtd">
                  <html>
                  <head>
                  <title>create three thumb sizes</title>
                  <base href="http://mysite.orange.co.uk/azygous/">
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                  
                  <style type="text/css">
                  <!--
                  body {
                      background-color:#444;
                      color:#fff;
                   }
                  #container {
                      float:left;
                      height:90px;
                      border:3px double #000;
                      background-color:#fff;
                      color:#444;
                   }
                  .hide {
                       visibility:hidden;
                   }
                  .landscape {
                      float:left;
                      width:80px;
                      height:60px;
                      border:1px solid #000;
                      margin:14px 4px;
                   }
                  .portrait {
                      float:left;
                      width:60px;
                      height:80px;
                      border:1px solid #000;
                      margin:4px;
                   }
                  .square {
                      float:left;
                      width:80px;
                      height:80px;
                      border:1px solid #000;
                      margin:4px;
                   }
                  -->
                  </style>
                  
                  <script type="text/javascript">
                  <!--
                     var obj;
                     var preloads=[];
                  
                  function preload(){
                  
                  for(j=0;j< arguments.length;j++) {
                     preloads[preloads.length]=new Image();
                     preloads[preloads.length-1].src=arguments[j];
                    }
                   }
                  preload('images/apple0.jpg','images/dog.jpg','images/Autumn.jpg','images/coot.jpg','images/buddha.jpg','images/ball_shad.jpg','images/ten_quid.jpg','images/big_heart.jpg');
                  
                  window.onload=function() {
                  
                     obj=document.getElementById('container');
                  
                     pict=new Array();
                     anc=new Array();
                  
                  for(c=0;c<preloads.length;c++) {
                     pict[c]=document.createElement('img');
                     pict[c].setAttribute('src',preloads[c].src);
                     anc[c]=document.createElement('a');
                     anc[c].setAttribute('href',preloads[c].src);
                     anc[c].appendChild(pict[c]);
                     obj.appendChild(anc[c]);
                   }
                     changeSize();
                   }
                  
                  function changeSize() {
                     pc=obj.getElementsByTagName('img');
                  for(c=0;c<pc.length;c++) {
                  if(pc[c].offsetWidth>pc[c].offsetHeight) {
                     pc[c].className='landscape'
                   }
                  if(pc[c].offsetWidth==pc[c].offsetHeight) {
                     pc[c].className='square';
                  }
                  if(pc[c].offsetWidth<pc[c].offsetHeight) {
                     pc[c].className='portrait';
                    }
                   }
                     obj.className='';
                   }
                  //-->
                  </script>
                  
                  </head>
                  <body>
                  
                  <div id="container" class="hide"></div>
                  
                  </body>
                  </html>
                  coothead
                  ~ the original bald headed old fart ~

                  Comment


                  • #10
                    Originally posted by Mr J View Post
                    Would something like this be any good?
                    [/PHP]
                    Perfect, thanks a lot.

                    Comment


                    • #11
                      Originally posted by coothead View Post
                      Hi there kippie,

                      coothead
                      Thanks Coothead for all your help. I can use this code very well. Sorry, sometimes it's difficult to express exactly what i want. Thanks again.

                      Kippie

                      Comment

                      Working...
                      X