Open an autosizing image in the middle of a new page
[ Studied ...calculating..., 6 thanks ]
Have you ever got frustrated when clicking a thumbnail on your page resulted in the opening of a new window with the full-scaled image, but situated in the left-side of your window, and not resizing properly when you resize your browser ? Well, stop the compromise that browsers ask you to do it right there !
The solution lays in using a web-page that is universal for all pictures, and displays a properly-sized picture in the middle of your browsing window.
I did this myself after being utterly annoyed with the way IE displayed my pictures in full screen; it is true, they are resizing, but....only if I'm resizing my browser in a very specific way !!! About centering them....no chance !!!!!
What you need is to create a page, let's say "thepicture.html" in which you predefine how the image should be positioned and what procedure to follow on browser resize.
So, basically, what I have done is to create a webpage which takes the
image's path from the explorer's address bar and displays that image, filtered
through the resizing functions. If you have no idea what I am talking about
and/or you cannot be bothered to code yourself this, just download this "phantom
page" from
here
and get cracking. Don't forget to check out how to use this page, as initially
it has no image in it. For example, considering that you already have the
"thepicture.html"
on your domain, calling it will be something like
|
<a img src="thePath/myImage.jpg" href="thepicture.html?thePath/myImage.jpg" target="_blank"> </a> |
Be sure to specify the whole path and name of your image after the "?" as these are taken as variables in the opening page.
OK, and now....the boring part, in case you want to do this by yourself.....
First, a little demo. Just resize your browser to observe the picture in the iFrame resizing properly, without any overflow.
Resize your browser and watch the picture resizing properly, without any overflow.
You're wondering how did I do this ? Well, even if you don't give a damn about
the explanations, ,
here it comes:
Create a new web page, and call it, let's say, "thepicture.html".
At first, in the "<head>" section of the page you will need to extract the path and name of your image from the address bar, and then declare the function that will trigger the resizing of your picture. You have to determine the height and the length of your browsing area. Of course, you will have to take in consideration that your desired image's length and/or height may be smaller than the browsing area, so you will have to put some clauses there. Don't forget to add the resizing trigger as well.
|
<html> ....... <head> ....... <script src="jquery-1.10.2.min.js"></script>
<script>
}
} </head> ....... </html> |
You'll need "jquery-1.10.2.min.js" to be sure you'll trigger the resizing script only after the image is fully loaded. If you don't have it, is included in the download.
In the "<body>" section of the page, you will declare where your image will be positioned, but you won't give it any target ! (no "src"):
|
<html> ....... <body> .......
<p
align="center"> </body> ....... </html> |
And, finally, you need to point the browser to the desired image and trigger the resizing function (this goes in the "<body>" section as well):
|
<html> ....... <body> .......
<script> </body> ....... </html> |
Now your "phantom page" is done, so all you have to do is call it. Remember, making the link to this page will be a little...different. So, in your page with the thumbnail, you'll have something like:
|
<html> ....... <body> ....... <a href="thepicture.html?thePath/yourImage.jpg" target="_blank">
<img src="yourImage.jpg"
border="0" width="200" height="200"></a> </body> ....... </html> |
It's not necesary to be a ".jpg"; it can be ".png",".gif",...etc. !
Again, if you just want the page, you can download it from here !
Congratulation ! You now have your custom image-showing template ! If there is something you didn't understand or anything else, just leave a comment !
