|
|
|
Baz94
regular
Reg'd: Tue
Posts: 749
Loc: Kent
|
|
hi folks, some help would be appreciated.
I am currently working on my photo website but have a small headache. At present, there are thumbnails of the pictures on the page and when you click on one, it opens up the main size image.
At the moment, when you do this, the image opens in the SAME window which means you have to click "Back" every time you want to go to the main page.
I tried having it set to open the image in a "New frame" but this opens up a full size window and you have to keep closing it when you finish looking at the image.
Is there a way to determine the "size" of the new frame?
I would like to have it so that when a visitor clicks on the image, it opens it up in a new frame but one that fits around the image rather than the frame taking up the whole screen.
I hope that makes sense?
|
|
Zippy_Brown
regular
Reg'd: Fri
Posts: 88
Loc: /dev/null
|
|
Quote:
Is there a way to determine the "size" of the new frame?
Yes, but you'll have to use JavaScript, and you need to bear in mind that some people will have this disabled in their browser, and some browsers are not capable of using JavaScript so you need to code for this accordingly
Take your normal link: <a href="http://example.com">Example Link</a>
and add this: onclick="javascript:window.open('http://example.com', 'window_name','scrollbars=0,location=0,status=0,width=500,height=450,left=200,top=100'); return false;"
so it now looks like: <a href="http://example.com" onclick="javascript:window.open('http://example.com', 'window_name','scrollbars=0,location=0,status=0,width=500,height=450,left=200,top=100'); return false;">Example Link</a>
You should change BOTH urls from http://example.com to wherever you wish to link to (your image) and the width and height variables accordingly.
The left and top variables control it's position when the window opens (careful here, some visitors may have different sized screens)
The scrollbars,location and status variables can be set to 0 (off) or 1 (on) and control the display of these respectively.
Let me know how you get on.
-------------------- Zippy
|
Zippy_Brown
regular
Reg'd: Fri
Posts: 88
Loc: /dev/null
|
|
There are more attributes if you need them, see here: http://www.pageresource.com/jscript/jwinopen.htm
-------------------- Zippy
|
predator
regular
Reg'd: Sun
Posts: 542
|
|
After the line to call the javascript, its a good idea to add a line like the one below - basically if they have javascript enabled then they get the above working fine, but the following line of code will allow for users that dont have it enabled - then they'll get a hyperlink to click on and it will open the page in a new window just not sized perfectly
<noscript><a target="_blank" href="example.htm">View Image 1</a></noscript>
|
Baz94
regular
Reg'd: Tue
Posts: 749
Loc: Kent
|
|
Thanks guys, Really appreciate it. Sorry but 1 more question....
The above codes work great but just 1 snag.... I have the hyperlink embedded in the thumbnails (I.E. people click on the small pic to see the larger image)
The smaller images are in a table... 1 image per square. The snag I have is that when I replace the.... "Normal Link" html code and replace with the new one, The link appears in the box WITH the image  I,E. the web address appears in the box WITH the small image.
How do I have it so it is just the small image in the square and not the image AND the link line?
Thanks again
|
Baz94
regular
Reg'd: Tue
Posts: 749
Loc: Kent
|
|
ah, sorted!
Thanks again guys REALLY appreciate it
|
|
|