getting into web design (beginner) and need help with a gallery.

DarkSymphony

I'm making a website for various things, more just to get practice doing it and I wanted to know if there's a way I can get a gallery I have to transition with fade in/fade out. What I have currently is a gallery that, when clicking on one of the pics, it shows up on a bigger window sitting above the 4 pics in the gallery.

all I wanna do is have them transition on a timer. Thoughts?

Sir Carcass

I'd check out Bootstrap and it's Carousel script.

DarkSymphony

now, with scripting like carousel, are they able to be applied to a set gallery currently written in? I like the gallery set up I have and am looking to have them transition where they are. if that makes sense?

Sir Carcass

That I'm not sure about as I haven't used that particular script, but their other stuff seems pretty flexible and easy to use.

CptHamilton

Where are the images in the gallery coming from? Presumably you have a list of image file URLs fetched from a server, or at least hard-coded in a file or similar? jQuery has some built-in methods for fade in/fade out and a very easy to use animation framework.

Your auto-transition psuedo-code would presumably look something like:

var currentImg;
var currentImgIndex = 0;
while (!closed) {
  var nextURL = getNextURLInList();
  currentImg.transitionIn();
  preLoad(nextURL);
  currentImg.transitionOut();
  currentImg = new galleryImage(nextURL);
}

getNextURLInList() {
  currentImgIndex++;
  if (currentImgIndex == galleryImageURLList.length) {
    currentImgIndex = 0;
  }
  return galleryImageURLList[currentImgIndex];
}

The actual transition animations are dead simple with jQuery. Look up the documentation for .animate(), .delay(), and .fadeIn().