PDA

View Full Version : Newbie, want to learn how to make a photo gallery



capecodlilly
12-19-2012, 06:25 PM
I am fairly new to web design, and want to learn how to make a photo gallery. I have seen ones where you click upon the thumbnail picture in a group of pictures, then that particular one comes up to large size in front center, then you see a 'next' or 'previous', and if you hit next you are taken to the next photo at large size. An X at the bottom, takes you back to only the thumbnail pix. The real estate people use this script, or whatever it is, to show details of houses. When the big picture is present on the page, the background darkens somewhat.
Im interested in learning to do this with my own photography.
I found something called jQuery, but have no idea of how to use it on my site, so you know that Im pretty new at this.
However I have used 2Dynamic Drive scripts before, and was able to follow their Excellent! instructions of how to use them in my html page.
But this jQuery one I found on the web, didnt have the great instructions that I have found here.

Hope Im not asking too much, but I would LOVE to be able to make a gallery or slide show like this.
And I know if anybody can make it work for a pretty much newbie like me, then you people here will.
I have a screenshot if that would help, I can post it later if needed.
Thank you in advance.

ajfmrf
12-19-2012, 07:13 PM
Did you look at the scripts available at http://www.dynamicdrive.com/?

There are a lot there and if you do a google there are probally thousands of scripts available online

capecodlilly
12-19-2012, 09:09 PM
4853Yes, dynamicdrive is where I got the ones I have used already in the past.
I did Google for the gallery scripts too, but the particular one close to what I am looking for was on jQuery site and the instructions were way way beyond me.
Thats why there will be someone here at dynamicdrive who will probably know what Im looking for.
And the instructions on dynamicdrive are much much better than others.
Here is a screenshot of what I would love to learn. Its not a great shot but hopefully someone here will be able to guide me to it or something close.
Thank you

capecodlilly
12-19-2012, 09:54 PM
Goodness, I got this for a reply, something doesnt look correct, moderator please take a look at this, as its what I just got.
Here is the message that has just been posted:
***************
[Mod's Note] - I've removed this, to stop the seo boost from the links.

ajfmrf
12-19-2012, 10:15 PM
The mods have removed it fro the looks(it is not there now)

I don't see what gallery script you are talking about.

You will need to provide a direct link to it.Also you will need to let us know if and what you already have .

Beverleyh
12-19-2012, 10:23 PM
For your image gallery, are you looking for something that will pull images from a specific folder and 'build' the gallery for you (also including the enlargement overlay automatically) or are you happy to create the grid of thumbnail images in HTML yourself and then just implement the enlargement overlay with a jQuery plugin manually?

I guess it comes done to how much work you're willing to put in and how often the page needs to be updated. If the pages (or at least the gallery/image parts) are generally static, an HTML + jQuery plugin would probably be fine, but if the image galleries require frequent updates, you might be better off using php to pull all the images from a folder and generate the gallery html on the fly.

Which scenario do you think works best for your situation?

Aside from the gallery thumb grid setup, what's the jQuery script you've found? Can you give us a link?
I personally like Fancybox and think it does what you need : http://fancyapps.com/fancybox/
The standalone demo page might be easier for you to get your head around though : http://fancyapps.com/fancybox/demo/
Have a look at the source code and see if you can fit it into your project.

Let us know how you get on - you'll probably need to provide a link to your page so we can help you further though.

keyboard
12-19-2012, 10:26 PM
Yes, I removed that post as it was spam. (Just links with no actual content)
I've also edited your post, to remove your quote of it, to stop google seeing the links on this site.

p.s. Sorry to barge in on the thread, just explaining it to you capecodlilly.

ajfmrf
12-19-2012, 10:28 PM
Here is a good alternative.

http://galleria.io/

There are easy ways to customize the gallery.I use the free one,not the ones that you pay for.

Beverleyh
12-19-2012, 10:47 PM
The PHP Photo Album Script on DD is an example of a script that automatically generates a gallery from a folder of images.

Give it a whirl if your server can run php as it might be a huge timesaver: http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

capecodlilly
12-19-2012, 11:06 PM
1. thank you keebs, for removing that spam. And explaining this so well.

2. Thank you Bud, for the info.
I will look into Galleria, but I was really hoping that dynamic drive will have something that I could deal with at my level. I am a newbie, and I need the expertise of DD to help me at this point in time.

3. Thank you Beverly! To answer your question, I just want to pull images from a folder, my html page.
Im not sure how to do this. I can put the images in with html OK, but figuring out the way to put the whole thing together is what I cannot do.

I will have to look at your questions tomorrow, and go carefully thru them.
Oh, I see your second post, this is almost exactly what I would want, though I dont see the option to go to next picture, or previous.

Here is a link to my real estate friend's site, and you can see what I want to do when you click upon the pictures of the house.
I hope its OK for me to forward her link?
http://mlsdailyalert.com/index.php/listing/detailClient/650517/2_21206876/nearby

This was the one which made me feel like an idiot, I couldnt even get the zip file for it,
http://jquery.com/download/
And when I finally got the code, what to do with it. They dont help you like DD does.
And I have my own pages with much earlier code from DD, which I hope its OK to put here, as I dont want to have my sites flapping around on the net, as they are just for my family and my PS classmates. Let me know if its OK to post my site stuff here and I will put it here tomorrow. I was a bit taken back with the post that I requested to be removed earlier, can spammers view this site?
Thank you! You have provided me some confidence.

capecodlilly
12-22-2012, 07:23 PM
This is the closest one to what I would like to try, though it doesnt have the ability to go to 'next' or 'previous'.
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
Thank you for the help and instructions, I will try this after Christmas and come back to the forum with a page.

vwphillips
12-23-2012, 08:11 PM
<!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;
}

