Creating a Rotating Gallery - Game Page Links for new Website

So the games page was supposed to be a simple panel of images that linked to pages for each game I have created and/or worked on.  But I thought to myself, "That's Boring!" so I created my own rotating gallery page viewer that flips through all the options as you click on them.

The rotating gallery uses JQuery, Javascript and CSS3, so knowing a bit about those will help you understand what's I'm doing.

First, here are a couple screen shots of the gallery:

When you click on a panel to each side, it rotates through the selection to that panel:

It also uses CSS transitions so it has a nice easing effect as well.

For each panel, they will link to a page specifically for that game.  Right now you enter via clicking the button at the bottom but I might change the coding so that when you click on the main picture, if it is active you will go to that page.

The code is a bit long so I won't go into too much detail, but I'll highlight a few of the places of note in the script and CSS.

The Main Page:

So the goal was to just add divs as I needed and to have the JavaScript file manipulate and add the divs to a list and control them that way.

I wanted the main page to be easy to add things to and all the work to be hidden in JS.

As you can see it's pretty intuitive and makes a lot of sense what's going on.  You have 5 game pages, each with a title and an image.  I kept the actual links in the JavaScript as well, but that's something I could pull out into the HTML later if I needed to.

Styling:

The exciting thing about the rotating gallery is using CSS classes and ids with the CSS3 transitions to create neat effects just by swapping the classes and ids of the divs.  It makes putting neat transitions in your website a lot of fun and fairly easy to do.  I know this isn't new to a lot of web developers, but if you're somewhat new to web design and development, this stuff can be pretty exciting.

Let's take a look at the CSS file and see how it's doing a lot of the work for me:

You can see here, we wrap our boxes in a holder with position relative, so that we can use absolute positioning.  Also the neat work is done with the transition tags.  All it's saying is that between changes in the class to modify position, we're going to give all transitions a .5 second ease between the divs, and the browser will do all the animation work for us.  Neat!

Here we're specifying the size and dimensions of our Previous node, our Next node and our Hidden nodes.  You can think of this gallery like a linked list.  We're going to be rotating through images, and the first image will always appear after the last one and vice-versa. For this gallery I wanted to make it seem like the pages were fading away so I set the opacity to 50% and the size to 50% for the images to the side.  

You'll also see I set the Z indices up so that the main one was the highest and the next/prev ones were in between and the hidden nodes were the lowest.

Note:  It's important when you set your Z-Indices, to keep them positive if you want the divs to be clicked on.  If you don't it's likely click functions won't work because they'll be behind the main layer of the page.

So now all we have to do is link the divs together and add some click functions!

Script:


The first part of the script is the set up.  I call this to push each ID into an array for my divs and set them all up to be ready to be called by the rotate functions.  I set all the divs to invisible and hidden and add the on click functions to each of the divs (only called when visible and not the current one), so essentially only the previous and next ones can be clicked (but I could expand this out later if I wanted).  Then I call the rotate function to set up the screen properly.

The next is our rotate function.  This calls out to a few other functions that I've made, the GetPrevious and GetNext functions just check the next and previous number based on the total number and the current number (so GetPrevious(1, 5) is 5 so that we have a linked list) and then the RotateNext and RotatePrevious functions change the classes on the divs accordingly.

I'll show you a snippit of the RotateNext function so you can get an idea of what it's doing.  Basically I need to shift all relevant divs, which means, 2 before, 1 before the current and 1 after are the relevant divs, since all others will remain hidden.

Then I set the currentShow (the currentDiv, not sure why I named it that) and we're good for this rotation!  Then if our current one isn't the one we wanted to click to, it will continue to rotate until we reach our destination.

So that's a little bit about the Rotating Gallery that I made,  next steps are working on all the pages for the actual games and getting A Slight Anomaly up on it's own page as well as a playable demo, and then testing and pushing to live!  Exciting stuff.

Hopefully this weekend I can power through the game sites so that I can start prepping to push the new website live.

Subscribe to stay tuned into the updates and to learn some neat tips and tricks about web development!

Cheers,
Jason C.