Website Help !

[Kieran@ZSClothing]

Hey i was wondering if any one could help me.

I want to make it so when i click on the images below the main image then will take its place.

thanks.

[Muel]

I'm using a similar system on the site I'm working on now, you basically use a seperate javascript file, then set up each link so that it shows the layer you want to show and hides the others when clicked.

Are you writing the code yourself or using a wysiwyg editor?

[Kieran@ZSClothing]

Im using style master for the css and then html in dreamweaver.

or a even better thing i would like to do is what the trials-uk site used to do and i think the tarty site dose it now.

and im not very good at java script

thanks

[Muel]

Use a lightbox? Yeh they're just about the best way of doing it.

I don't know any javascript at all, I just downloaded the code from somewhere.

http://www.huddletogether.com/projects/lightbox/

I've used that lightbox before, I don't know where to find one that unfolds like the one on Tarty though.

[Kieran@ZSClothing]

Thanks thats perfect,

but i have put this <script type="text/javascript" src="lightbox.js"></script> in the header

and this rel="lightbox" in the images and downloaded all the files and it dont work am i missing some thing?

cheers.

[Muel]

Is the lightbox.js in the same folder as the web page?

[Kieran@ZSClothing]

O i got it working i forgot to put <a href="images/image-1.jpg" befor the image.

Thanks for you help

I cant seem to get the gray background to come up

any ideas?

[doopdoopbedoop]

You got the overlay.png downloaded? And you've added that section into the css?

Edited November 5, 2008 by /JD

[Kieran@ZSClothing]

i have it downloaded yeah and its in the right place.

what do you mean by added tht section into the css?

#lightbox{
    background-color:#fff;
    padding: 100px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    }
#lightboxDetails{
    font-size: 0.8em;
    padding-top: 0.4em;
    }    
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
    background-color: #333;
    back\ground-color: transparent;
    background-image: url(overlay.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    }

Mine looks like this.

[doopdoopbedoop]

It should work assuming that your image is definitely in the right place.. got a link to the work in progress? You can PM me it if you don't want it being common knowledge at the moment.

[Kieran@ZSClothing]

i will upload one sec

Wow i just had a look at my site on internet explore on a windows computer and it looks allot worse how do i short this out ?

this is what it looks like on my mac can some one please take a screen shot of it on there windows please

http://www.freshlymedia.com/Poducts.html

Edited November 5, 2008 by Lab Rat

[boon racoon]

i will upload one sec

Wow i just had a look at my site on internet explore on a windows computer and it looks allot worse how do i short this out ?

this is what it looks like on my mac can some one please take a screen shot of it on there windows please

http://www.freshlymedia.com/Poducts.html

Looks the same on IE7, IE6 and IE 5.5 mate.

EDIT: This is another good lightbox solution I've found - http://highslide.com/

EDIT: Just realised it's this one I liked best - http://www.cabel.name/draft1/2008/02/fancyzoom-10.html

Edited November 5, 2008 by boon

[JonMack]

I believe products has an r in it...

[Kieran@ZSClothing]

Ok cheers.

And yeah haven't spell checked it yet

[doopdoopbedoop]

You need to add the following line:

<link rel="stylesheet" type="text/css" href="overlay.css" media="overlay" />

at the top of your html file, in the same place as the other similar lines. Looks the same as your screenshot in chrome as well btw.

[Kieran@ZSClothing]

You need to add the following line:

<link rel="stylesheet" type="text/css" href="overlay.css" media="overlay" />

at the top of your html file, in the same place as the other similar lines. Looks the same as your screenshot in chrome as well btw.

Still don't work.

[doopdoopbedoop]

To be quite frank, stop attempting to do something which you don't appear to understand. Keep it simple or learn it properly so you understand the code being used so that you can fix it yourself. It doesn't sound like you've tried anything yourself yet... Sorry for sounding harsh. You just need to go read up on HTML and CSS at the very least. Javascript would be a plus too so you can look through the script and see what to change for your own uses - or write your own for extra brownie points. You'll soon see that dreamweaver was sent by the devil.

i just have an irrational hatred of the amount of people pretending to be web designers. Sorry.

[JonMack]

Ok cheers.

And yeah haven't spell checked it yet

I meant the html file...