iimage_browser : nice thumbnail > link > popup hack

  • I thought I’d share this use of the lovely iimage_browser plugin by Martin Chlupac …

    This uses it’s “custom code thumb” option to put a thumbnail in a post which when clicked pops up a perfectly-sized window with the full image.

    The popup routine is a Javascript function and must be put into /wp-admin/quicktags.js so it’s there when needed. Put the following anywhere in quicktags.js:

    function ViewImage(ifile,ix,iy)
    {
    var ititle = “Click to close” ;
    var win = window.open(“”,”imageviewer”,”width=”+ix+”,height=”+iy+”,menubar=no,toolbar=no”);
    win.document.open();
    win.document.write(“<html><head><title>”+ititle+”</title>”);
    win.document.write(“</head><body onBlur=\”self.close()\” onClick=\”self.close()\”>”);
    win.document.write(‘<div style=”position:absolute;width:’+ix+’px;height:’+iy+’px;left:0px;top:0px”>’);
    win.document.write(“<img src=\””+unescape(ifile)+”\”></div></body></html>”);
    win.document.close();
    }

    Then in /wp-admin/iimage_browser.php find and make this variable read as follows:

    $ib_custom_code_thumb = ‘<img style=”float: left; margin: 0 10px 0px 0; display: inline;” src=”%tsrc” title=”%title” alt=”%title” width=”%twidth” height=”%theight” border=”0″ />‘;

    NOTES
    – Works with iimage_browser v1.4.5 beta (the latest).
    – Seems to work well with different browsers.
    – When clicked or unfocused, the popup closes.
    – Style: you can adjust the style=”…” element to your preference, or remove it to let your theme CSS handle the image style.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Thread Starter kaat

    (@kaat)

    Oh bother, the $ib_custom_code_thumb is showing up wrong above …

    It’s this:

    $ib_custom_code_thumb = ‘<x href=”#” onClick=”ViewImage(\’%src\’,%width,%height)”><img style=”float: left; margin: 0 10px 0px 0; display: inline;” src=”%tsrc” title=”%title” alt=”%title” width=”%twidth” height=”%theight” border=”0″ />’;

    BUT CHANGE <x href to <a href
    !

    Is it possible to post a link to where this code is being used?

    Thread Starter kaat

    (@kaat)

    Sorry, no, I just put it into a new blog that is in development and changing every few minutes ??

    this is not working for me.. ?? why is there a “#” sign where the url should be?

    Thread Starter kaat

    (@kaat)

    I just realised a problem with this:

    If your theme doesn’t include quicktags.js, then of course the popup code isn’t available. So I need to find somewhere to put the Javascript so it’s always available. I’ll post as soon as I figure that out.

    The “#” sign just makes the link be “same place we already are”, while the OnClick element is what opens the new window.

    Will post back ASAP

    Just to clarify, the thumbnail appeard great, but when I clicked it, nothing happened.

    This is actually exactly what I’m looking for, so I hope you’re able to provide a fix for us! ?? ?? thanks.

    Thread Starter kaat

    (@kaat)

    REVISED COMPLETE INSTRUCTIONS:

    Okay, as far as I can see, to guaratee this works, the Javascript needs to be included for each theme you are using. So, instead of putting it in quicktags.js, the thing to do is put it in the theme’s header.

    (1) Edit your theme’s header template (header.php). If your theme doesn’t have a header template, then you’ll need to do this to the default theme. Insert the following on it’s own, anywhere between <head … and </head> :

    <script language=”JavaScript”>
    function ViewImage(ifile,ix,iy)
    {
    var ititle = “Click to close” ;
    var win = window.open(“”,”imageviewer”,”width=”+ix+”,height=”+iy+”,menubar=no,toolbar=no”);
    win.document.open();
    win.document.write(“<html><head><title>”+ititle+”</title>”);
    win.document.write(“</head><body onBlur=\”self.close()\” onClick=\”self.close()\”>”);
    win.document.write(‘<div style=”position:absolute;width:’+ix+’px;height:’+iy+’px;left:0px;top:0px”>’);
    win.document.write(“<img src=\””+unescape(ifile)+”\”></div></body></html>”);
    win.document.close();
    }
    </script>

    (2) In /wp-admin/iimage_browser.php find and make this variable read as follows:

    $ib_custom_code_thumb = ‘<x href=”#” onClick=”ViewImage(\’%src\’,%width,%height)”><img style=”float: left; margin: 0 10px 0px 0; display: inline;” src=”%tsrc” title=”%title” alt=”%title” width=”%twidth” height=”%theight” border=”0″ />’;

    IMPORTANT! Change the <x href above to <a href .. this was just to make the code display properly here.

    NOTES
    – Works with iimage_browser v1.4.5 beta (the latest).
    – Seems to work well with different browsers.
    – When clicked or unfocused, the popup closes.
    – Style: you can adjust the style=”…” element to your preference, or remove it to let your theme CSS handle the image style.

    Sorry for the confusion!

    wonderful! works great now. thanks!

    Anyone care to post a page where this is implemented? I’d like to see it. Sounds great.

    I had this hack working perfectly, but now for some reason I’m getting scrollbars and my images aren’t popping up to the right size.

    can anyone help me figure out why i’m having to scroll slightly to see my image??

    Thread Starter kaat

    (@kaat)

    Not sure at all …

    The obvious question – has anything else been changed? Upgrade? Any processes on the images? Any new plugins? Any other mods?

    And is it the very same pictures that now do not get sized correctly?

    you know I’ve been playing with so many plugins, adding, removing, etc.. it is just so hard to tell what it could be.. ahh thanks though. Maybe I can tinker around and figure it out.

    and yes, i tested the same photo that i had success with before.

    Thread Starter kaat

    (@kaat)

    I suppose the thing to look for is anything that may have impacted iimage_browser – that popup size depends on iimage_browser correctly determining the size of images.

    Kaat, it works wonderfully! Here is an old post of mine that I edited after getting your fix:
    https://etherealangels.net/dreamalittle/2005/01/12/inanna-hypermaniac-choyangbi/

    I like how it closes the window now when you click anywhere on the desktop so no one can right click on the picture. ^^ The only thing I noticed though is that when I click on the thumbnail, my blog automatically jumps to the top so you have to scroll down again to click on the pics. Is there a small fix for this? ??

    Before this, I used to code them everytime I post, like this:
    https://etherealangels.net/dreamalittle/2005/03/08/beautiful-childisolde/

    This window does not close when you click on it but my blog doesn’t jump back up when you click on thumbnail.

    If there is solution to that, it would be 100% perfect for me! ??

    This is what I have been looking for for a looong time. Thank you! And thanks to the IImage coder too. I appreciate very much!

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘iimage_browser : nice thumbnail > link > popup hack’ is closed to new replies.

Tags