My new WEBSITE.. took me forever to get right

[Nautica]

Hi neowin,

I hope there are still lots of people coming here, i have been away for a few months...

anyways, I have upgraded my website

http://www.studio7designs.com/

it is almost CSS and HTML compliant.. I need to tweak the code and also I need to complete the website...

can you guys give me any pointers ?

thanks

Aran

<b>PS thanks for the suggestions so far everyone, it made my day, If you have ANY suggestions please email me at aran [a t) studio7designs.com as I will be away from the forum for a while past feb 1st.. thanks!</b>

Edited January 31, 2006 by Nautica

[Got3n]

looks pretty good. I like it alot.

[Nautica]

looks pretty good. I like it alot.

thanks mat:):)

[theyarecomingforyou]

Looks great... very professional.

[Opelman]

I like it alot

[LG1]

all i can say is wow, you did a great job, taking a long time to get it right has its own rewards

[Nautica]

all i can say is wow, you did a great job, taking a long time to get it right has its own rewards

hey thanks so much for your imput

I WILL be adding more color to the site, look at the weddings page to see a preview of the photos I am going to add

are there too many google ads?

cheers

Aran

[Cadish]

Really nice! Pitty of all those ads :/

[Nautica]

Really nice! Pitty of all those ads :/

Ill take out the ads on the right panel?

how does that look?

cheers

Aran

[Cadish]

^ that would be better...

Maybe you can integrate the google search bar somewhere at the top of the page, or in a sidepanel...

[mc_leish]

thats pritty slick, my suggestion, if thats what your looking for, is maybe slowly fade the images up the top, becuase while i was reading (as much as the photos are very nice) i got distracted.

very good work here though :)

[Nautica]

thats pritty slick, my suggestion, if thats what your looking for, is maybe slowly fade the images up the top, becuase while i was reading (as much as the photos are very nice) i got distracted.

very good work here though :)

hey, how can I do that ?

can you link me to a tutorial for making fading gifs?

thanks

[LG1]

ha no wonder i thought it was so good, i got all the ads blocked.

Nice photos also, can they be viewed bigger

[Kenny McCormick]

Very nice work! It looks simple and professional.

I think you should fade the images on the top like blade707 alredy said.

[Nautica]

I took out most of the text ads, left a couple on the left hand side-bar ( kinda hidden there so its not so in your face etc.)

Ill fad out the top banner...

please, anymore suggestions...

Also, anyone have a good feeback form that I can use?

[Cadish]

For the fading, just use javascript... That's the easiest to add more photo's if you want to...

[Nautica]

For the fading, just use javascript... That's the easiest to add more photo's if you want to...

nice idea, can you link me with a tutorial please, I am more of a designer then a java coder... thanks for the help I really appreciate it everyone!

[Cadish]

http://www.dynamicdrive.com/dynamicindex4/index.html

This is a really good websites for such javascripts...

[Nautica]

http://www.dynamicdrive.com/dynamicindex4/index.html

This is a really good websites for such javascripts...

hell YA!

sweet thanks..

also, one more question..

I want my top banner to change everytime someone loads the page, or goes to another page on my website... I dont like people seeing the same rotating images... Id rather deliver random images to my top banner area every new page load ( my banner area at top is to showcase my photography so this is VERY important )

do you know of any script that would do this?

Thanks

[Cadish]

http://www.dynamicdrive.com/dynamicindex14...inslideshow.htm

This one starts with a random image everytime. And it fades! And it runs in Opera, IE and Firefox (Y) (Y)

[Nautica]

http://www.dynamicdrive.com/dynamicindex14...inslideshow.htm

This one starts with a random image everytime. And it fades! And it runs in Opera, IE and Firefox (Y) (Y)

dude, sooo sweeeeet!!!

thanks for finding that for me...

so I pretty much put the code in the location of my banner?

Ill grab my code real quick, can you point me out to where i would put it?

thanks

<body><div id="wrap">

<div id="header">
<h1 class="style3"><span class="style9"><a href="../index.html">STUDIO</a></span><a href="../index.html"><span class="style5">7</span><span class="style9">DESIGNS</span></a></h1>
<p><strong>"I can see you fly. You are an angel with wings, high above the ground!"</strong><br />(traditional haiku poem)</p>
</div>

<img id="frontphoto" src="../images/front.gif" width="760" height="175" alt="studio7designs_main_banner" />

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="../index.html">Home Page </a></li>
<li><a href="../gallery/gallery.html">Photo Gallery </a></li>
<li><a href="../website_designs.html">Website Designs</a></li>
<li><a href="../Journal.html">Daily Photo Blog </a></li>
<li><a href="../weddings.html">Weddings Victoria</a></li>
<li><a href="../contact_us.html">Contact us </a></li>
</ul>

my banner is the "<img id="frontphoto" src="../images/front.gif" width="760" height="175" alt="studio7designs_main_banner" />"

would I put the script in there?

thanks

[Cadish]

<head>
<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): ? Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""]
fadeimages[1]=["photo2.jpg", "", ""]
fadeimages[2]=["photo3.jpg", "", "_new"]

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>
</head>
<body><div id="wrap">

<div id="header">
<h1 class="style3"><span class="style9"><a href="../index.html">STUDIO</a></span><a href="../index.html"><span class="style5">7</span><span class="style9">DESIGNS</span></a></h1>
<p><strong>"I can see you fly. You are an angel with wings, high above the ground!"</strong><br />(traditional haiku poem)</p>
</div>

<script type="text/javascript">
new fadeshow(fadeimages, 760, 175, 0, 10000, 0, "R")
</script>

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="../index.html">Home Page </a></li>
<li><a href="../gallery/gallery.html">Photo Gallery </a></li>
<li><a href="../website_designs.html">Website Designs</a></li>
<li><a href="../Journal.html">Daily Photo Blog </a></li>
<li><a href="../weddings.html">Weddings Victoria</a></li>
<li><a href="../contact_us.html">Contact us </a></li>
</ul>

And you just change this:

fadeimages[0]=["photo1.jpg", "", ""]
fadeimages[1]=["photo2.jpg", "", ""]
fadeimages[2]=["photo3.jpg", "", "_new"]

[najmul]

isn't your website taken from the templates from oswd.org??

http://www.oswd.org/design/preview/id/2199

looks exactly the same!!

[Nautica]

yes I have it so its working 100% in IE... but in FF and Opera it comes out very wonky...

do I have to put the

<script type="text/javascript">
new fadeshow(fadeimages, 760, 175, 0, 10000, 0, "R")
</script>

in a special holder? like a <div> or <p> ?

it seems that the code is not held properly in FF and opera.. the top banner floats all over the place

[Yazoo]

nice site, love the gallery :)

[LPC]

Very nice clean looking site. The only thing letting it down is the google adds down the side. They draw away from the clean layout. Nice clear content on there also, good job :).

I dunno if it's just me but it does run slow every now and then. Get it on a faster host possibly.