jQuery Portfolio Content Gallery

jQuery Portfolio Content Gallery

Been very busy

Portfolio imageFirst, apologies to my subscribers for not writing a lot recently, but I have been working some overtime, and redesigning my website’s interior pages. But I was working on my portfolio page and thought I would share what I have done. All in all, it is not overly complicated, but I like that it is clean and simple. You’ll also get to see the beginnings of my redesign of my interior pages (just keep in mind that it is not finished yet). Take a look at my new portfolio page so far:

View Demo

The nuts and bolts

I wanted my portfolio page to be simple, and I think I achieved that. Content for the first port image is already loaded, and when you click on an image, the arrow slides and the content switches to match the image. Here is the HTML I used:

<div id="portContainer">
     <div id="portArrow"></div>
     <ul>
          <li id="portOne" class="slide"><a href="#"></a></li>
          <li id="portTwo" class="slide"><a href="#"></a></li>
          <li id="portThree" class="slide"><a href="#"></a></li>
          <li id="portFour" class="slide"><a href="#"></a></li>
          <li id="portFive" class="slide"><a href="#"></a></li>
     </ul>
</div>
<div id="portContentContainer">
     <div id="portOneContent" class="portContent">
          Test Content 1
     </div>
 <div id="portTwoContent" class="portContent">
          Test Content 2
     </div>
 <div id="portThreeContent" class="portContent">
          Test Content 3
     </div>
 <div id="portFourContent" class="portContent">
          Test Content 4
     </div>
 <div id="portFiveContent" class="portContent">
          Test Content 5
     </div>
</div>

The CSS doesn’t really matter for this, other than the margin for the arrow is set to 0, because that is what I change using a jQuery animation. Let’s take a look at that, and then I’ll explain what I did to achieve it.

var slides = $('.slide');
var contentWidth = $('.slide').width();
var currentPosition = 0;
 
slides.click(function (e) {
	currentPosition = $(this).index();
 
	//Move the arrow thing move to the right, the 42 is the margin between the slide divs
	$('#portArrow').animate({
		'marginLeft' :  (contentWidth + 42 ) * (currentPosition)
		}, 200);
 
	//Show or hide the 4 items below based on which slide is clicked
	$('.portContent').fadeOut().delay(500);
	$('.portContent').eq($(this).index()).fadeIn();	
});

What is jQuery doing there?

See? Very few lines of jQuery were needed to get this to work. The first line is just a variable to reference all the list-items with the class “slide”. Which technically you could ditch, because I only call it once. I left it in there because at the time, I didn’t really know what I was going to be doing. The second line is another variable used for the width of each individual

  • . The final variable is to track the position of of the arrow, which is set to ’0′.

    Then we come to the click event attached to the li’s. The currentPosition variable’s value changes to be the index number of whatever

  • is clicked. If you click on the second image it equals 1, if you click on the third image, it equals 2, and so on and so forth. Once an li is clicked, the animation kicks in.

    The arrow (which is a div with an id of ‘portArrow’) is moved (left or right) a total of the li’s width, plus 42, which is the margin between each

  • , and then multiplied by the current position. That number becomes the arrow’s left margin. If you click on the first image, you get (168 + 42) * 0, which is 0, so the arrow’s left margin is set to 0, and the arrow moves to the left. Unless of course the arrow was already on the first image.

    The last part deals with the content underneath. This line just fades out whatever content is showing, and gives a delay of 1/2 a second, before going to the next part:

    $('.portContent').fadeOut().delay(500);

    The last line:

    $('.portContent').eq($(this).index()).fadeIn();

    This says, out of the div’s with a class of ‘portContent’, fade in the one that’s index matches the index of the

  • that was clicked. Got it? Good.

    Extra credit question

    Now for a question for any experienced jQuery users. You will see that the little cog next to my logo is rotating. All that is, is an image sprite with 3 images, being shifted over. Unfortunately, I had to use a plugin for that. The plugin (Spritely) is cool, but I wanted to avoid it if possible, and do it myself. I came close by chaining multiple animations with very fast speeds, but I didn’t want it to go as fast as it was. I then tried chaining three .css() methods with delays in between inside a loop, but that didn’t work. Kind of looked like this (off the top of my head…not exact):

    for (i=0;i<50000;i++) {
    $('#intCog').css('backgroundPosition', '-60px 0').delay(100)
         .css('backgroundPosition', '-120px 0').delay(100)
         .css('backgroundPosition', '0 0').delay(100)
     
    };

    Obviously, this didn’t work, and I knew why right after I wrote it. It’s going to set to 0 0, but my thought was that it would step through it rather than slide through it like an animation would.

    The question: How do you change a value, like above, without the sliding like the animation has? I needed it to change to the value, not slide to the new position. I could have made 3 copies and faded them in and out, but that seemed ridiculous. All I can think of is maybe 3 chained animations and some hide/show methods like:

    .hide().animation(background position change).show().hide().animation(background position change).show().hide() and so forth…really fast.

    Help me out!

    Coupon Code: webmachine

    Tags: ,

  • 4 Responses to “jQuery Portfolio Content Gallery”

    1. I think the visual on the thumbnail click is pretty slick.

      As for the css background, the main thing is that .delay isn’t a replacement for setTimeout.
      http://www.vertstudios.com/blog/common-problems-jquery-delay/

      http://jsfiddle.net/JoeQuery/pVGEE/
      I hacked that together really quick, I’m working on making a prettier, more flexible version.

    2. Jeremy,

      I updated the code, it’s a bit more robust now.

      • jcDesigns says:

        That is perfect. I might use that instead. I was just wondering if there was a simple chaining thing you could do using the css() method, without writing the function. But that is a perfect solution sir. Thanks!

    3. Allen says:

      Very nice! Extremely simple and detailed. What do you have in mind for the layout when the number of thumbnails exceed the width? I think a grid would work well.

    Leave a Reply to Allen