Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Image Previewer code without javascript (http://www.velocityreviews.com/forums/t930243-image-previewer-code-without-javascript.html)

mistral 03-15-2007 02:36 PM

Image Previewer code without 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>


Regards.


Evertjan. 03-15-2007 02:43 PM

Re: Image Previewer code without javascript
 
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)

Noah Sussman 03-15-2007 03:17 PM

Re: Image Previewer code without javascript
 
On Mar 15, 10:36 am, "mistral" <polych...@softhome.net> 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.



mistral 03-15-2007 03:42 PM

Re: Image Previewer code without javascript
 
On 15 ÍÁÒ, 17:17, "Noah Sussman" <blink...@gmail.com> wrote:
> On Mar 15, 10:36 am, "mistral" <polych...@softhome.net> 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.


ASM 03-15-2007 05:51 PM

Re: Image Previewer code without javascript
 
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

ASM 03-15-2007 06:03 PM

Re: Image Previewer code without javascript
 
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

mistral 03-15-2007 07:10 PM

Re: Image Previewer code without javascript
 
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>


ASM 03-15-2007 11:47 PM

Re: Image Previewer code without javascript
 
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

mistral 03-16-2007 09:44 AM

Re: Image Previewer code without javascript
 
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


ASM 03-17-2007 12:03 AM

Re: Image Previewer code without javascript
 
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


All times are GMT. The time now is 07:44 PM.

Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57