As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread:

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

DarkSymphonyDarkSymphony Registered User regular
edited April 2012 in Help / Advice Forum
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?

DarkSymphony on


  • Options
    Sir CarcassSir Carcass I have been shown the end of my world Round Rock, TXRegistered User regular
    I'd check out Bootstrap and it's Carousel script.

  • Options
    DarkSymphonyDarkSymphony Registered User regular
    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?

  • Options
    Sir CarcassSir Carcass I have been shown the end of my world Round Rock, TXRegistered User regular
    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.

  • Options
    CptHamiltonCptHamilton Registered User regular
    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 = new galleryImage(nextURL);
    getNextURLInList() {
      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().

    PSN,Steam,Live | CptHamiltonian
Sign In or Register to comment.