Newbie, want to learn how to make a photo gallery

[capecodlilly]

Today, I am trying to substitute my images, I usually do it like this, images/whatever.jpg
I put my images into a folder.
Im trying to use this way instead of going to a web site like the real-estate and examples do.
Is this possible?
Here is a screenshot of what I would love to do. If its possible,,,,,,,,

[Beverleyh]

Presumably when you say 'go to a website' you mean using an absolute path in your img src?

You can specify an img src using an absolute path - that will look like "http://www.mywebsite.com/path/to/img.jpg" or "/path/to/img.jpg" (the / at the beginning means 'from the root'), OR you can us a relative path - which looks like "path/to/img.jpg" (no / at the beginning)

Regardless of how you specify your image paths, the images will need to be uploaded to the internet to make them visible online, so you will always 'go to a website' to see them (the text terminology used in your illustration is a bit confusing).

In your sample image you have an arrow pointing to the alt="" attribute - I'm not sure if this is a mistake (did you mean to point to the src="" instead?) or are you asking if alt="" somehow impacts on the way the image location is interpreted? That's not really clear from your question/illustration.

[capecodlilly]

Its difficult for me to describe this, but my other sites always have links to my pictures as images/whatever.jpg.
Here is how I do it with my sites, see screenshot.
I think by the screen shot here that the previous way I did my images by having an image folder in the same directory as the html and css, that it always worked.
When I used a site that made a link the way they do on your example sites here, I put an actual link in such as http://apod.nasa.gov/apod/astropix.html.

Im a beginner pretty much at this, and I really appreciate your patience with me and the instructions,,,,,,,,,

[Beverleyh]

Ok - so its just this part then, using the relative path approach;

You can specify an img src using an absolute path - that will look like "http://www.mywebsite.com/path/to/img.jpg" or "/path/to/img.jpg" (the / at the beginning means 'from the root'), OR you can us a relative path - which looks like "path/to/img.jpg" (no / at the beginning)

[ajfmrf]

As long as the photos you want to use are in that directory then you can use that type of link to them.So that is the big question for you.

Are they there in that same directory? If they are not can you put them there or have someone put them there?

[capecodlilly]

Yes, all my photos are in the same directory, Ive never done it another way unless I want to link to something else entirely, like a NASA site or something.

I did try to work with this one you gave me, its the best yet, but there is no mouseover option with it. But thats OK, I just want to get the gallery working.

It is all distorted in Opera and Firefox, I need to put in pixel size for the photos for that, but is OK with Chrome and Safari, though I dont get the forward or back options yet,
But its a start, and I am thrilled that I have gotten this far. (Pictures not great, iPhone on cloudy day, and our dogs move so fast.)

Here it is so far.
http://www.jcdouglass.net/gallery/this.html

Thank you all! Its much more fun now that Ive finally accomplished something.

[ajfmrf]

I used that script because you wanted that one.It requires you to click on the image.I will see if I can do something but I am not a javascript guru-lol

yep,yep,Vic may be able to offer assistance to get this to work with a mouseover instead of clicking it-I looked at the script but have no idea how to make the changes for you.

[capecodlilly]

This is a wonderful script!
I will practise with adding more of my pictures, as this one does work just like I want.
Then later I can add some text, a background image, and see if when I put the px size in for the pictures, if it will work better in Firefox.

Its incredible what I have learned so far from you people here!

I will work on Vic's script page later on, as the way of adding my pictures is different, as there are 2 links for each picture, I put in another screen shot, so you can see what I am going to try today.
Like I said before, I sure appreciate your instruction here!

[capecodlilly]

Im working on another one, and making some progress, little trouble with my css, but looking better all the time.
Will put it up here this afternoon once I get it looking OK for Safari, the page jumps a bit between the 2 links. And a few more issues.
http://www.jcdouglass.net/gallery/gallery.html
Better,,,,,,,,,

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.gallery {
  width:300px;border:solid red 1px;
}

.gallery IMG{
  width:150px;float:left;
}


