473,574 Members | 2,634 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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,res izable,width=80 0,height=600'); return
false; }"><img src="small.jpg" ALT="Click to enlarge"></a>
Regards.

Mar 15 '07 #1
15 5902
mistral wrote on 15 mrt 2007 in comp.lang.javas cript:
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,res izable,width=80 0,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
On Mar 15, 10:36 am, "mistral" <polych...@soft home.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
On 15 , 17:17, "Noah Sussman" <blink...@gmail .comwrote:
On Mar 15, 10:36 am, "mistral" <polych...@soft home.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
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(th is);return false;" href="big.jpg">

with :

function pop(what) {
window.open(wha t.href,'','scro llbars,resizabl e,width=800,hei ght=600');
}
or

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

with :

function popup() {
window.open('', 'viewer','scrol lbars,resizable ,width=800,heig ht=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
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="myNewWi ndow" 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
On 15 , 20:03, ASM <stephanemoriau x.NoAd...@wanad oo.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="myNewWi ndow" 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,wid th=175'); return false"><img alt="Click to enlarge"
src="http://www.bettiepage. com/images/photos/bikini/bikini1_a.jpg"> </
a>

Mar 15 '07 #7
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,wid th=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
On 16 , 01:47, ASM <stephanemoriau x.NoAd...@wanad oo.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,wid th=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
ASM
mistral a écrit :
On 16 мар, 01:47, ASM <stephanemoriau x.NoAd...@wanad oo.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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
6891
by: Dev | last post by:
Dear Friends, I am passing the image name, size (in bytes) and imgaeformat (like jpg or bmp or pdf) through the network. I want display the image into picturebox without saving image files into Hard disk. Just display the image into PictureBox.... Is it Possible? If so how do to this?
3
2440
by: Matt | last post by:
Is there a way to execute server code without doing a complete page refresh in .Net? I have an ASP page to convert that uses XMLHTTP and I'm wondering if I should continue to use it in ASPX or do something else. The XMLHTTP is used in ASP to populate drop down boxes based on user input without having to send the entire page contents back and...
8
4352
by: Dan | last post by:
hello all, is there a way to open a new window without javascript and a href=_blank? i need to connect a button click with some lines of code and then, a new window shall get opened. but i didn't find a way to open a new window as result of a buttonm click. thanks for help, dan
1
2811
by: Ismail | last post by:
Hello, What needs to be done to get gridview pagination to work without javascript ie browser has javascript disabled. Is their a property in the gridview control that can be set to do serverside pagination? Many thanks Ismail
1
4458
by: rameshmandapati | last post by:
hi i have a problem with Excel. iam adding data to a cell in Excel using java script var excel = new ActiveXObject ("Excel.Application"); but i want image also i search in google i didnt find any thing regarding this
6
2229
by: mistral | last post by:
Is there way change image (swap) on click on thumbnail without javascript? I.e. main image is big(preview), and below it is two small images - when click on small image, it should change big image. All on one page, without opening new windows.
23
1758
by: WebFoot | last post by:
Is there a reliable way for a webpage to either break out or refuse to display when a hostile website puts it in a frame? I know about the JavaScript solution, but not all visitors have JavaScript enabled. I also know about the target="_top" solution, but that only works if the visitor clicks on a link.
1
2065
paulrajj
by: paulrajj | last post by:
hi, i am newbie to PHP and javascript. i need simple example to crop image using PHP and javascript.. thanks in advance..
0
923
by: B J Patel | last post by:
As I am developing a mobile application Need the HTML / CSS with which I can show msg / Image.... that the Image is loding .. when the big size image is loding.... And then by show the image which is loade... AS I HAVE TRY WITH position:absolute; <div style='position:absolute;'> <image '---- MAIN IMAGE ------>
0
7738
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8077
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8257
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8113
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5634
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5316
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3755
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1358
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1076
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.