Web Analytics Made Easy - StatCounter Thumbnails - CodingForum

Announcement

Collapse
No announcement yet.

Thumbnails

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Thumbnails

    ok so here's what i want to do. hope you can help... i don't know much about jscript so this may be easy or impossible. either way, if you don't want to post the basic stuff, i can figure that out myself. but if you see something that sounds difficult please tell me how.

    i have thumbnails on my site. when someone clicks them, i want a window to pop up. i want the window to basically have no scrollbars, no toolbar, etc. i just want the actually pictures, which will vary in size, to show up in the windows. but i want there to be like half a centimeter of white space around the picture on all sides. to clearly define it and everything. and then an 'X' in the top right to close it.... don't know if that will work or if it is too much to ask but hope you understand. thanks for any help...
    Tags: None
  • #2
    I use the following that I got from another major forum poster (spookster maybe?) over at the old WA forum. You can play around with it to get the desired padding around your images. I've never messed with the padding personally.

    Above your </head>, put:

    <script language="javascript">
    <!-- Begin
    function imageView(imgFile,imgTitle,imgWidth,imgHeight,winPosX,winPosY){
    preview = window.open("", "","resizable=yes,toolbar=no,scrollbars=no,menubar=no,status=no,directories=no,width="+imgWidth+",he ight="+imgHeight+",left="+winPosX+",top="+winPosY+"");
    preview.document.write('<html><head><title>'+imgTitle+' - Click to close - <\/title><\/head>'+'<body onBlur="self.focus();" marginWidth="0" marginHeight="0" topmargin="0" leftmargin="0">'+'<center>'+'<a href="javascript:self.close()">'+'<img border="0" alt="Image may take a moment to load. Click the image to close the window." src="'+imgFile+'" width="'+imgWidth+'" height="'+imgHeight+'">'+'<\/a><\/center>'+'<\/body><\/html>');
    preview.document.close();
    }
    // End -->
    </script>

    Some configuration notes (color coded here):

    <!--// Parameter list as follows:
    Image File
    Title of Image
    Width of Image
    Height of Image
    Extra padding space to allow for text
    Window Position X coordinate
    [color=royal blue]Window Position Y coordinate[/color]
    //-->

    Where you have a thumbnail, use the following (change accordingly):

    <a href="javascript:imageView('large-pic.jpg','Place New Window Title Here',600,300,0,0,[color=royal blue]0[/color])"><img border="1" src="thumbnail-pic.jpg" alt="Click for larger image" width="100" height="50"></a>
    Last edited by Gordo; Jul 4, 2002, 04:38 AM.
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

    Comment

    • #3
      another option for ya

      This can also be done with layers. Set your layers to hide as default and each individual one to appear upon mouse click. Make a simple graphic for the 'close window' function (or you can use text) and then set that graphic to hide the layer upon mouse click. It's pretty easy to do in Dreamweaver.

      Hope this helps you - good luck!!

      'ding'

      Comment

      • #4
        wow thanks a lot for all the help... i'll give that a try

        Comment

        • #5
          hmm i'm having trouble now actually. i'd rather not do layers, so i was trying the javascript method posted above. i can't seem to get anything to load besides a dead page though. and i'm not sure if i'm calling the script correctly... like in the href tag. hope someone can help...

          k i think i got it now... i think it just may have been a spacing problem... supposed to be javascript: function instead of java script:function... i think.
          Last edited by everja13; Jul 5, 2002, 01:20 AM.

          Comment

          • #6
            You are correct in that it should be one word. I pasted the code direct from my working web page, but these forums (vB Code) change a special word (like javascript) here and there. And I don't know which ones, nor how to correct it. It's some sort of Moderator secret or something...because I haven't seen any *special instruction* page, etc.

            Nice catch though...on seeing the added space.
            Gordo
            "In the End, we will remember not the words of our enemies, but the silence of our friends."
            - Martin Luther King Jr. (1929-1968)

            Comment

            • #7
              one more thing on this script... what i first wanted was to eliminate the window border and titlebar. however, when trying to do this, i've come across the term 'signed script.' i was wondering how to go about making a script 'signed' since a few javascript features require this.

              thanks...

              Comment

              Previous template Next
              Working...
              X