#mseDIV{
 position:absolute;overflow:hidden;left:400px;top:300px;width:280px;height:373px;border:solid red 1px;
}

/*]]>*/
</style>

</head>

<body>
 <div id="mseDIV" style="" >
 </div>
 <div id="gal1" class="gallery" >
<img src="http://www.jcdouglass.net/gallery/IMG_6464.jpg" alt="img" title="Image 1"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6467.jpg" alt="img" title="Image 2" />
<img src="http://www.jcdouglass.net/gallery/IMG_6469.jpg" alt="img" title="Image 3" />
<img src="http://www.jcdouglass.net/gallery/IMG_6473.jpg" alt="img" title="Image 4" />
<img src="http://www.jcdouglass.net/gallery/IMG_6476.jpg" alt="img" title="Image 5"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6478.jpg" alt="img" title="Image 6" />
<img src="http://www.jcdouglass.net/gallery/IMG_6485.jpg" alt="img" title="Image 7" />
<img src="http://www.jcdouglass.net/gallery/IMG_6487.jpg" alt="img" title="Image 8" />
<img src="http://www.jcdouglass.net/gallery/IMG_6490.jpg" alt="img" title="Image 9"/>
<img src="http://www.jcdouglass.net/gallery/IMG_6493.jpg" alt="img" title="Image 10" />

 </div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcMouseFade={

 init:function(o){
  var id=o.MouseOverID,ms=o.AnimateDuration,g=document.getElementById(o.GalleryID),d=document.getElementById(id),imgs=g.getElementsByTagName('IMG'),img=document.createElement('IMG'),ary=[],o,z0=0;
  img.style.position='absolute';
  img.style.visibility='hidden';
  img.style.width=d.offsetWidth+'px';
  img.style.height=d.offsetHeight+'px';
  for (;z0<imgs.length;z0++){
   img=img.cloneNode(false);
   img.src=imgs[z0].src;
   d.appendChild(img);
   ary[z0]=[img,0];
   this.addevt(imgs[z0],'mouseover','mse',id,z0,true);
   this.addevt(imgs[z0],'mouseout','mse',id,z0,false);
  }
  img=img.cloneNode(false);
  img.style.position='absolute';
  img.style.visibility='hidden';
  img.style.width=d.offsetWidth+'px';
  img.style.height=d.offsetHeight+'px';
  img.style.zIndex='101';
  d.appendChild(img);
  o=zxcMouseFade['zxc'+id]={
   ary:ary,
   ms:typeof(ms)=='number'?ms:1000,
   lst:ary[0]
  }
 },

 mse:function(id,nu,ud){
  var o=zxcMouseFade['zxc'+id],t;
  if (o&&o.ary[nu]){
   o.lst[0].style.zIndex='0';
   clearTimeout(o.lst[2]);
   this.animate(o,o.lst,o.lst[1],0,new Date(),o.ms*Math.abs((0-o.ary[nu][1])/100)+10);
   o.ary[nu][0].style.visibility='visible';
   clearTimeout(o.ary[nu][2]);
   t=ud?100:0;
   o.ary[nu][0].style.zIndex='2';
   this.animate(o,o.ary[nu],o.ary[nu][1],t,new Date(),o.ms*Math.abs((t-o.ary[nu][1])/100)+10);
   o.lst=o.ary[nu];
  }
 },

 animate:function(o,ary,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ary[1]=now;
   oop.opc(ary[0],now);
  }
  if (ms<mS){
   ary[2]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
  }
  else {
   ary[1]=t;
   oop.opc(ary[0],t);
   if (t==0){
    ary[0].style.visibility='hidden';
   }
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },

 addevt:function(o,t,f,p,p1,p2){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
  }
 }


}

zxcMouseFade.init({
 MouseOverID:'mseDIV',
 GalleryID:'gal1',
 AnimateDuration:1000  //(optional) the animation speed in milli seconds.                        (number, default = no  animation)
});

zxcMouseFade.mse('mseDIV',0,true)

/*]]>*/
</script>

</body>

</html>