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
Web Site
-
Tormentius
- Posts: 4108
- Joined: Sat Dec 14, 2002 8:00 am
Agreed although it does look a little nicer IMO if there is. It all comes down to personal choice in site design.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.
Better yet try this:
Put this in the <head> section of your page
Next add this tag to your body tag:
finally, link to the image like so:
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.
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>Code: Select all
<div id="showimage"></div>Code: Select all
<a href="image.jpg" onClick="return enlarge('lemoncake.jpg',event,'center',300,375)">
Lemon Cake (centered)</a>[b]CAPSLOCK IS ON[/b]
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?
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> tagcorpse 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?
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>[b]CAPSLOCK IS ON[/b]
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
Now in the html page for each image just use
Thats it...
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>Code: Select all
<img src="image.ext"></img>[b]CAPSLOCK IS ON[/b]
-
Tormentius
- Posts: 4108
- Joined: Sat Dec 14, 2002 8:00 am
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...
[b]CAPSLOCK IS ON[/b]
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>
...<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>
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?
[b]CAPSLOCK IS ON[/b]