Magnifying images with 'PopBox'

Discussion in 'Javascript' started by Peter Hunt, Nov 26, 2008.

  1. Peter Hunt

    Peter Hunt Guest

    Hi All,

    Recently, I discovered a interesting piece of javascript which offers
    a nice way of magnifying pictures and other images :

    http://www.c6software.com/Products/PopBox

    I've made some minor changed (Verdana in stead of Arial, and an extra text box
    at the bottom of the small picture) but some visitors tell me that the images
    disappear after they have been clicked. Also, the bottom text box doesn't seem
    to be aligned correctly in IE.

    http://www.gsm-antennes.nl/kpn/index.html

    The same page, but linked to the original script :

    http://www.gsm-antennes.nl/kpn/index-org.html

    Can anyone tell me what the problem is?

    Regards,

    Peter Hunt, Holland
    Peter Hunt, Nov 26, 2008
    #1
    1. Advertising

  2. Peter Hunt

    David Mark Guest

    On Nov 26, 7:51 am, "Peter Hunt" <>
    wrote:
    > Hi All,
    >
    > Recently, I discovered a interesting piece of javascript which offers


    Famous last words.

    > a nice way of magnifying pictures and other images :
    >
    > http://www.c6software.com/Products/PopBox


    Not nice.

    /
    ********************************************************************************************************************
    * PopBox.js, v2.6b Copyright (c) 2008, C6 Software, Inc. (http://
    www.c6software.com/)

    [snip]

    Look at the date.

    * PopBox relies on many methods from Danny Goodman's (www.dannyg.com)
    javascript library DHTMLAPI.js

    A dead library.

    * and his books, without which scores of web developers would be
    totally lost. Thanks Danny.

    Too bad he is still "totally lost." That's what happens when the
    blind lead the blind.

    ********************************************************************************************************************/

    // Seek nested NN4 layer from string name
    function SeekLayer(doc, name) {
    var theObj;
    for (var i = 0; i < doc.layers.length; i++) {
    if (doc.layers.name == name) {
    theObj = doc.layers;
    break;
    }
    // dive into nested layers if necessary
    if (doc.layers.document.layers.length > 0) {
    theObj = SeekLayer(document.layers.document, name);
    }
    }
    return theObj;
    }

    // Convert object name string or object reference into a valid element
    object reference
    function GetRawObject(obj) {
    var theObj;
    if (typeof obj == "string") {
    var isCSS = (document.body && document.body.style) ? true : false;
    if (isCSS && document.getElementById) {
    theObj = document.getElementById(obj);
    } else if (isCSS && document.all) {
    theObj = document.all(obj);
    } else if (document.layers) {
    theObj = SeekLayer(document, obj);
    }
    } else {
    // pass through object reference
    theObj = obj;
    }
    return theObj;
    }

    What a load of BS. Are further comments even necessary?
    David Mark, Nov 26, 2008
    #2
    1. Advertising

  3. Peter Hunt

    SAM Guest

    Le 11/26/08 11:57 PM, David Mark a écrit :
    > * PopBox.js, v2.6b Copyright (c) 2008, C6 Software, Inc. (http://
    > www.c6software.com/)

    (...)
    > Too bad he is still "totally lost."
    >
    > ********************************************************************************************************************/
    >
    > // Seek nested NN4 layer from string name

    (...)
    > // Convert object name string or object reference into a valid element
    > object reference
    > function GetRawObject(obj) {
    > var theObj;

    (...)
    > } else if (document.layers) {
    > theObj = SeekLayer(document, obj);
    > }
    > return theObj;
    > }
    >
    > What a load of BS. Are further comments even necessary?


    Yes please.

    I don't understand :
    - what is 'BS'
    - why not to see if NN4 ?

    --
    sm
    SAM, Nov 26, 2008
    #3
  4. Peter Hunt

    David Mark Guest

    On Nov 26, 6:47 pm, SAM <>
    wrote:
    > Le 11/26/08 11:57 PM, David Mark a écrit :
    >
    >
    >
    > > * PopBox.js, v2.6b Copyright (c) 2008, C6 Software, Inc. (http://
    > >www.c6software.com/)

    > (...)
    > > Too bad he is still "totally lost."

    >
    > > ********************************************************************************************************************/

    >
    > > // Seek nested NN4 layer from string name

    > (...)
    > > // Convert object name string or object reference into a valid element
    > > object reference
    > > function GetRawObject(obj) {
    > >     var theObj;

    > (...)
    > >         } else if (document.layers) {
    > >             theObj = SeekLayer(document, obj);
    > >         }
    > >     return theObj;
    > > }

    >
    > > What a load of BS.  Are further comments even necessary?

    >
    > Yes please.
    >
    > I don't understand :
    > - what is 'BS'


    Bullshit.

    > - why not to see if NN4 ?


    Because it is a waste of time in 2008 for one. For two, the
    inferences made are ridiculous. Read them again.
    David Mark, Nov 27, 2008
    #4
  5. Peter Hunt

    Peter Hunt Guest

    Hi David,

    Thanks for your reply. I guess it really took you a while to sort it all out?
    The world would be a much better place if there would have been more
    people like you. It's really nice that you agree that this is one of best
    scripts ever written. Since you've tested it in all possible browsers and
    didn't find any malfunctions, I'll just leave it like this!

    Best regards,

    Peter Hunt.
    Peter Hunt, Nov 27, 2008
    #5
  6. Peter Hunt

    rf Guest

    "Peter Hunt" <> wrote in message
    news:89108$492e4e76$535626af$...
    > Hi David,
    >
    > Thanks for your reply. I guess it really took you a while to sort it all
    > out?
    > The world would be a much better place if there would have been more
    > people like you. It's really nice that you agree that this is one of best
    > scripts ever written. Since you've tested it in all possible browsers and
    > didn't find any malfunctions, I'll just leave it like this!


    This method is bad for two reasons.

    1)
    The group of reasons David pointed out.

    2)
    It is not presenting thumbnails. It is downloading the entire image and
    resizing it as a thumbnail in the browser. Imagine a page with fifty or so
    thumbnails on it. Real thumbnails (at 3K or so per each) would represent
    150K of download. Large but not unmanagable. This method would result (given
    the size of the first "example") in a page size of six thousand one hundred
    K. Yep. over 6MB. Way over the top. BTW that example page is 3MB. And that
    graduation image, two megabytes of image download that may not even be
    expanded.

    It's a nice idea but the real way to do this is to actually present
    thumbnails to the browser. Real thumbnails. On click the script should hit
    the host for the real image and expand that. That way the user only
    downloads the large images if she wishes to view them.
    rf, Nov 27, 2008
    #6
  7. Peter Hunt

    David Mark Guest

    On Nov 27, 2:38 am, "Peter Hunt" <>
    wrote:
    > Hi David,
    >
    > Thanks for your reply. I guess it really took you a while to sort it all out?


    What does that mean?

    > The world would be a much better place if there would have been more
    > people like you.


    [snip]

    I'll just leave it at that.
    David Mark, Nov 27, 2008
    #7
  8. Peter Hunt

    Peter Hunt Guest

    > It is not presenting thumbnails. It is downloading the entire image and
    > resizing it as a thumbnail in the browser.


    No it is absolutely not :

    <img id="kpn-1"
    alt="kpn1.jpg"
    src="kpn1.jpg"
    pbsrc="kpn01.jpg"
    pbShowPopBar="true"
    pbCaptionPop="Noordwijk"
    pbCaption="De (lange) 900 MHz antennes van KPN"
    class="PopBoxImageSmall"
    title="Klik om te vergroten/verkleinen"
    onclick="Pop(this,100,'PopBoxImageLarge');" />

    In which "kpn1.jpg" is the thumbnail :

    http://www.gsm-antennes.nl/kpn/kpn1.jpg

    And "kpn01.jpg" is the large version :

    http://www.gsm-antennes.nl/kpn/kpn01.jpg

    If there is one thing I hate on the WWW, it is the scaling of images.
    Maybe the script isn't perfect, I didn't post it without a reason, but
    it actually displays the thumbnails and caches the large versions so
    they can be displayed quicker when a thumbnail is being clicked.

    Bye, Peter.
    Peter Hunt, Nov 27, 2008
    #8
  9. Peter Hunt

    Peter Hunt Guest

    >> Thanks for your reply. I guess it really took you a while to sort it all out?

    > What does that mean?


    It means : "If you think you are funny, YOU ARE NOT".

    Anyway, thanks for replying. I seems to be a lot of fun replying without
    really helping someone.....

    Peter.
    Peter Hunt, Nov 27, 2008
    #9
  10. Peter Hunt

    David Mark Guest

    On Nov 27, 8:10 am, "Peter Hunt" <>
    wrote:
    > >> Thanks for your reply. I guess it really took you a while to sort it all out?

    > > What does that mean?

    >
    > It means : "If you think you are funny, YOU ARE NOT".


    Who is trying to be funny? You shouldn't be using that script.

    >
    > Anyway, thanks for replying. I seems to be a lot of fun replying without
    > really helping someone.....


    What is it about browser scripting that brings out the mental
    defective in everyone? What more help did you expect? Dump the
    script and find another one. That may not be welcome advice, but it
    is good advice. And if you don't trust the advice of this group, why
    ask questions here?

    [snip]
    David Mark, Nov 27, 2008
    #10
  11. Peter Hunt

    rf Guest

    "Peter Hunt" <> wrote in message
    news:80a67$492e9be5$535626af$...
    >> It is not presenting thumbnails. It is downloading the entire image and
    >> resizing it as a thumbnail in the browser.

    >
    > No it is absolutely not :


    Yes, it absolutely is.

    Look at the page you supplied the URL for. Scroll down to the first images,
    of a castle. RIght click>properties (or whatever) on the left one. It is a
    "thumbnail" that is 122.49KB in size.

    Click the image to "expand" it. Check the properties again of that image.
    122.49K. It's the same image.


    > <img id="kpn-1"
    > alt="kpn1.jpg"
    > src="kpn1.jpg"
    > pbsrc="kpn01.jpg"
    > pbShowPopBar="true"
    > pbCaptionPop="Noordwijk"
    > pbCaption="De (lange) 900 MHz antennes van KPN"
    > class="PopBoxImageSmall"
    > title="Klik om te vergroten/verkleinen"
    > onclick="Pop(this,100,'PopBoxImageLarge');" />
    >
    > In which "kpn1.jpg" is the thumbnail :


    Ah so there is an "option" for different images or something. Not good
    enough. This thing should *enforce* different images. The way it is it
    encourages download of images and resizing them in the browser.

    And what is the validator going to think about the above <img> tag? It'll
    flip.

    > If there is one thing I hate on the WWW, it is the scaling of images.


    So why advocate the use of something that encourages it?

    > Maybe the script isn't perfect, I didn't post it without a reason, but
    > it actually displays the thumbnails and caches the large versions so
    > they can be displayed quicker when a thumbnail is being clicked.


    Ah, so even if I choose to use this option to use different images it still
    downloads the large image, including that two megabyte image of a
    graduation?

    I pity any dialup users who stumble upon this. Or somebody viewing it on
    their telephone.
    rf, Nov 27, 2008
    #11
  12. Peter Hunt

    Peter Hunt Guest

    > Recently, I discovered a interesting piece of javascript which offers
    > a nice way of magnifying pictures and other images :


    People, I've decided to leave the script the way it is, as there is absolutely
    ZERO input form anyone, other than saying that the script isn't good enough.

    Thanks for your time, all! :)

    Peter.
    Peter Hunt, Nov 28, 2008
    #12
  13. Peter Hunt

    David Mark Guest

    On Nov 28, 6:06 am, "Peter Hunt" <>
    wrote:
    > > Recently, I discovered a interesting piece of javascript which offers
    > > a nice way of magnifying pictures and other images :

    >
    > People, I've decided to leave the script the way it is, as there is absolutely
    > ZERO input form anyone, other than saying that the script isn't good enough.


    So "not good enough" is good enough for you. Fine for you, just keep
    it to yourself.

    >
    > Thanks for your time, all! :)


    Don't forget to remove the script from your server. Sorry it didn't
    work out!

    [snip]
    David Mark, Nov 28, 2008
    #13
  14. Peter Hunt

    fistakus Guest

    On Nov 26, 1:51 pm, "Peter Hunt" <>
    wrote:
    > Hi All,
    >
    > Recently, I discovered a interesting piece of javascript which offers
    > a nice way of magnifying pictures and other images :
    >
    > http://www.c6software.com/Products/PopBox
    >
    > I've made some minor changed (Verdana in stead of Arial, and an extra text box
    > at the bottom of the small picture) but some visitors tell me that the images
    > disappear after they have been clicked. Also, the bottom text box doesn't seem
    > to be aligned correctly in IE.
    >
    > http://www.gsm-antennes.nl/kpn/index.html
    >
    > The same page, but linked to the original script :
    >
    > http://www.gsm-antennes.nl/kpn/index-org.html
    >
    > Can anyone tell me what the problem is?
    >
    > Regards,
    >
    > Peter Hunt, Holland


    Hello,

    If u are still interested in solving that problem... it's a well known
    problem with borders in IE. In IE border width is included in width of
    element, so if you want the title to display properly you should
    rewrite the code for divCapTrans var.

    The solution is to wrap this div (without border) with another div
    (without width and height but with border), so this:
    var divCapTrans = document.createElement("div");
    divCapTrans.id = "popBoxDivCapTrans" + z;
    divCapTrans.style.width = width - 2 + "px";
    divCapTrans.style.height = "20px";
    divCapTrans.style.borderStyle = "solid";
    divCapTrans.style.borderWidth = "1px";
    divCapTrans.style.borderColor = "#999999";
    divCapTrans.style.padding = "0px";
    divCapTrans.style.margin = "0px";
    divCapTrans.style.position = "absolute";
    divCapTrans.style.left = left + "px";
    divCapTrans.style.top = top - 1 + "px";
    divCapTrans.style.backgroundColor = "#ffffdd";
    divCapTrans.style.zIndex = z;
    should be replaced with this:
    var divCapTrans = document.createElement("div");
    divCapTrans.style.width = (width - 2) + "px";
    divCapTrans.style.height = "20px";
    divCapTrans.style.margin = "0px";
    divCapTrans.style.backgroundColor = "#ffffdd";

    var pbCaptionBordered = document.createElement("div");

    pbCaptionBordered.style.border = "solid 1px #999999";
    pbCaptionBordered.style.zIndex = z;
    pbCaptionBordered.style.position = "absolute";
    pbCaptionBordered.style.left = left + "px";
    pbCaptionBordered.style.top = top - 2 + "px";
    pbCaptionBordered.style.padding = "0px";
    pbCaptionBordered.id = "popBoxDivCapTrans" + z;

    then you must add these elements in proper order so:
    parentNode.appendChild(divCapTrans);
    fnRemove.push(function(){divCapTrans.parentNode.removeChild
    (divCapTrans);});
    will be:
    pbCaptionBordered.appendChild(divCapTrans);
    parentNode.appendChild(pbCaptionBordered);
    fnRemove.push(function(){pbCaptionBordered.parentNode.removeChild
    (pbCaptionBordered);});

    and change line which adds a caption:
    AddCaptionText(divCapTrans, divCapText, pbCaption);
    to this:
    AddCaptionText(pbCaptionBordered, divCapText, pbCaption);

    This clue does not solve the problem in 100% - in IE there is stil
    some problem but I think that you should be able to tackle this alone.

    Best regards,
    Magda
    fistakus, Nov 28, 2008
    #14
  15. Peter Hunt

    David Mark Guest

    On Nov 28, 9:05 am, fistakus <> wrote:
    > On Nov 26, 1:51 pm, "Peter Hunt" <>
    > wrote:
    >
    >
    >
    > > Hi All,

    >
    > > Recently, I discovered a interesting piece of javascript which offers
    > > a nice way of magnifying pictures and other images :

    >
    > >http://www.c6software.com/Products/PopBox

    >
    > > I've made some minor changed (Verdana in stead of Arial, and an extra text box
    > > at the bottom of the small picture) but some visitors tell me that the images
    > > disappear after they have been clicked. Also, the bottom text box doesn't seem
    > > to be aligned correctly in IE.

    >
    > >http://www.gsm-antennes.nl/kpn/index.html

    >
    > > The same page, but linked to the original script :

    >
    > >http://www.gsm-antennes.nl/kpn/index-org.html

    >
    > > Can anyone tell me what the problem is?

    >
    > > Regards,

    >
    > > Peter Hunt, Holland

    >
    > Hello,
    >
    > If u are still interested in solving that problem... it's a well known
    > problem with borders in IE. In IE border width is included in width of


    [snip]

    You are confused and the script has been condemned anyway. Why
    rearrange deck chairs on the Titanic?
    David Mark, Nov 28, 2008
    #15
  16. Peter Hunt

    fistakus Guest

    On Nov 28, 4:27 pm, David Mark <> wrote:
    > On Nov 28, 9:05 am, fistakus <> wrote:
    >
    >
    >
    > > On Nov 26, 1:51 pm, "Peter Hunt" <>
    > > wrote:

    >
    > > > Hi All,

    >
    > > > Recently, I discovered a interesting piece of javascript which offers
    > > > a nice way of magnifying pictures and other images :

    >
    > > >http://www.c6software.com/Products/PopBox

    >
    > > > I've made some minor changed (Verdana in stead of Arial, and an extratext box
    > > > at the bottom of the small picture) but some visitors tell me that the images
    > > > disappear after they have been clicked. Also, the bottom text box doesn't seem
    > > > to be aligned correctly in IE.

    >
    > > >http://www.gsm-antennes.nl/kpn/index.html

    >
    > > > The same page, but linked to the original script :

    >
    > > >http://www.gsm-antennes.nl/kpn/index-org.html

    >
    > > > Can anyone tell me what the problem is?

    >
    > > > Regards,

    >
    > > > Peter Hunt, Holland

    >
    > > Hello,

    >
    > > If u are still interested in solving that problem... it's a well known
    > > problem with borders in IE. In IE border width is included in width of

    >
    > [snip]
    >
    > You are confused and the script has been condemned anyway.  Why
    > rearrange deck chairs on the Titanic?


    Hmmm, I thought that there was a question about aligning the title. ;)

    I didn't write about the code - because you all did (and I'm not an
    expert - just learning). If it's so badly written maybe someone can
    point to better ones, please? Or maybe the one who asked will rewrite
    it? Regardless, it's still good to know that borders in IE behave not
    as they should, standardwise.

    best regards,
    Magda
    fistakus, Nov 29, 2008
    #16
  17. Peter Hunt

    David Mark Guest

    On Nov 29, 7:12 am, fistakus <> wrote:
    > On Nov 28, 4:27 pm, David Mark <> wrote:
    >
    >
    >
    > > On Nov 28, 9:05 am, fistakus <> wrote:

    >
    > > > On Nov 26, 1:51 pm, "Peter Hunt" <>
    > > > wrote:

    >
    > > > > Hi All,

    >
    > > > > Recently, I discovered a interesting piece of javascript which offers
    > > > > a nice way of magnifying pictures and other images :

    >
    > > > >http://www.c6software.com/Products/PopBox

    >
    > > > > I've made some minor changed (Verdana in stead of Arial, and an extra text box
    > > > > at the bottom of the small picture) but some visitors tell me that the images
    > > > > disappear after they have been clicked. Also, the bottom text box doesn't seem
    > > > > to be aligned correctly in IE.

    >
    > > > >http://www.gsm-antennes.nl/kpn/index.html

    >
    > > > > The same page, but linked to the original script :

    >
    > > > >http://www.gsm-antennes.nl/kpn/index-org.html

    >
    > > > > Can anyone tell me what the problem is?

    >
    > > > > Regards,

    >
    > > > > Peter Hunt, Holland

    >
    > > > Hello,

    >
    > > > If u are still interested in solving that problem... it's a well known
    > > > problem with borders in IE. In IE border width is included in width of

    >
    > > [snip]

    >
    > > You are confused and the script has been condemned anyway.  Why
    > > rearrange deck chairs on the Titanic?

    >
    > Hmmm, I thought that there was a question about aligning the title. ;)


    The answer is to not bother. Throw it away.

    >
    > I didn't write about the code - because you all did (and I'm not an
    > expert - just learning). If it's so badly written maybe someone can
    > point to better ones, please? Or maybe the one who asked will rewrite it?
    > Regardless, it's still good to know that borders in IE behave not
    > as they should, standardwise.


    Except that that is an inaccurate statement.

    [snip]
    David Mark, Nov 29, 2008
    #17
  18. Peter Hunt

    Jacket Guest

    Instead of using that broken script, use this script:

    http://www.magictoolbox.com/magicmagnify/

    It works in all browsers and does not rely on a JavaScript library or
    framework.

    While you are there, look at the other two scripts as well - Magic
    Zoom and Magic Thumb.
    Jacket, Dec 23, 2008
    #18
  19. Peter Hunt

    David Mark Guest

    On Dec 23, 4:12 am, Jacket <> wrote:
    > Instead of using that broken script, use this script:
    >
    > http://www.magictoolbox.com/magicmagnify/


    That is a Flash movie.

    >
    > It works in all browsers and does not rely on a JavaScript library or
    > framework.


    I very much doubt it works in "all browsers." And of course, it won't
    work in any browser without Flash.

    >
    > While you are there, look at the other two scripts as well - Magic
    > Zoom and Magic Thumb.


    I don't like Spam!
    David Mark, Dec 23, 2008
    #19
  20. Peter Hunt

    rf Guest

    Jacket wrote:
    > Instead of using that broken script,


    What script. Were you perchance answering somebody?


    > use this script:
    >
    > http://www.magictoolbox.com/magicmagnify/


    Flash. No thanks. I prefer to serve my viewers real images.
    rf, Dec 23, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    4
    Views:
    894
    Eliyahu Goldin
    Jan 4, 2005
  2. Luis Esteban Valencia Muñoz
    Replies:
    0
    Views:
    769
    Luis Esteban Valencia Muñoz
    Jun 3, 2005
  3. Timasmith
    Replies:
    1
    Views:
    641
    Thomas Fritsch
    Feb 2, 2007
  4. John Mary
    Replies:
    0
    Views:
    389
    John Mary
    Dec 16, 2010
  5. Amir

    Magnifying Glass script

    Amir, May 15, 2004, in forum: Javascript
    Replies:
    1
    Views:
    153
    Juliette
    May 16, 2004
Loading...

Share This Page