By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,592 Members | 1,931 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,592 IT Pros & Developers. It's quick & easy.

Image Previewer code without javascript

P: n/a
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.

Mar 15 '07 #1
Share this Question
Share on Google+
15 Replies


P: n/a
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)
Mar 15 '07 #2

P: n/a
On Mar 15, 10:36 am, "mistral" <polych...@softhome.netwrote:
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.
Mar 15 '07 #3

P: n/a
On 15 , 17:17, "Noah Sussman" <blink...@gmail.comwrote:
On Mar 15, 10:36 am, "mistral" <polych...@softhome.netwrote:
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.

Mar 15 '07 #4

P: n/a
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,wid th=800,height=600');
}
or

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

with :

function popup() {
window.open('','viewer','scrollbars,resizable,widt h=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
Mar 15 '07 #5

P: n/a
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).

--
Stephane Moriaux et son (moins) vieux Mac déj* dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 15 '07 #6

P: n/a
On 15 , 20:03, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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>

Mar 15 '07 #7

P: n/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.

--
Stephane Moriaux et son (moins) vieux Mac déj* dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 16 '07 #8

P: n/a
On 16 , 01:47, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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

Mar 16 '07 #9

P: n/a
ASM
mistral a écrit :
On 16 мар, 01:47, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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...le_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
Mar 17 '07 #10

P: n/a
On Fri, 16 Mar 2007 00:47:06 +0100, ASM
<st*********************@wanadoo.fr.invalidwrote :
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/
Mar 18 '07 #11

P: n/a
On 17 , 02:03, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
mistral a ecrit :
On 16 , 01:47, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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...le_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

Mar 21 '07 #12

P: n/a
ASM
mistral a écrit :
>>On 16 мар, 01:47, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
>http://stephane.moriaux.perso.orange...le_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
Mar 21 '07 #13

P: n/a
On 21 mar, 18:27, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
mistral a ecrit :
>On 16 , 01:47, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
>http://stephane.moriaux.perso.orange...le_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

Mar 21 '07 #14

P: n/a
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 ?

--
Stephane Moriaux et son (moins) vieux Mac déj* dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 21 '07 #15

P: n/a
On 21 mar, 21:53, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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=""></ait 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 dj dpass
Stephane Moriaux and his (less) old Mac already out of date
----------------
On 21 mar, 21:53, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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 dj dpass
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

Mar 22 '07 #16

This discussion thread is closed

Replies have been disabled for this discussion.