Image Previewer code without javascript

Discussion in 'Javascript' started by mistral, Mar 15, 2007.

  1. mistral

    mistral Guest

    I want find code for clickable thumbnails, when click on small
    picture, a big image will popup in new window, sized to fit picture.
    Same as standard javascript image previewer, but without using
    javascript. I want try do this with html only, that this work on
    browsers with javascript disabled.

    I tried the following, but it still require javascript enabled to show
    popup resized to fit image, otherwise it open a fullscreen window.

    <a href="big.jpg" ONCLICK="if (window.open) { window.open 'big.jpg',
    'popup', 'scrollbars,resizable,width=800,height=600'); return
    false; }"><img src="small.jpg" ALT="Click to enlarge"></a>


    Regards.
    mistral, Mar 15, 2007
    #1
    1. Advertising

  2. mistral

    Evertjan. Guest

    mistral wrote on 15 mrt 2007 in comp.lang.javascript:

    > I want find code for clickable thumbnails, when click on small
    > picture, a big image will popup in new window, sized to fit picture.
    > Same as standard javascript image previewer, but without using
    > javascript. I want try do this with html only, that this work on
    > browsers with javascript disabled.
    >
    > I tried the following, but it still require javascript enabled to show
    > popup resized to fit image, otherwise it open a fullscreen window.
    >
    > <a href="big.jpg" ONCLICK="if (window.open) { window.open 'big.jpg',
    > 'popup', 'scrollbars,resizable,width=800,height=600'); return
    > false; }"><img src="small.jpg" ALT="Click to enlarge"></a>


    If you do not want javascript, why are you asking on this NG?

    Do you ask the butcher for a vegetarian diet?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Mar 15, 2007
    #2
    1. Advertising

  3. mistral

    Noah Sussman Guest

    On Mar 15, 10:36 am, "mistral" <> wrote:

    > I tried the following, but it still require javascript enabled to show
    > popup resized to fit image, otherwise it open a fullscreen window.


    You can't set the size of a window without using JavaScript. If it
    were me, I would consider the fact that the window isn't resized when
    JS is off, to be "graceful degradation," and I would find it
    acceptable.

    Would you consider having the large image pop up in a DIV, instead of
    in a new window? If so then you can probably come up with a pure CSS
    2 solution using the :hover pseudo-class. If you have some CSS drop-
    down menu code lying around, I would imagine you can repurpose that
    into a reasonable image viewer.
    Noah Sussman, Mar 15, 2007
    #3
  4. mistral

    mistral Guest

    On 15 ÍÁÒ, 17:17, "Noah Sussman" <> wrote:
    > On Mar 15, 10:36 am, "mistral" <> wrote:
    >
    > > I tried the following, but it still require javascript enabled to show
    > > popup resized to fit image, otherwise it open a fullscreen window.

    >
    > You can't set the size of a window without using JavaScript. If it
    > were me, I would consider the fact that the window isn't resized when
    > JS is off, to be "graceful degradation," and I would find it
    > acceptable.
    >
    > Would you consider having the large image pop up in a DIV, instead of
    > in a new window? If so then you can probably come up with a pure CSS
    > 2 solution using the :hover pseudo-class. If you have some CSS drop-
    > down menu code lying around, I would imagine you can repurpose that
    > into a reasonable image viewer.

    ------------

    I have nothing against javscript, but some sites do not allow scripts,
    and some browsers may block it. for example, eBay block scripts in
    their listing builder. We still can set the size of a window without
    using JavaScript. I had the sample of a such code, but can no find it,
    have lost somewhere.
    mistral, Mar 15, 2007
    #4
  5. mistral

    ASM Guest

    mistral a écrit :
    > I want find code for clickable thumbnails, when click on small
    > picture, a big image will popup in new window, sized to fit picture.
    > Same as standard javascript image previewer, but without using
    > javascript. I want try do this with html only, that this work on
    > browsers with javascript disabled


    <a target="_blank" onclick="pop(this);return false;" href="big.jpg">

    with :

    function pop(what) {
    window.open(what.href,'','scrollbars,resizable,width=800,height=600');
    }


    or

    <a target="viewer" onclick="popup();" href="big.jpg">

    with :

    function popup() {
    window.open('','viewer','scrollbars,resizable,width=800,height=600');
    }




    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 15, 2007
    #5
  6. mistral

    ASM Guest

    mistral a écrit :
    > We still can set the size of a window without
    > using JavaScript.


    Never I heard it would be possible to set sizes of a window in html ...

    except by user, of course.

    > I had the sample of a such code, but can no find it,
    > have lost somewhere.


    As soon as you find it back, tell it to me.



    You can in pure html open something in a "named" blank window :

    <a target="myNewWindow" blah >

    The link will point to the window named 'myNewWindow',
    if this window doesn't exist (or is closed) the browser will create it.

    If the window 'myNewWindow' has been resized by user, next time a link
    will point to this target the file called will be loaded in this
    'resized' window (unlovely 'myNewWindow' doen't come back on front).

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 15, 2007
    #6
  7. mistral

    mistral Guest

    On 15 ÍÁÒ, 20:03, ASM <>
    wrote:
    > mistral a ecrit :
    >
    > > We still can set the size of a window without
    > > using JavaScript.

    >
    > Never I heard it would be possible to set sizes of a window in html ...
    >
    > except by user, of course.
    >
    > > I had the sample of a such code, but can no find it,
    > > have lost somewhere.

    >
    > As soon as you find it back, tell it to me.
    >
    > You can in pure html open something in a "named" blank window :
    >
    > <a target="myNewWindow" blah >
    >
    > The link will point to the window named 'myNewWindow',
    > if this window doesn't exist (or is closed) the browser will create it.
    >
    > If the window 'myNewWindow' has been resized by user, next time a link
    > will point to this target the file called will be loaded in this
    > 'resized' window (unlovely 'myNewWindow' doen't come back on front).
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac deja depasse
    > Stephane Moriaux and his (less) old Mac already out of date


    ---------------
    Yes, its true, we still need javascript to resize window.
    OK, window will not be resized when Javascript is off, so "smooth
    degradation" would be acceptable.

    <a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"
    onclick="window.open (this.href, 'unique-name',
    'height=325,width=175'); return false"><img alt="Click to enlarge"
    src="http://www.bettiepage.com/images/photos/bikini/bikini1_a.jpg"></
    a>
    mistral, Mar 15, 2007
    #7
  8. mistral

    ASM Guest

    mistral a écrit :
    > Yes, its true, we still need javascript to resize window.
    > OK, window will not be resized when Javascript is off, so "smooth
    > degradation" would be acceptable.
    >
    > <a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"
    > onclick="window.open (this.href, 'unique-name',
    > 'height=325,width=175'); return false"><img alt="Click to enlarge"
    > src="http://www.bettiepage.com/images/photos/bikini/bikini1_a.jpg"></
    > a>


    Except in this case a new window will not be opened if JS is off.
    I think that my other examples (in other post) are closer of the
    expected effect, though 'target' is deprecated.

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 15, 2007
    #8
  9. mistral

    mistral Guest

    On 16 ÍÁÒ, 01:47, ASM <>
    wrote:
    > mistral a ecrit :
    >
    > > Yes, its true, we still need javascript to resize window.
    > > OK, window will not be resized when Javascript is off, so "smooth
    > > degradation" would be acceptable.

    >
    > > <a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"
    > > onclick="window.open (this.href, 'unique-name',
    > > 'height=325,width=175'); return false"><img alt="Click to enlarge"
    > > src="http://www.bettiepage.com/images/photos/bikini/bikini1_a.jpg"></
    > > a>

    ---------
    > Except in this case a new window will not be opened if JS is off.
    > I think that my other examples (in other post) are closer of the
    > expected effect, though 'target' is deprecated.


    > --
    > Stephane Moriaux et son (moins) vieux Mac deja depasse
    > Stephane Moriaux and his (less) old Mac already out of date


    ---------------

    Could you show full code of your example, with small and big images?
    (its not fully clear for me)

    Regards,

    Mistral
    mistral, Mar 16, 2007
    #9
  10. mistral

    ASM Guest

    mistral a écrit :
    > On 16 мар, 01:47, ASM <>
    > wrote:
    >>
    >> I think that my other examples (in other post) are closer of the
    >> expected effect, though 'target' is deprecated.


    > Could you show full code of your example, with small and big images?
    > (its not fully clear for me)


    http://stephane.moriaux.perso.orange.fr/truc/example_pop_img.htm

    http://developer.mozilla.org/en/docs/DOM:window.open

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 17, 2007
    #10
  11. mistral

    OmegaJunior Guest

    On Fri, 16 Mar 2007 00:47:06 +0100, ASM
    <> wrote:

    > mistral a écrit :
    >> Yes, its true, we still need javascript to resize window.
    >> OK, window will not be resized when Javascript is off, so "smooth
    >> degradation" would be acceptable.
    >> <a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg"
    >> onclick="window.open (this.href, 'unique-name',
    >> 'height=325,width=175'); return false"><img alt="Click to enlarge"
    >> src="http://www.bettiepage.com/images/photos/bikini/bikini1_a.jpg"></
    >> a>

    >
    > Except in this case a new window will not be opened if JS is off.
    > I think that my other examples (in other post) are closer of the
    > expected effect, though 'target' is deprecated.
    >


    Target may be deprecated... it still works in all HTML 4.01 browsers. I
    have good hopes for this attribute to survive HTML 5.0.

    --
    Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
    OmegaJunior, Mar 18, 2007
    #11
  12. mistral

    mistral Guest

    On 17 ÍÁÒ, 02:03, ASM <>
    wrote:
    > mistral a ecrit :


    > > On 16 ÍÁÒ, 01:47, ASM <>
    > > wrote:


    > >> I think that my other examples (in other post) are closer of the
    > >> expected effect, though 'target' is deprecated.

    > > Could you show full code of your example, with small and big images?
    > > (its not fully clear for me)


    > http://stephane.moriaux.perso.orange.fr/truc/example_pop_img.htm


    > http://developer.mozilla.org/en/docs/DOM:window.open


    --
    > Stephane Moriaux et son (moins) vieux Mac deja depasse
    > Stephane Moriaux and his (less) old Mac already out of date

    ------------

    Your solution still use javascript.
    My idea was to find way enlarge image (in new window) *without* using
    javascript in html code, via html only. (templated site not allow any
    scripts in html, just block it, so scripts not work).

    mistral
    mistral, Mar 21, 2007
    #12
  13. mistral

    ASM Guest

    mistral a écrit :
    >>> On 16 мар, 01:47, ASM <>
    >>> wrote:

    >
    >> http://stephane.moriaux.perso.orange.fr/truc/example_pop_img.htm
    >> http://developer.mozilla.org/en/docs/DOM:window.open

    >
    > Your solution still use javascript.


    Did you try them with javascript *disabled* ?

    Examples's goal is to have a resized popup if JS
    and if no JS to have a "normal" window.

    > My idea was to find way enlarge image (in new window) *without* using
    > javascript in html code,


    <a target="viewer" href="bigImages/1.jpg"><img src="1s.jpg alt=""></a>
    or :
    <a target="_blank" href="bigImages/1.jpg"><img src="1s.jpg alt=""></a>

    but do not more ask to resize the new window ... (JS feature only)

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 21, 2007
    #13
  14. mistral

    mistral Guest

    On 21 mar, 18:27, ASM <>
    wrote:
    > mistral a ecrit :


    > >>> On 16 ÍÁÒ, 01:47, ASM <>
    > >>> wrote:


    > >>http://stephane.moriaux.perso.orange.fr/truc/example_pop_img.htm
    > >>http://developer.mozilla.org/en/docs/DOM:window.open


    Your solution still use javascript.
    ---------
    > Did you try them with javascript *disabled* ?


    > Examples's goal is to have a resized popup if JS
    > and if no JS to have a "normal" window.


    My idea was to find way enlarge image (in new window) *without* using
    javascript in html code,

    > <a target="viewer" href="bigImages/1.jpg"><img src="1s.jpg alt=""></a>
    > or :
    > <a target="_blank" href="bigImages/1.jpg"><img src="1s.jpg alt=""></a>


    > but do not more ask to resize the new window ... (JS feature only)


    --
    > Stephane Moriaux et son (moins) vieux Mac deja depasse
    > Stephane Moriaux and his (less) old Mac already out of date

    ----------------
    Sure, I tried your code with javascript disabled, it open window non-
    resized.

    When use
    <a target="viewer" href="bigImages/1.jpg" width="800" height="600"
    border="0"><img src="1s.jpg width="150" height="100" alt=""></a>

    it opens new window that is not resized, but about 40% smaller than
    main window(regardless from javascript enabled or disabled), OK this
    is better than full size window.

    Regards,
    mistral
    mistral, Mar 21, 2007
    #14
  15. mistral

    ASM Guest

    mistral a écrit :
    >
    > When use
    > <a target="viewer" href="bigImages/1.jpg" width="800" height="600"
    > border="0"><img src="1s.jpg width="150" height="100" alt=""></a>
    >
    > it opens new window that is not resized, but about 40% smaller than
    > main window(regardless from javascript enabled or disabled), OK this
    > is better than full size window.


    1) never my browsers are opened in full window

    2) never I've seen this kind of code which has no sense

    3) of course for me that doesn't open a "smaller" window ...
    only a "normal" window (same size as main one)
    With which browser do you get that feature ?

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 21, 2007
    #15
  16. mistral

    mistral Guest

    On 21 mar, 21:53, ASM <>
    wrote:
    > mistral a écrit :


    When use <a target="viewer" href="bigImages/1.jpg" width="800"
    height="600" border="0"><img src="1s.jpg width="150" height="100"
    alt=""></a> it opens new window that is not resized, but about 40%
    smaller than main window(regardless from javascript enabled or
    disabled), OK this is better than full size window.
    ----------
    > 1) never my browsers are opened in full window


    > 2) never I've seen this kind of code which has no sense


    > 3) of course for me that doesn't open a "smaller" window ...
    > only a "normal" window (same size as main one)
    > With which browser do you get that feature ?


    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date

    ----------------
    On 21 mar, 21:53, ASM <>
    wrote:
    > mistral a écrit :




    When use <a target="viewer" href="bigImages/1.jpg" width="800"
    height="600" border="0"><img src="1s.jpg width="150" height="100"
    alt=""></a>
    it opens new window that is not resized, but about 40% smaller than
    main window(regardless from javascript enabled or disabled), OK this
    is better than full size window.
    -----
    > 1) never my browsers are opened in full window


    > 2) never I've seen this kind of code which has no sense


    > 3) of course for me that doesn't open a "smaller" window ...
    > only a "normal" window (same size as main one)
    > With which browser do you get that feature ?


    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date

    ------------

    No sense? But its example you show. I just added image attributes
    there. I tested on MSIE 6.0, it open new window that is near 40%
    smaller than main window.

    Probably, better will be to use CSS DHTML code to enlarge images - no
    javascript required.

    <style type="text/css">

    ..thumbnail{
    position: relative;
    z-index: 0;
    }

    ..thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    ..thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px solid blue;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    ..thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    ..thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 160px; /*position where enlarged image should offset
    horizontally */

    }

    </style>


    <a class="thumbnail" href="#thumb"><img src="http://img_small.jpg"
    width="109px" height="145px" border="0" alt="Magnify" /><span><img
    src="http://img_big.jpg" width="534px" height="712px" border="0"
    alt="" /></span></a>

    <a class="thumbnail" href="#thumb"><img src="http://img_small2.jpg"
    width="109px" height="145px" border="0" alt="Magnify" /><span><img
    src="http://img_big2.jpg" width="534px" height="712px" border="0"
    alt="" /></span></a>


    Regards
    mistral
    mistral, Mar 22, 2007
    #16
    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. =?Utf-8?B?Q2FybG8gTWFyY2hlc29uaQ==?=

    Fire Code behind code AND Javascript code associated to a Button Click Event

    =?Utf-8?B?Q2FybG8gTWFyY2hlc29uaQ==?=, Feb 10, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    21,180
    =?Utf-8?B?Q2FybG8gTWFyY2hlc29uaQ==?=
    Feb 11, 2004
  2. Dan
    Replies:
    8
    Views:
    8,217
  3. Laszlo Zsolt Nagy
    Replies:
    1
    Views:
    1,252
    Kartic
    Jan 26, 2005
  4. active
    Replies:
    15
    Views:
    729
    active
    Jun 27, 2007
  5. mistral

    changing image without javascript

    mistral, Mar 2, 2008, in forum: Javascript
    Replies:
    14
    Views:
    444
    mistral
    Mar 4, 2008
Loading...

Share This Page