SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image slider hover to show content

    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:

    Code JavaScript:
    $(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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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.
    Code JavaScript:
    $("#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.

    Code JavaScript:
    $("#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, jCarouselLite , Nivo Slider, etc.)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •