SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem positioning thumbnail enlargement

    Hello all!

    I'm new to css and javascript, but up until this point I have been able to muddle through building my site. On the gallery page of my site I'd like to have various thumbnail that enlarge when clicked. I found a javascript on www.dynamicdrive.com that allows me to do this by popping up a larger dragable image. It works fine on the dynamic drive site (http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm) but when I try to get it to work with my site (http://members.shaw.ca/svbodnar/Test.../gallery2.html), the images popup in the middle of the browser, rather than to the bottom right to the cursor. Any ideas on how to reposition the popup to the bottom right? Please bear in mind that I know next to nothing about javascript. Thanks a lot!

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    <SCRIPT language=JavaScript type="text/JavaScript">
    <!--
    function OpenRightWindow(source)
    {
    var h=450; // height of window
    var w=550; // width of window
    var leftPos=(screen.width-w); // left position of window
    var topPos=(screen.height-h); // top position of window
    var pos='left='+leftPos+',top='+topPos;
    props=pos+',width='+w+',height='+h;
    window.open(source,'new',props);
    }
    // -->
    </SCRIPT>

    The above will open the new window with its bottom right corner in the bottom right of the screen. Choose a window size that suits your images and alter the h and w values. Someone might post a version that picks up the image size automatically, but a standard size often works very well. The script as written opens an html page, which contains just the image and a bit or spare space around it. I use a variation on the above very succesfully on a site I'm currently building (not online). You do have to create these extra html pages, but they take about 10 seconds each if you make a spare as a template to work from.

    To use it, your link becomes
    <a href="javascript:OpenRightWindow('filename.htm');"><link text or image source></a>

    Dr john

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help!

    However, I can't seem to get the source images in my gallery to link to their larger versions properly. I keep getting the "page cannot be displayed" error no matter where the pages are in my site hierarchy.

    The script I grabbed from dynamicdrive works - the positioning just gets lost somewhere when I incorporate it into my site. Can't a little bit of code simply be added to it to make the javascript popup window appear according to the position of the cursor?

    Thanks again.

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FiXXXer
    Thanks for the help!

    However, I can't seem to get the source images in my gallery to link to their larger versions properly. I keep getting the "page cannot be displayed" error no matter where the pages are in my site hierarchy.

    The script I grabbed from dynamicdrive works - the positioning just gets lost somewhere when I incorporate it into my site. Can't a little bit of code simply be added to it to make the javascript popup window appear according to the position of the cursor?

    Thanks again.
    Okay, I misread your original question. Here's the reason why the Dynamic Drive script is not working.

    It says on their site enter <div id="showimage></div> on your page

    But you are then supposed to put the images between the two div tags like this

    <div id="showimage>
    <a href="Slideshow_images/Londonderry_2003/001.jpg" onClick="return enlarge('Slideshow_images/Londonderry_2003/001_large.jpg',event)"><img border="0" src="Slideshow_images/Londonderry_2003/001.jpg" width="200" height="150"></a>
    <a href="http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg" onClick="return enlarge('http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg',event)"><img border="0" src="http://images.amazon.com/images/P/0201730847.01.THUMBZZZ.jpg" width="48" height="61"></a>
    <a href="http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg" onClick="return enlarge('http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg',event)"><img border="0" src="http://images.amazon.com/images/P/0201735687.01.THUMBZZZ.jpg" width="47" height="60"></a>
    </div>

    So move the closing </div> from <div id="showimage></div> to the end of your set of links (you already have a closing </div> tag there, leave that one in place as well.)

    Dynamic Drive doesn't state this is required, they are assuming a bit of general knowledge and leaving you to realise what to do next.

    Happy New Year

    Dr John

  5. #5
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I tried playing with the coding and the div tags and it turns out that the div actually needs to be <div id="showimage"></div> otherwise nothing shows up. I got it to work by losing some css and inserting my site around a version of the script I knew worked. I think it had something to do with my css interfering and some wrong quotation marks. Thanks for the help, anyhow. I appreciate it.


Bookmarks

Posting Permissions

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