Jquery Help.

[Jsheffers]

I'm put together a site that uses div hiding using jquery. It works fine, but when It loads up the home page you see all of the divs. Then when I click on the nav to go to another div it just shows that div. How can I get just the first div to come up when I first open the page. I hope that makes sense.

 

Here is the page.

 

www.shanej e ffersphotography.com/pst

 

Notice how all of the divs show up, then when you click on home or something else the other divs dissappear. I want it to do this first so all of the divs never show at once.

 

$(function () {

var navlist = [];

var tabContainers = [];

$('ul#navlist a').each(function () {

if(this.pathname == window.location.pathname) {

navlist.push(this);

tabContainers.push($(this.hash).get(0));}

});

$(navlist).click(function () {

$(tabContainers).hide().filter(this.hash).show();

return false;

});

});

 

 

This was the javascript used. Anyone??

 

Thanks for your time.

[falkencreative]

The easiest way to do this is actually via CSS - no javascript required. Using CSS, set the divs you want hidden when the page first loads using display:none, and then jQuery can be used to show/hide them.

 

EDIT: Actually, take that back. The above will work, but isn't ideal since if the user has javascript disabled for some reason, they will only be able to see the first div, and the rest won't be accessible. In that case, the best way to do things is probably through jQuery... Adding something along the lines of this to your $(function() section:

 

$('#dividhere').hide();

 

and add a separate line for each of the divs you want hidden when the page first loads.

[Jsheffers]

The easiest way to do this is actually via CSS - no javascript required. Using CSS, set the divs you want hidden when the page first loads using display:none, and then jQuery can be used to show/hide them.

 

EDIT: Actually, take that back. The above will work, but isn't ideal since if the user has javascript disabled for some reason, they will only be able to see the first div, and the rest won't be accessible. In that case, the best way to do things is probably through jQuery... Adding something along the lines of this to your $(function() section:

 

$('#dividhere').hide();

 

and add a separate line for each of the divs you want hidden when the page first loads.

 

 

Dude you are amazing.. Every time I post here you have an answer... I added that line of code to my JQuery and it works like a charm. On the portfolio page I implemented some Jquery which fades the images in and out. Is there anyway that I can have that effect and have lightbox on click? I tried to no avail, but I could be doing something wrong. I also tried JQuery version of lightbox...no luck either...

[Susie]

I'm sure Ben will have the right answer for you, but I wanted to share something I've been looking at.

 

jCarousel + Thickbox.

 

jCarousel is jquery and looks pretty cool.

[newseed]

We've used thickbox on this site but not as a carousel but as a method of customizing a system. Just click on 'LET US FIND THE SWEETEST SYSTEM FOR YOU' just to the right of the logo.

[falkencreative]

Dude you are amazing.. Every time I post here you have an answer... I added that line of code to my JQuery and it works like a charm. On the portfolio page I implemented some Jquery which fades the images in and out. Is there anyway that I can have that effect and have lightbox on click? I tried to no avail, but I could be doing something wrong. I also tried JQuery version of lightbox...no luck either...

 

I don't see why not... I've used lightbox a bit on my site for my portfolio items, and it seems like the jquery lightbox plugin is the easiest way to go. It SHOULD be as simple as adding a class to the thumbnails that you want enlarged... Can you remind me of your URL so I can take a look at how things are set up at the moment?

[Jsheffers]

Dude you are amazing.. Every time I post here you have an answer... I added that line of code to my JQuery and it works like a charm. On the portfolio page I implemented some Jquery which fades the images in and out. Is there anyway that I can have that effect and have lightbox on click? I tried to no avail' date=' but I could be doing something wrong. I also tried JQuery version of lightbox...no luck either...[/quote']

 

I don't see why not... I've used lightbox a bit on my site for my portfolio items, and it seems like the jquery lightbox plugin is the easiest way to go. It SHOULD be as simple as adding a class to the thumbnails that you want enlarged... Can you remind me of your URL so I can take a look at how things are set up at the moment?

 

www.shanej e ffersphotography.com/pst then go to the portfolio tab.

 

OK lets see if I can explain this. I have a jquery fade in and out effect on the image thumbnails. For some reason it won't let me use lightbox in combination with the jquery fade in/out.

[falkencreative]

If you are using jQuery, you may as well use the jQuery lightbox plugin (http://leandrovieira.com/projects/jquery/lightbox/). It should be a simple matter of including the javascript and css files in the correct location, and adding something along the lines of this to your jquery:

 

$('#gallery a').lightBox();

 

I'm not seeing anything that would stop the jquery lightbox from working with your fade effect. I'd suggest going ahead and integrating the jquery lightbox, getting as far as you can, and then letting us know when / where you run into problems.

[Jsheffers]

Ok I got it working. I forgot to include a link to one of the javascript files....*Dummy*... lol Thanks for everyone's help.