.popup {
position: absolute;visibility:hidden;padding:10px;background-color:#d0e47e;border:1px solid black;
width: 670px; /*Width of popup*/
}

.controls { /*CSS for control bar of popup*/
position:relative;height:30px;background-Color:gray;padding:5px;text-align:center;font-size:16px;
}

.controls IMG {
float:right;margin:3px;margin-Top:-10px;
}


.content { /*CSS for div that holds the image slide show*/
border:1px solid gray;background-color:white;
}

.content IMG {
width:400px;height:300px;
}

.mask{ /*CSS for background mask*/
position:fixed;z-Index:101;background-Color:black;width:100%;height:100%;left:0px;top:0px;z-index: 5;filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);opacity: 0.8;
}

/*]]>*/
</style>

</head>

<body>

<div id="gal1" class="gallery" >
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=0&boardid=2" alt="img" title="Image 1"/>
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=1&boardid=2" alt="img" title="Image 2" />
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=2&boardid=2" alt="img" title="Image 3" />
<img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=3&boardid=2" alt="img" title="Image 4" />
</div>

<div id="pop1" class="popup" style="background-Color:#FFFFCC;" >
<div class="content" >
</div>
<div class="controls" >
<a>Image 1</a>
<img src="http://www.vicsjavascripts.org.uk/StdImages/X[1].gif" alt="img" title="exit" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/right.gif" alt="img" title="forward" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/left.gif" alt="img" title="back" />
</div>
</div>


<script type="text/javascript">
/*<![CDATA[*/
// PopUp Gallery. (23-December-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcPopUpGallery={

init:function(o){
var id=o.GalleryID,ccls=o.ContentClass,mcls=o.MaskClass,ms=o.AnimateDuration,gal=document.getElementById(id),pop=document.getElementById(o.PopUpID),imgs=gal.getElem entsByTagName('IMG'),div=document.createElement('DIV'),msk=div.cloneNode(false),ary=[],m,z0=0;
pop.style.display='block';
pop.style.overflow='hidden';
pop.style.visibility='hidden';
this.opc(pop,100);
msk.style.position='absolute';
msk.style.left='0px';
msk.style.top='0px';
msk.style.width='100%';
msk.style.height='100%';
m=msk.cloneNode(false)
m.className=mcls;
m.style.zIndex='0';
msk.appendChild(m);
pop.style.zIndex='200';
msk.appendChild(pop);
document.body.appendChild(msk);
msk.style.position='fixed';
msk.style.visibility='hidden';
o={
id:id,
msk:msk,
pop:pop,
ms:typeof(ms)=='number'&&ms>0?ms:false,
to1:null,
to2:null
}
for (;z0<imgs.length;z0++){
ary[z0]=[imgs[z0],new Image()];
ary[z0][1].src=imgs[z0].src;
}
this.load(o,ary);
},

