Contact Me
 
 

Verification

Contact

Phone
661-203-5357

Email
Kim@KimJoyFox.com

Creating a Hover-Slide Gallery

by Kim Joy Fox | February 11, 2013 | Programmers | Tags: , , ,

cover-HeaderI’ve been creating a jQuery Slideshow that’s really quite great. But since I was doing a project myself for a Hover-Slide Gallery, I figured I’d show how I did it.

Keep in mind, while the set-up could be done in jQuery (instead of in HTML) and we could add in jQuery option settings, I wanted to keep it straight forward and easy for you to edit yourself.

Here’s the jsFiddle:

The HTML

The HTML is pretty simple. Here’s the basic idea:

<div id="slider">
 <div class="eachSlide"><img src="http://kimjoyfox.com/wp-content/uploads/doctorwho1.jpg" id="0">
 <div class="eSdescription"></div>
 <div class="eSWords">Description</div>
 </div>

We wrap the entire thing in the “slider” Div id. Inside that Div are all of the ¬†slides (I just showed the first one above).

Remember to add an ID to each image tag. Start with 0 and go up by one each time.

Each slide is contained within “eachSlide” Div class which in turn contains the image source, and “eSdescription” Div (which is actually the description background) and the “eSWords” Div (which should contain the actual description for the slide).

That’s it! Add as many slides as you like, following that setup.

The CSS

The CSS isn’t anything too difficult either, although it does have a few items that may look unfamiliar.

#slider { width:500px; position:relative; overflow:hidden; height:200px; margin-top:10px;
          border:1px solid #606060;
          -moz-box-shadow: 0 0 3px 2px #ccc;
          -webkit-box-shadow: 0 0 3px 2px #ccc;
          box-shadow: 0 0 3px 2px #ccc;}
