Question

I’m trying to develop a slide gallery with image tooltips according to this design:

What I need to develop is a slider controlled by two buttons, each time a button is pressed the slider’s content must move a width of the slider or the width of the content left on that side, whichever is smaller. Upon mouse entering an image inside the slider the full-size version must be displayed as a tooltip.

Here’s a fiddle of my solution so far, the problem I’m having is that images that don’t fully fit into view plus the hidden area to the left get moved to a new line. You can see the problem by clicking the
“Show content size” button, the width of the content element will be equal to the width of the container element + content element’s margin-left.

Bonus points if you can suggest an algorithm for moving the content to the right, I’ve got left figured out to a T (or so I think, anyway), but right is going to take a little more work (it doesn’t check whether the end of the content has been reached). Update: It seems I can’t implement proper movement to the right until the other issue is resolved, here’s the algorithm I came up with, I can’t measure “left to display” if I can’t measure the actual width of the content element.

Answer 1

I created something you might like:

gallery demo

• The gallery does not scroll the full gallery width by default (you can change that) cause some initially cut-off images at the right side, after a ‘full’ slide would result cut-off again, just on the other side of our gallery. You have for that cause the beKind variable. Adjust it as you like.
• It hides the buttons if there’s not enough content to make the gallery usable.
• The gallery calculates the remaining space to scroll.
• Once the slider end reached – the left/right buttons make the gallery jump to the beginning/end, so that are always usable. (Seems kinda weird to have a button… but that does nothing right? 😉 )
• The Tooltip has a hover-intent built in, to not piss off our users if they unintentionally hovered our gallery: (the tooltip fades in if the hover is registered for more that 120ms. Fair timing. I like it.)
• As pointed out in your comment now the tooltip will not go off the screen.

jQ:

// Slide Kind Gallery - by roXon // non plugin v. // CC 2012.
$(window).load(function(){  
    var galW = $('#gallery').outerWidth(true),
        beKind = 120, // px substracted to the full animation to allow some images to be fully visible - if initially partly visible.
        sumW = 0;       
    $('#slider img').each(function(){
        sumW += $(this).outerWidth(true);
    }); 
    $('#slider').width(sumW);
    if(sumW <= galW){ $('.gal_btn').remove(); } 
    function anim(dir){
        var sliderPos = Math.abs($('#slider').position().left),
            rem = dir ==='-=' ? rem = sumW-(sliderPos+galW) : rem = sliderPos,
            movePx = rem<=galW ? movePx = rem : movePx = galW-beKind;
        if( movePx <= 10){
            movePx = dir==='-=' ? movePx=rem : movePx = galW-sumW;
            dir = '';
        }
        $('#slider').stop(1).animate({left: dir+''+movePx },1000);
    }   
    $('.gal_btn').on('click', function(){
        var doit = $(this).hasClass('gal_left') ? anim('+=') : anim('-=');
    }); 
});

And the tooltip script:

// Addon // Tooltip script
var $tt = $('#tooltip');
var ttW2 = $tt.outerWidth(true)/2;
var winW = 0;
function getWW(){ winW = $(window).width(); }
getWW();
$(window).on('resize', getWW);
$('#slider img').on('mousemove',function(e){
    var m = {x: e.pageX, y: e.pageY};
    if( m.x <= ttW2 ){
       m.x = ttW2;
    }else if( m.x >= (winW-ttW2) ){
       m.x = winW-ttW2;
    }
    $tt.css({left: m.x-ttW2, top: m.y+10});
}).hover(function(){
    $clon = $(this).clone();
    var t = setTimeout(function() {
        $tt.empty().append( $clon ).stop().fadeTo(300,1);
    },120);
    $(this).data('timeout', t); 
},function(){
    $tt.stop().fadeTo(300,0,function(){
        $(this).hide();  
    });
    clearTimeout($(this).data('timeout'));
});

HTML

(Place the #tooltip div after the body tag)

<div id="tooltip"></div>

<div id="gallery_container">
    <div id="gallery"> 
        <div id="slider">
            <img src="" alt="" />
            <img src="" alt="" />
        </div> 
    </div>
    <div class="gal_left gal_btn">&#9664;</div>
    <div class="gal_right gal_btn">&#9654;</div>
</div>

CSS:

/*GALLERY*/
#gallery_container{
    position:relative;
    margin:0 auto;
    width:600px;
    padding:0 30px; /*for the buttons */
    background:#eee;
    border-radius:5px;
    box-shadow: 0 2px 3px #888;
}
#gallery{
    position:relative;
    height:100px;
    width:600px;
    overflow:hidden;
}
#slider{
    position:absolute;
    left:0px;
    height:100px;
}
#slider img{
    height:100.999%; /* fixes some MOZ image resize inconsistencies */
    float:left;
    cursor:pointer;
    border-right:3px solid transparent; /* instead of margin that could leat to some wrong widths calculations. */
}
.gal_btn{
    position:absolute;
    top:0px;
    width:30px; /*the container padding */
    height:40px;
    padding:30px 0;
    text-align:center;
    font-size:30px;
    cursor:pointer;
}
.gal_left{left:0px;}
.gal_right{right:0px;}
/* end GALLERY */

/* TOOLTIP ADDON */
#tooltip{
    position:absolute;
    z-index:100;
    width:300px;
    padding:10px;
    background:#fff;
    background: rgba(255,255,255,0.3);
    box-shadow:0px 3px 6px -2px #111;
    display:none;
}
#tooltip *{
    width:100%;
    vertical-align:middle;
}
/* end TOOLTIP ADDON */

Hope you’ll like it, and you learned some useful UI design tricks.

By the way, if you want to populate your ALT attributes (Search engines like it!) you can also grab that text and make it appear inside the tooltip like here!:

demo with text inside the tooltip

Happy coding.