load:function(o,ary){
for (var oop=this,z0=0;z0<ary.length;z0++){
if (ary[z0][1].width<40){
o.dly=setTimeout(function(){ oop.load(o,ary); },200);
return;
}
}
var img=document.createElement('IMG'),ss=document.createElement('DIV'),c=ss.cloneNode(false),divs=o.pop.getElementsByTagName('DIV'),c=divs[1];
img.src=ary[0][1].src;
divs[0].style.position='relative';
divs[0].appendChild(img);
ss.style.position='relative';
ss.style.width=img.width+'px';
ss.style.height=img.height+'px';
divs[0].removeChild(img);
img.style.position='absolute';
img.style.left='0px';
img.style.top='0px';
img.style.width='100%';
img.style.height='100%';
for (z0=0;z0<ary.length;z0++){
img=img.cloneNode(false);
img.src=ary[z0][1].src;
img.style.zIndex=z0>0?'0':'1';
ss.appendChild(img);
ary[z0]=[ary[z0][0],img,ary[z0][0].title||''];
this.addevt(ary[z0][0],'mouseup','ready',o,z0);
}
if (c){
imgs=c.getElementsByTagName('IMG');
for (z0=0;z0<imgs.length;z0++){
if (imgs[z0].title=='forward'){
this.addevt(imgs[z0],'mouseup','Next',o.id,1);
}
if (imgs[z0].title=='back'){
this.addevt(imgs[z0],'mouseup','Next',o.id,-1);
}
if (imgs[z0].title=='exit'){
this.addevt(imgs[z0],'mouseup','Hide',o.id,'hide');
}
}
}
divs[0].appendChild(ss);
ss.style.left=(divs[0].offsetWidth-ss.offsetWidth)/2+'px';
ss.style.top='10px';
divs[0].style.height=ss.offsetHeight+20+'px';
o.ph=ss.offsetHeight+(c?c.offsetHeight:0)+20;
c=c?c.getElementsByTagName('A')[0]:false;
o.caption=c?c:ss.cloneNode(false);
o.ary=ary;
o.cnt=0;
o.lgth=ary.length-1;
zxcPopUpGallery['zxc'+o.id]=o;
this.pop=o;
this.addevt(o.msk,'mousedown','Hide',o.id);
this.addevt(window,'resize','Hide',o.id,true);
},

Hide:function(id,ud,e){
var o=zxcPopUpGallery['zxc'+id],obj;
if (o){
if (e&&!ud){
obj=e.target?e.target:e.srcElement;
if (obj){
while (obj.parentNode){
if (obj==o.pop){
return;
}
obj=obj.parentNode;
}
}
}
if (!o.ms||ud===true){
this.hide(o);
}
else {
clearTimeout(o.to1);
clearTimeout(o.to2);
this.animate(o,o.pop,'top',o.pop.offsetTop,o.msk.offsetHeight/2,new Date(),o.ms,'to1');
this.animate(o,o.pop,'height',o.pop.offsetHeight,0,new Date(),o.ms,'to2');
}
}
},


Display:function(id){
var o=zxcPopUpGallery['zxc'+id];
if (o){
this.ready(o);
}
},

Next:function(id,ud){
var o=zxcPopUpGallery['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
nu=o.cnt+ud;
nu=nu<0?o.lgth:nu>o.lgth?0:nu;
o.caption.innerHTML=o.ary[nu][2];
o.ary[o.cnt][1].style.zIndex='0';
o.ary[nu][1].style.zIndex='1';
this.animate(o,o.ary[nu][1],'',0,100,new Date(),o.ms,'op'+nu);
o.cnt=nu;
}
},

ready:function(o,nu){
if (o!=this.pop){
this.hide(this.pop);
}
o.ary[o.cnt][1].style.zIndex='0';
o.ary[nu][1].style.zIndex='1';
o.cnt=nu;
o.caption.innerHTML=o.ary[nu][2];
var mh=o.msk.offsetHeight;
o.pop.style.left=(o.msk.offsetWidth-o.pop.offsetWidth)/2+'px';
this.pop=o;
if (o.ms){
clearTimeout(o.to1);
clearTimeout(o.to2);
this.animate(o,o.pop,'top',mh/2,(mh-o.ph)/2,new Date(),o.ms,'to1');
this.animate(o,o.pop,'height',0,o.ph,new Date(),o.ms,'to2');
}
else {
o.pop.style.top=(mh-o.ph)/2+'px';
}
o.pop.style.visibility=o.msk.style.visibility='visible';
},

animate:function(o,obj,mde,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
if (mde){
obj.style[mde]=Math.max(now,0)+'px';
}
else {
oop.opc(obj,now);
}
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,obj,mde,f,t,srt,mS,to); },10);
}
else {
if (mde){
obj.style[mde]=t+'px';
}
if (t==0&&mde=='height'){
this.hide(o);
}
}
},

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;
},

hide:function(o){
clearTimeout(o.to1);
clearTimeout(o.to2);
o.msk.style.visibility=o.pop.style.visibility='hidden';
o.pop.style.height='auto';
},

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


}


