Image slider hover to show content

JavaScript
1

I am trying to create an image slider than when hovered over shows a div with text relating to the image…i’m confused as how to do this, I have tried a few things but I am stuck. Trying to learn JQuery, any help would be appreciated, here is the code:


$(document).ready(function(){
    
    //Image slider behaviour
    rotateImages(1);
    
    function rotateImages(currentImage) {
        var numberOfImages = $('#image-slider img').length;
        currentImage = currentImage % numberOfImages;
        
        $('#image-slider img').eq(currentImage).fadeOut(function() {
            //Z-index
            $('#image-slider img').each(function(i) {
                $(this).css(
                    'zIndex', ((numberOfImages - i) + currentImage) % numberOfImages
                );
            });
            
            $(this).show();
            setTimeout(function() {rotateImages(++currentImage);}, 4000);
        });
    };
    
    //Image slider content div
    $('#image-slider').hover(function() {
        $('<div class="image-slider-content"></div>').css({
            width: '300px',
            height: '150px',
            backgroundColor: '#000000',
            position: 'absolute',
            zIndex: '50'
        }).appendTo('#image-slider');
    });
});
2

Perhaps it’s a good idea to inject a div with content related to the images. It looks like you’re using just a div with images in for your slider. So I’ll base my example/recommendations off that.

Firstly, add a title attribute to your images:


<img src="/path/to/img.jpg" title="This is a title for this image">

Now we can inject a div, do this before your rotateImages() function is called.

$("#image-slider").append("<div id='image-slider-content'/>");

At this point it’s worth mentioning to make sure there is some CSS to make the #image-slider-content div hidden by default.

Now we can begin the hover action, we’ll put the hover on the images rather than the image slider so we have a direct reference to image we want to target.

$("#image-slider").delegate("img", "hover", function(){  
  $("#image-slider-content").html($(this).attr("title")).toggle();
});

What I’ve done here is delegated the hover event on the #image-slider so it will only pass the event on to images. Then grab the currently hovered image’s title and put it in to the content div. Finally a call to toggle will either show or hide the image depending on hover state (if the initial state is hidden, then it will show on hover).

It might also be worth mentioning that this functionality has of course been written many times over and a myriad of jQuery plugins exist that will do this (and more) for you. (Anythingslider, [URL=“http://www.gmarwaha.com/jquery/jcarousellite/”]jCarouselLite , [URL=“http://nivo.dev7studios.com/”]Nivo Slider, etc.)

3

Thanks. I’ll try this out!

I know there are already a lot of image slider plugins out there, i’m doing this excercise to try and help learn JQuery.

Thanks again.

4

Hehe I thought that might have been the case. It’s a most excellent way to learn, taking a familiar UI element and making your own version of it.

Are there any other specific areas you want to find more info on regarding jQuery?