Image Previewer code without javascript

[mistral]

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.

 

[Evertjan.]

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?

 

[Noah Sussman]

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.

 

[mistral]

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.

 

[ASM]

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');
}

 

[ASM]

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).

 

[mistral]

mistral a ecrit :


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

except by user, of course.


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).

---------------
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>

 

[ASM]

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.

 

[mistral]

mistral a ecrit :

---------
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.

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

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

Regards,

Mistral

 

[ASM]

mistral a écrit :

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

 

[OmegaJunior]

mistral a écrit :

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.

 

[mistral]

mistral a ecrit :

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

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

 

[ASM]

mistral a écrit :

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)

 

[mistral]

mistral a ecrit :

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)

----------------
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

 

[ASM]

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 ?

 

[mistral]

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 ?

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

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 ?

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

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