zxcPopUpGallery.init({
GalleryID:'gal1', // the unique ID name of the Gallery DIV. (string)
PopUpID:'pop1', // the unique ID name of the Pop Up DIV. (string)
MaskClass:'mask', //(optional) the class name of the Pop Up mask DIV. (string, default = no mask)
AnimateDuration:1000 //(optional) the animation speed in milli seconds. (number, default = no animation)
});

/*]]>*/
</script>
</body>

</html>

capecodlilly
12-23-2012, 10:10 PM
Hi Vic,
Thank you!
I am going to work hard and get my album/gallery working with your help.
At the moment Grandma is pretty involved in getting Christmas ready for the family, but while I have free moments, I sure will be having a great time learning this.

Merry Christmas!

capecodlilly
12-24-2012, 09:41 PM
Got a quick moment to work on this,,,,,,tried your code above, but it didn't work, just got the 4 photos and no js 'action'. I must have forgotten something or left it out.

Of course Im a real beginner at this, but I got further with this one, from DD, their example.
http://www.jcarter.net/scripts/gallery.html

I want to have a small picture instead of a link like Saturn and the Moon.

So next, I tried stripping out all the stuff on the realestate page and came up with this so far,
http://www.jcarter.net/scripts/start.html

But it doesnt have the mouse over effect, just the click to the big picture, then back up one page to get back, but its a start anyway.
If I could just get that lovely mouseover effect from the original RE page, then I could put in my own pictures and it would work!

Thank you again, I realize its Christmas and everybody is very busy, but Im getting closer thanks to you people here. Im sure Im leaving something out.

vwphillips
12-25-2012, 02:13 PM
http://www.vicsjavascripts.org.uk/ImagePopUpIII/121225A.htm

capecodlilly
12-25-2012, 03:00 PM
Oh, wow, that one works!
Thank you! Now I have to figure out how to add my own photos.
I might have some time today, I should say, I will make time, as this sure is fun to learn how to do this.


Actually our children always donate to operationsmile here in USA, they send checks to the local chapter in our state.

vwphillips
12-25-2012, 04:58 PM
see for the latest issue

http://www.vicsjavascripts.org.uk/ImagePopUpIII/ImagePopUpIII.htm?1356452587041

capecodlilly
12-25-2012, 05:20 PM
I forgot to say I use Macs, This latest issue doesn't work well with Safari, Chrome, or Opera, the pictures cover up the controls, though its OK with Firefox. The picture is centered with FF.
But the original one you sent me, works perfectly on all 4 of my browsers. Thats the one which I will work on adding my own pictures. If I can do that, that will be my Christmas present!

Thank you again!

ajfmrf
12-26-2012, 12:47 AM
Hi capecodelily-I got a working version of Vic's first script if you want it.All you will need to do is use your images and add it to your page.

http://www.web-user.info/vic/1/victest1.html

Merry Christmas

capecodlilly
12-26-2012, 03:02 AM
Thats wonderful! It works with Safari too, Firefox shows the pictures much smaller, but most of my classmates use Safari, so Im even happier with this.
Thank you! Entire family here for Christmas, but will get working on it early tomorrow after I walk the dogs.

Its just exactly what Im looking for. Its far less complex, and thats what I need, as Im pretty much a beginner at this.
You people here are amazing! I really really appreciate the wonderful help.

capecodlilly
12-26-2012, 03:28 PM
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
12-26-2012, 03:50 PM
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
12-26-2012, 07:48 PM
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
12-26-2012, 09:52 PM
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
12-26-2012, 09:54 PM
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
12-27-2012, 02:31 AM
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
12-27-2012, 03:05 AM
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
12-27-2012, 01:22 PM
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
12-27-2012, 06:52 PM
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
12-28-2012, 03:12 AM
<!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.creat eElement('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>

capecodlilly
12-28-2012, 01:55 PM
Hi Vic,
WOW, this is sure wonderful, it works perfectly, I love it!
You sure are a great instructor.
It works perfectly on all my Mac browsers and also my iPhone!
http://www.jcdouglass.net/gallery/gallery2.html

Im going to play around more with picture sizes and have fun changing things, this is the way I learn even more.

Still having trouble linking my css to it, but thats not that important at the moment.
(We have some bad weather coming, and this will keep me busy when the grandkids arent here.)

Thank you!!!!!

capecodlilly
01-01-2013, 12:58 AM
I want to thank everybody here for helping me learn this, I think Ive got it right now and am very pleased with this.
I am now moving on to a coming up comprehensive Photoshop class and also a WordPress class, and I will incorporate the things I have learned here into my work.
I will come back here an monitor the goodies that I need to learn further. And my classmates will be looking to DD for more great stuff too.
Happy New Year, and thank you muchly!