4 Replies Latest reply on Feb 23, 2010 9:00 AM by mhollis55

    How to click on thumbnail image and display larger image?

    Emilio Corsetti Level 1

      What I want to do should be fairly easy to accomplish, but I've had no success in figuring out how to do this. I want the user to be able to click on a small image placed on the page with text wrap and have a larger image open and have some kind of a close option to close the large image.

       

      After doing a lot of digging, I thought the answer was to create a behaviour for open in new browser window. I selected the image; I opened the behaviousrs panel; I selected the open in new browser; I set the dimensions of the window to the larger image and left all the check boxes unchecked; and gave it an onClick event.

       

      When I preview in live view or in a browser, nothing happens. I don't get any mouse pointer change indicating a link. When you click on the image I get an "error on the page" notification and no window opens up.

       

      Can someone please point me in the right direction? I saw this done in one of the Adobe Dreamweaver tutorials. They didn't show how to do it just how it looked.

        • 1. Re: How to click on thumbnail image and display larger image?
          Nancy OShea Adobe Community Professional & MVP

          This thumbnail image viewer might do what you want (you can change the event trigger to onMouseOver or onClick)

          http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: How to click on thumbnail image and display larger image?
            Emilio Corsetti Level 1

            Thanks for the link. There were two examples on the page. One of the two did exactly what I was looking for (the one that brought up the image in a separate window on the same page). I didn't think it was going to require so much coding to accomplishe this task. I'll download the associated files and see if I can figure out what's going on.

             

            Thanks,

            Emilio

            • 3. Re: How to click on thumbnail image and display larger image?
              Emilio Corsetti Level 1

              I thought I'd provide an update to this discussion. I was pretty sure that the open in a new nbrowser behaviour was the best way to tackle this problem, so I went back and gave it another try. This time it works perfectly. I suspect that I my problem was associated with a template linking problem I had. It's not as elegant as a scripted pop up window, and there is some extra white space I can't figure out, but overall it is a simple solution to an everyday need.

               

              If anyone wants to take a look iy how it works just go to www.EmilioCorsetti.com and click on my picture. I use the technique elsewhere on the site, but this will work for a quick example.

              • 4. Re: How to click on thumbnail image and display larger image?
                mhollis55 Level 4

                There's a free extension I downloaded from Adobe's website called Picture Window Fever that will allow you to quickly set up a "click on this image to open a higher resolution image in a new window" in Dreamweaver. Once you have this installed, from the Dreamweaver's Behaviors panel, click the "+" and you'll see Fever. Choose "Open Picture Window Fever!" and a dialog box will open up for you to browse for a file, name the new window, adjust the window size and adjust its position. I find this very handy for websites where I have images that are too small to show the kind of detail I'm looking to show.

                 

                It's very handy for anyone's gallery, makes a site somewhat interactive and gives the website a "picture is worth a thousand words" selling power.

                 

                Doesn't use Javascript or anything fancy. Just uses a browser's "onclick" function.