• 0

My new WEBSITE.. took me forever to get right

Asked by Nautica,

 Share

Question

Veteran

Nautica

Posted
Posted (edited)

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 by Nautica

60 answers to this question

Recommended Posts

  • 0
Veteran

Nautica

Posted
  • Author
Posted

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

  • 0
Veteran

Nautica

Posted
  • Author
Posted

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

  • 0
Veteran

Nautica

Posted
  • Author
Posted

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?

  • 0
Veteran

Nautica

Posted
  • Author
Posted

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!

  • 0
Veteran

Nautica

Posted
  • Author
Posted

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

  • 0
Veteran

Nautica

Posted
  • Author
Posted

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

&lt;body&gt;&lt;div id="wrap"&gt;

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

&lt;img id="frontphoto" src="../images/front.gif" width="760" height="175" alt="studio7designs_main_banner" /&gt;

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

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

  • 0
Rising Star

Cadish

Posted
Posted 

&lt;head&gt;
&lt;script type="text/javascript"&gt;
/***********************************************
* 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&lt;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&amp;&amp;dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('&lt;div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"&gt;&lt;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+'"&gt;&lt;/div&gt;&lt;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+'"&gt;&lt;/div&gt;&lt;/div&gt;')
else
document.write('&lt;div&gt;&lt;img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"&gt;&lt;/div&gt;')

if (iebrowser&amp;&amp;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&lt;100){
obj.degree+=10
if (obj.tempobj.filters&amp;&amp;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&lt;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='&lt;a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'"&gt;'
slideHTML+='&lt;img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px"&gt;'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='&lt;/a&gt;'
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&amp;&amp;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&lt;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&amp;&amp;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()
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;div id="wrap"&gt;

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

&lt;script type="text/javascript"&gt;
new fadeshow(fadeimages, 760, 175, 0, 10000, 0, "R")
&lt;/script&gt;

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

And you just change this:

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

  • 0
Veteran

Nautica

Posted
  • Author
Posted

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 

&lt;script type="text/javascript"&gt;
new fadeshow(fadeimages, 760, 175, 0, 10000, 0, "R")
&lt;/script&gt;

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

  • 0
Community Regular

LPC

Posted
Posted

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.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.