.eachSlide { position:absolute; top:0px; width:250px; height:200px;
             -moz-box-shadow: 0 0 7px 4px #333;
             -webkit-box-shadow: 0 0 7px 4px #333;
            box-shadow: 0 0 7px 4px #333;}
.eachSlide img { width:250px; height:200px; }
.eSdescription { position:absolute; height:100px; width:100%; bottom:-100px; left:0px;
                 background-color:#000;
                filter: alpha(opacity=80); opacity: 0.8;}
.eSWords { position:absolute; height:80px; bottom:-100px; left:0px;
           padding:10px 5%; width:90%; font-size:18px;
           color:#E3DBCE;}

The Slider Div itself has a position:relative so that all inside Div’s will align inside of this one, not to the page. I hid everything out side of this Div (overflow:hidden) and set a few other options. I also added a box-shadow to it (last three lines). We still need all three lines, I believe, for cross-browser reasons.

Each Slide is position:absolute so that we can easily move them. The rest of the options are self-explanatory. Keep in mind, the width of each slide will need to be smaller then the Slider div so that it can show the entire slide.

We also set Each Slide’s image height and width. That way, if you add in an image that’s got a different height/width, it doesn’t matter.

The eSdescription will be the background color for our description. Notice that it has many of the same CSS items as eSWords does. The reason we split them is because we want an opacity on the background (line 3 – filter: and opacity:). If you add opacity to a Div, everything in that Div gets the opacity added – even the words. But since we wanted the text nice and clear, we had to add another Div just for that. I’m hoping that at some point, they’ll fix this or give us an option to keep the text opaque.

Both eSdescription and eSWords are positioned absolute (remember they’re inside of Each Slide, so they’ll align to each slide), and started outside of the view area – bottom:-100px, height: 100px. On eSWords, I also added some padding so that it wouldn’t be jutted right up against the sides of the image. The width from the top I did as pixels, and the width from the sides I did as percentage because I wanted the text are to stretch the whole width (width:100%) but remember padding goes outside of that width. So I set the width to 90% and added padding as 5%. Adjust as desired.

The jQuery

And here’s the good stuff!

We start with simply calling some functions:

$(document).ready(function(){
 spacing();
 hoverEffect();
});

Remember to wrap the function calls within the document.ready so that they’ll call correctly.

Next we create the spacing function:

function spacing(){
 imagesN = $('#slider &gt; .eachSlide').length;    //how many slides
 width = $('#slider').width();     // width of the entire slide area
 spacing = width/imagesN;          // divide the width by the number of slides
 var i = 0;                        // start a counter
 imageSliders = new Array();       // new array
 imagePlace = new Array();         // new array
 $('#slider &gt; .eachSlide').each(function() {     // for each slide,
 $(this).css('left', spacing*i+'px');            // see below for explanation here down
 imageSliders.push($(this).children('img').attr('ID'));
 imagePlace.push(spacing*i);
 i++;
 });
}

We’ll use these variables a few times, so don’t declare them using “var” or they won’t be available¬†¬†outside of this function.

Most of the items are easily explained, but the last few lines need some extra help. On line 8, we cycle through each slide and set it’s css left property. That spacing variable we used before? That helps us know how far apart each slide should be so that they’ll still fit within the slider. Then we simply multiple the spacing by our counter (which tells us first slide, second slide, third slide, etc.) to find out that slide’s position left should be set at.

Next we add the ID of that image to an array to reference later.

Finally, we also add the spacing to an array so that we can reset the slider once the user hovers out.

The next function deals with moving the slides when the user hovers.

I left a few items in so that it would be easier to see what’s going on, even it if makes it a bit messier.

function hoverEffect(){
 $('#slider &gt; .eachSlide').hover(function(){     // when you hover of the slide
 ID = $(this).children('img').attr('id');        // find the attr of the image inside
 
 var movePercentage = 100/(imagesN-1);           //next we need to find how far to move the main image
 var moveSpec = movePercentage*ID;              
 pixels = (moveSpec/100)*$('#slider &gt; .eachSlide').width(); // this var will be moving the main image
 //slidersMove = pixels/ID; //this is what slidersMove is actually equal to but...
 //to make sure it works when ID = 0 (first one), we define it below:
 slidersMove = ((((100/(imagesN-1))*2)/100)*$('#slider &gt; .eachSlide').width())/2;
 //next we move the main image
 $(this).stop().animate({
    left: pixels,
 });
//then we also animate the descriptions so they move up so we can see them
 $(this).children('.eSdescription, .eSWords').animate({
 bottom: 0,
 });
 IDsLeftover = imagesN-ID-1; // # of slides to the right of the active one
 remainder = width-($('#0').width())-(pixels); //remainder of the area to the right (pixels)
 
//now we go on to each of the other images
$(imageSliders).each(function(){
 if (this != ID){          //if it's not the main image
 if ($('#'+this).attr('ID') &lt; ID){ //if it's to the left of the main image
 moveLeft(this);   // move this image left
 } else {
 moveRight(this);  // or if its to the right, move it right
 }
 }
 });
 }, function(){
 $(imageSliders).each(function(){         //go through all the slides
 $('#'+this).parent().stop().animate({    // for each one,
 left: imagePlace[this],                  // move them back to the original place
 });
 });
 $(this).children('.eSdescription, .eSWords').animate({    // also slide the description back
 bottom: -100,
 });
 });
}

And finally, we’ve got the last two functions, which were called in the code above:

function moveLeft(a){
    if ($('#'+a).parent().css('left') != '0px'){ // so if it's not the first slide,
        $('#'+a).parent().stop().animate({   // move them
            left: slidersMove*a,         // left to the appropriate place-variables above
        });
    }
}
 
function moveRight(a){        // this is for the ones moving right
    $('#'+a).parent().stop().animate({
        left: (slidersMove*a+$('#slider &gt; .eachSlide').width())-slidersMove,  
    });
}

EDIT:

The description box will animate completely everytime, so you get a build-up of the animation. To remove that, add “stop().” on lines 39 and 61: (Updated on the jsFiddle code)

Line 39:

$(this).children(‘.eSdescription, .eSWords’).stop().animate({

Line 61:

$(this).children(‘.eSdescription, .eSWords’).stop().animate({

Works much better that way!

SUBSCRIBE TO THE BLOG
Designing Programming Business
Comments

Leave a Reply

Your email address will not be published.

*



*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>