ANITIX87 From United States of America, joined Mar 2005, 3233 posts, RR: 14 Posted (6 years 7 months 3 days 21 hours ago) and read 1446 times:
Hey guys!
I am in the process of creating a website to display all my photography, since I have recently entered the DSLR world.
I have most of my site set up (albeit a preliminary version) and have found many very useful scripts online (from www.dynamicdrive.com). There is one thing, however, that I cannot figure out how to do, and there are no scripts for it.
Everybody uses different screen resolutions and browser window sizes. If I have my images set to a certain size (i.e. 1024x768) the images may not fit in a user's browser window, and/or may be too small for their screen. How can I make my images re-size themselves automatically so that they fit on the user's browser screen? Is it a browser-specific thing or is there code I can use?
Thanks!
TIS
www.stellaryear.com: Canon EOS 50D, Canon EOS 5DMkII, Sigma 50mm 1.4, Canon 24-70 2.8L II, Canon 100mm 2.8L, Canon 100-4
IFEMaster From , joined Dec 1969, posts, RR: Reply 1, posted (6 years 7 months 3 days 21 hours ago) and read 1438 times:
Image resizing with HTML alone can't be done. It's possible to add scalability using Flash or Shockwave, but inefficient and effective only to a point. It can also be done using some javascript - there are example class scripts all over the place if you google.
However, most major browsers resize images automatically...
In Internet Explorer:
1. On the Tools menu, click Internet Options.
2. Click the Advanced tab, and then scroll down to the Multimedia section.
3. Select the "Enable Automatic Image Resizing" check box.
In Firefox:
1. On the Tools menu, click Options
2. Click the Advanced button
3. Select the "Resize large images to fit in the browser window" check box.
Not sure where it is Sahara or Opera or some of the others, but I'm sure they call contain the capability.
RichardPrice From , joined Dec 1969, posts, RR: Reply 2, posted (6 years 7 months 3 days 21 hours ago) and read 1438 times:
Quoting ANITIX87 (Thread starter): Everybody uses different screen resolutions and browser window sizes. If I have my images set to a certain size (i.e. 1024x768) the images may not fit in a user's browser window, and/or may be too small for their screen. How can I make my images re-size themselves automatically so that they fit on the user's browser screen? Is it a browser-specific thing or is there code I can use?
If you have the image open on its own, with no HTML on the same page, IE will resize it for you automatically. Firefox has an extension to do it and most sane people will have it installed.
NoUFO From Germany, joined Apr 2001, 7796 posts, RR: 13 Reply 3, posted (6 years 7 months 3 days 21 hours ago) and read 1411 times:
While you can resize you images, I suggest not to do so since it heavily spoils the quality. A browser is not Photoshop or similar, and does not know interpolation.
More important than the size (1024 x 768 is indeed very big) is
a) how good you are in using the JPG file format in order to significantly reduce the file size without reducing the quality too much.
Are you familiar with adding "noise" to your pictures to protect gradient colours?
b) The overall layout of your website. Many non-professionals add too many gimmicks and tinsel that distract from the pictures. Plus, the buttons are often too big, the colours too colourful the used fonts too arbitrarily chosen.
Even professional photographs generally don't present their pictures as big as you plan to do it.
Nighthawk From UK - Scotland, joined Sep 2001, 4990 posts, RR: 38 Reply 4, posted (6 years 7 months 3 days 21 hours ago) and read 1407 times:
Quoting RichardPrice (Reply 2):
If you have the image open on its own, with no HTML on the same page, IE will resize it for you automatically. Firefox has an extension to do it and most sane people will have it installed.
You dont need to install an extension, firefox also automatically resizes images. I would create an HTML page with some thumbnail images, when you click on the image open the fullsize image (and not a page containing the image, ie your URL will be [a href="image.jpg"]link[/a]. That way the users browser will resize it automatically.
Alternatively I would design the page to be viewed fine on 1024x768, as almost 95%+ of users are using this resolution or higher.
ANITIX87 From United States of America, joined Mar 2005, 3233 posts, RR: 14 Reply 5, posted (6 years 7 months 3 days 21 hours ago) and read 1407 times:
Quoting RichardPrice (Reply 2): If you have the image open on its own, with no HTML on the same page,
So you mean have the file in the folder for that be literally just the image? Something like:
html
head
!--blah blah blah--!
/head
body
center img src="aviationGEUPW.jpg" /center
/body
/html
(I have omitted the "<" and ">" as a.net reads it as code and shows nothing if I use them.)
??
TIS
www.stellaryear.com: Canon EOS 50D, Canon EOS 5DMkII, Sigma 50mm 1.4, Canon 24-70 2.8L II, Canon 100mm 2.8L, Canon 100-4
ANITIX87 From United States of America, joined Mar 2005, 3233 posts, RR: 14 Reply 6, posted (6 years 7 months 3 days 21 hours ago) and read 1400 times:
Quoting NoUFO (Reply 3): b) The overall layout of your website. Many non-professionals add too many gimmicks and tinsel that distract from the pictures. Plus, the buttons are often too big, the colours too colourful the used fonts too arbitrarily chosen.
I tried to be very basic while still having a striking look that's east on the eyes. The only colors I use are black, red, and white (Black for the background, red for title fonts, and white for other fonts). My buttons are simply text links, and are size 14 font. My thumbnails are 200 pixels wide, and the full-size images are .jpg format, uncompressed in PS2 (quality value 12), resized to 1024x768, and the pages they are displayed on have no links or anything, just the main title of the site and a small text item declaring that the images are copyrighted to me. Sound good? I've never tried making a site before.
TIS
www.stellaryear.com: Canon EOS 50D, Canon EOS 5DMkII, Sigma 50mm 1.4, Canon 24-70 2.8L II, Canon 100mm 2.8L, Canon 100-4
RichardPrice From , joined Dec 1969, posts, RR: Reply 7, posted (6 years 7 months 3 days 21 hours ago) and read 1396 times:
Quoting Nighthawk (Reply 4): You dont need to install an extension, firefox also automatically resizes images. I would create an HTML page with some thumbnail images, when you click on the image open the fullsize image (and not a page containing the image, ie your URL will be [a href="image.jpg"]link[/a]. That way the users browser will resize it automatically.
The default image manipulation routines in Gecko suck something chronic, which is why I and everyone I know have an ImageMagick extension installed. I must have mentally blocked the fact that FF does do it built in
Quoting ANITIX87 (Reply 5): So you mean have the file in the folder for that be literally just the image? Something like:
No, just point a link at the image, dont have a page pulling the image in.
ANITIX87 From United States of America, joined Mar 2005, 3233 posts, RR: 14 Reply 8, posted (6 years 7 months 2 days 23 hours ago) and read 1343 times:
Quoting RichardPrice (Reply 7): No, just point a link at the image, dont have a page pulling the image in.
Eg:
Click Here!
The link doesn't do anything, at least not for me. It just re-loads this page, haha. So I'm still a little bit confused on just how to do it.
Thanks for the advice, guys.
TIS
www.stellaryear.com: Canon EOS 50D, Canon EOS 5DMkII, Sigma 50mm 1.4, Canon 24-70 2.8L II, Canon 100mm 2.8L, Canon 100-4
RichardPrice From , joined Dec 1969, posts, RR: Reply 9, posted (6 years 7 months 2 days 23 hours ago) and read 1338 times:
Quoting ANITIX87 (Reply 8): The link doesn't do anything, at least not for me. It just re-loads this page, haha. So I'm still a little bit confused on just how to do it.
Whoa, thats just ... wierd.
That link was supposed to be code, not a link. Very much like this:
ANITIX87 From United States of America, joined Mar 2005, 3233 posts, RR: 14 Reply 10, posted (6 years 7 months 2 days 21 hours ago) and read 1322 times:
Thanks. It works just as I wanted it to, but there is one minor issue. One of the things I'm worried about it people stealing images off the site. I don't want to ruin them with watermarks or text on them, so I have found scripts online to disable right-clicking. If I tag images this way to open them by themselves, I can no longer disable right-click, can I? I assume not, since there would be nowhere to place the script.
Any advice?
Thanks.
TIS
www.stellaryear.com: Canon EOS 50D, Canon EOS 5DMkII, Sigma 50mm 1.4, Canon 24-70 2.8L II, Canon 100mm 2.8L, Canon 100-4
RichardPrice From , joined Dec 1969, posts, RR: Reply 11, posted (6 years 7 months 2 days 20 hours ago) and read 1317 times:
Quoting ANITIX87 (Reply 10): Thanks. It works just as I wanted it to, but there is one minor issue. One of the things I'm worried about it people stealing images off the site. I don't want to ruin them with watermarks or text on them, so I have found scripts online to disable right-clicking. If I tag images this way to open them by themselves, I can no longer disable right-click, can I? I assume not, since there would be nowhere to place the script.
Right clicking protection is trivial to get around. Unless you are going to go the whole hog of encapsulating the entire gallery in Flash, theres no foolproof way of protecting those images that cant be bypassed in less than 30 seconds.
Dont bother, is my advice.
If you want to protect them that bad, put the gallery behind a password protected entry barrier and only allow trusted people in.
CaptainJon From , joined Dec 1969, posts, RR: Reply 12, posted (6 years 7 months 2 days 17 hours ago) and read 1298 times:
If you have a server with PHP you can use a tool called Gallery which can automatically generate thumbnails and resizes for you and show it full size for those that what to see the full size. http://gallery.menalto.com
ANITIX87 From United States of America, joined Mar 2005, 3233 posts, RR: 14 Reply 15, posted (6 years 7 months 17 hours ago) and read 1268 times:
Quoting NoUFO (Reply 14): Your thumbnails are no real thumbnails but the actual, big picture scaled down. Better make real thumbnails so the page will load much faster.
I did it intentionally for the sole reason that if they are the full-sized images scaled-down, then when the user clicks on the thumbnail the large one is already loaded and shown instantly. Rather than having the user wait for the large image to load.
So you think having actual thumbs and waiting for the large one would be better?
TIS
www.stellaryear.com: Canon EOS 50D, Canon EOS 5DMkII, Sigma 50mm 1.4, Canon 24-70 2.8L II, Canon 100mm 2.8L, Canon 100-4
NoUFO From Germany, joined Apr 2001, 7796 posts, RR: 13 Reply 16, posted (6 years 7 months 14 hours ago) and read 1255 times:
Quoting ANITIX87 (Reply 15): So you think having actual thumbs and waiting for the large one would be better?
Yes, that's the purpose behind thumbnails. Let's say you display twenty pictures and I want to see only five in full-size, I still have to wait for the twenty pics to load.
ANITIX87 From United States of America, joined Mar 2005, 3233 posts, RR: 14 Reply 17, posted (6 years 7 months 4 hours ago) and read 1247 times:
Quoting NoUFO (Reply 16):
Yes, that's the purpose behind thumbnails. Let's say you display twenty pictures and I want to see only five in full-size, I still have to wait for the twenty pics to load.
Ok. I'll do that, then. Thanks for the advice!
TIS
www.stellaryear.com: Canon EOS 50D, Canon EOS 5DMkII, Sigma 50mm 1.4, Canon 24-70 2.8L II, Canon 100mm 2.8L, Canon 100-4
Sponsor Message: 
From United States of America, joined Mar 2005, 3233 posts, 
From , joined Dec 1969, posts, 
From Germany, joined Apr 2001, 7796 posts, 
From UK - Scotland, joined Sep 2001, 4990 posts, 
Printer friendly format 
![_](javascript:compressPost('1412424','2','1','9','RichardPrice',' Whoa, thats just ... wierd. That link was supposed to be code, not a link. Very much like this: <a href="image.jpg"> Click here! </a>[Edi','')){kind=link}