Page 1 of 1
Web Site
Posted: Mon Apr 25, 2005 3:23 am
by corpse
I hope there are some good web site guys in here.
A simple question really. I have a site with thumbnails and as of now, when you click on a thumbnail to view the full size image, you are just redirected to the image source and the image is displayed.
I'm wondering if it matters if I do this OR if I should create an html file for each full size image so that when you click on a thumbnail, you are taken to another page.
Or does it matter
Posted: Mon Apr 25, 2005 7:44 am
by Grudge
If you don't want to display other information (such as an image caption or something), just link directly to the image. There's no real need to make a html page for each image.
Posted: Mon Apr 25, 2005 3:22 pm
by Tormentius
Grudge wrote:If you don't want to display other information (such as an image caption or something), just link directly to the image. There's no real need to make a html page for each image.
Agreed although it does look a little nicer IMO if there is. It all comes down to personal choice in site design.
Posted: Mon Apr 25, 2005 3:52 pm
by corpse
OK thanks.
My main concern is that there are roughly 16 thumbnails and I didn't know if it's necessary to create that many new html files.
I know it's easy, jsut copy and paste.
Posted: Mon Apr 25, 2005 4:25 pm
by Bacon
What would look nice is using javascript to open the image in a new browser window, with no titlebar, toolbar, statusbar etc, just the close button, which means you can do it all in the <a> tag
Posted: Mon Apr 25, 2005 4:29 pm
by Bacon
Better yet try this:
Put this in the <head> section of your page
Code: Select all
<style type="text/css">
#showimage{
position:absolute;
visibility:hidden;
border: 1px solid gray;
}
#dragbar{
cursor: hand;
cursor: pointer;
background-color: #EFEFEF;
min-width: 100px; /*NS6 style to overcome bug*/
}
#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
}
</style>
<script type="text/javascript">
var ie=document.all
var ns6=document.getElementById&&!document.all
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}
function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"
crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>
Next add this tag to your body tag:
finally, link to the image like so:
Code: Select all
<a href="image.jpg" onClick="return enlarge('lemoncake.jpg',event,'center',300,375)">
Lemon Cake (centered)</a>
This makes it open in a dhtml window, very clean imo, and you can change the colors of the box at the top there, in the styling part.
Posted: Mon Apr 25, 2005 8:51 pm
by corpse
I'm trying to understand this. I have a page with the thumbnails. Each thumbnail needs to go to a larger image.
The page with the thumbnails [8 thumbnails on 1 page] gets this code put in it. The <a href> is for thumbnail 1. What about thumbnails 2-8?
If I put 8 <a href>s on the page with the thumbnails, then when you clicked on thumbnail 1, it would take you to the larger image, but the seven other full sized images would be there also, wouldn't they?
Posted: Mon Apr 25, 2005 8:59 pm
by Bacon
corpse wrote:I'm trying to understand this. I have a page with the thumbnails. Each thumbnail needs to go to a larger image.
The page with the thumbnails [8 thumbnails on 1 page] gets this code put in it. The <a href> is for thumbnail 1. What about thumbnails 2-8?
If I put 8 <a href>s on the page with the thumbnails, then when you clicked on thumbnail 1, it would take you to the larger image, but the seven other full sized images would be there also, wouldn't they?
no just make sure you edit the "filename.jpg" or whatever your image is called in each <a> tag
I see you are using thumbs so use this <a> code
Code: Select all
<a href="actualimage.jpg" onClick="return enlarge('actualimage.jpg',event,'center',300,375)">
<img src="thumbnail.jpg"></img></a>
Just replace "actual image.jpg" and "thumb.jpg" to thier respective file names. Remember, you can point to other dirs but using the "../" in the path
Posted: Tue Apr 26, 2005 5:48 am
by corpse
This works thank you.
But this opens the full image in the same window with a close button.
I want it to open an actual new html page.
Sorry to be a bitch
Posted: Tue Apr 26, 2005 10:28 pm
by Bacon
why would you want it in a whole new html file? Just wondering...
your gonna have to make new html filed for each image now, and the link will now look like this
Code: Select all
<a href="htmlfile" target="_blank">Link name</a>
Now in the html page for each image just use
Thats it...
Posted: Tue Apr 26, 2005 10:58 pm
by corpse
Because I want a transition effect when you click on the thumbnails and go to the full-sized image.
I don't know of another way except to have the full sized image on an actual html page.
Posted: Tue Apr 26, 2005 11:24 pm
by Tormentius
corpse wrote:Because I want a transition effect when you click on the thumbnails and go to the full-sized image.
I don't know of another way except to have the full sized image on an actual html page.
Why bother? Most pages use a similar method to the one Bacon pointed out.
Posted: Thu Apr 28, 2005 3:34 am
by corpse
One last thing Tormentius.
Call Bacon's example method #1
and just using regular html, such as <a href="blah.html"><img src="ee"> as method #2.
Both get you the same end result so what is the advantage of using Bacon's method?
BTW, I really appreciate your guys patience.
Posted: Thu Apr 28, 2005 3:50 am
by Bacon
corpse wrote:One last thing Tormentius.
Call Bacon's example method #1
and just using regular html, such as <a href="blah.html"><img src="ee"> as method #2.
Both get you the same end result so what is the advantage of using Bacon's method?
BTW, I really appreciate your guys patience.
With javascript you can make a much cleaner looking window, ie// no toolbar, statusbar etc, and you can still do your transition effect...
Posted: Thu Apr 28, 2005 5:30 am
by corpse
Let me push my luck here then. I am using a JS code in my test site, but I DO NOT get a transition effect. I will post my code here and tell me what's wrong with it if you would.
...<script>
function openwindow(filename){
window.open(filename,'Window1');
}
</script>
<a href="xx.html" onclick="openwindow(this);return(false);"><img src="xx.gif" style="border:0;height:120px;width:100px;" /></a>
Posted: Thu Apr 28, 2005 12:46 pm
by Bacon
corpse wrote:Let me push my luck here then. I am using a JS code in my test site, but I DO NOT get a transition effect. I will post my code here and tell me what's wrong with it if you would.
...<script>
function openwindow(filename){
window.open(filename,'Window1');
}
</script>
<a href="xx.html" onclick="openwindow(this);return(false);"><img src="xx.gif" style="border:0;height:120px;width:100px;" /></a>
Can you post the code that you are using for your transition effect?
Posted: Thu Apr 28, 2005 12:55 pm
by zerofactor (ryan)
php
Posted: Thu Apr 28, 2005 4:21 pm
by corpse
<META http-equiv="Page-Enter" content="revealTrans(Transition=12,Duration=4.000)">
</head>
Works with when I use just html to link to it, but when I use JS for some reason, it won't transition.
Posted: Thu Apr 28, 2005 4:36 pm
by Bacon
replace page-enter with site-enter, don't know if it will work or not, but try it.
Oh and it that doeset work, switch the "transition.. and duration..." around
Posted: Thu Apr 28, 2005 6:15 pm
by Grudge
transition effects are the html equivalent of lens flares
Posted: Fri Apr 29, 2005 3:15 am
by corpse
Bacon wrote:replace page-enter with site-enter, don't know if it will work or not, but try it.
Oh and it that doeset work, switch the "transition.. and duration..." around
Nope, that doesnt work. Just brings the page up, but no transition.