jQuery

Scrolling jQuery Tool-tip Gallery

This snippet will allow you to make a horizontal scrolling gallery with tool-tips on the image items:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scrolling jQuery Tool-tip Gallery</title>

    <script>
        $("div.sc_menu_wrapper").ready(function () {
            function makeScrollable(wrapper, scrollable) {
                // Get jQuery elements
                var wrapper = $(wrapper), scrollable = $(scrollable);

                // Hide images until they are not loaded
                scrollable.hide();
                var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

                // Set function that will check if all images are loaded
                var interval = setInterval(function () {
                    var images = scrollable.find('img');
                    var completed = 0;

                    // Counts number of images that are succesfully loaded
                    images.each(function () {
                        if (this.complete) completed++;
                    });

                    if (completed == images.length) {
                        clearInterval(interval);
                        // Timeout added to fix problem with Chrome
                        setTimeout(function () {

                            loading.hide();
                            // Remove scrollbars
                            wrapper.css({overflow: 'hidden'});

                            //scrollable.slideDown('slow', function(){
                            scrollable.show();
                            enable();
                            //});
                        }, 1000);
                    }
                }, 100);

                function enable() {

                    var inactiveMargin = 99;

                    var wrapperWidth = wrapper.width();
                    var wrapperHeight = wrapper.height();


                    var tooltip = $('<div class="sc_menu_tooltip"></div>')
                        .css('opacity', 0)
                        .appendTo(".carrawrapper");

                    scrollable.find('a').each(function () {
                        $(this).data('tooltipText', this.title);
                    });

                    // Remove default tooltip
                    scrollable.find('a').removeAttr('title');
                    // Remove default tooltip in IE
                    scrollable.find('img').removeAttr('alt');

                    var lastTarget;
                    //When user move mouse over menu
                    wrapper.mousemove(function (e) {
                        lastTarget = e.target;

                        var wrapperOffset = wrapper.offset();
                        var divWidth = wrapper.width();

                        var ul = $('ul.sc_menu'), ulPadding = 15;
                        var lastLi = ul.find('li:last-child');
                        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

                        //var tooltipLeft = e.pageX - wrapperOffset.left + wrapper.scrollLeft();
                        var tooltipLeft = e.pageX - divWidth;
                        var tooltipTop = e.pageY - wrapperOffset.top + 10;


                        tooltip.css({top: tooltipTop, left: tooltipLeft, maxWidth: "150px"});

                        wrapper.css({overflow: 'hidden'});

                        var left = (e.pageX - wrapperOffset.left) * (ulWidth - divWidth) / divWidth + 10;
                        wrapper.scrollLeft(left);
                    });


                    $(".menutooltipImage").mouseout(function () {
                        lastTarget = false;
                        tooltip.stop(true).css('opacity', 0).text('');
                    }).mouseover(function (e) {
                        lastTarget = e.target;
                        if (!lastTarget) return;

                        var currentText = tooltip.text();

                        if (lastTarget.nodeName == 'IMG') {
                            // We've attached data to a link, not image
                            var newText = $(lastTarget).parent().data('tooltipText');

                            // Show tooltip with the new text
                            if (currentText != newText) {
                                tooltip
                                    .stop(true)
                                    .css('opacity', 1)
                                    .text(newText)
                                //.animate({opacity: 1}, 1000);
                            }
                        }
                    });
                }

                $(".shiftBookShelfLeftRight").click(function (e) {

                    var ul = $('ul.sc_menu'), ulPadding = 15;
                    var lastLi = ul.find('li:last-child');
                    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

                    var wrapperOffset = wrapper.offset();
                    var divWidth = wrapper.width();

                    var left = (e.pageX - wrapperOffset.left) * (ulWidth - divWidth) / divWidth + 10;
                    wrapper.scrollLeft(left);
                });

            }

            makeScrollable("div.sc_menu_wrapper", "ul.sc_menu");
        });
    </script>

    <style>
        div.sc_menu_wrapper {
            position: relative;
            height: 160px;
            /* Make bigger than a photo, because we need a place for a scroll-bar. */
            width: 500px;

            margin-top: 30px;
            overflow: auto;
        }

        div.sc_menu {
            padding: 15px 0;
        }

        .sc_menu a {
            display: block;
            margin-bottom: 5px;
            width: 130px;

            border: 2px rgb(79, 79, 79) solid;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;

            /* When image support is turned off */
            color: #fff;
            background: rgb(79, 79, 79);
        }

        .sc_menu a:hover {
            border-color: rgb(130, 130, 130);
            border-style: dotted;
        }

        .sc_menu img {
            display: block;
            border: none;
        }

        /* Styling tooltip */
        .sc_menu_tooltip {
            display: block;
            position: absolute;

            padding: 6px;
            font-size: 12px;
            color: #fff;

            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;

            border: 1px solid rgb(79, 79, 79);
            background: black;
            /* Make background a bit transparent for browsers that support rgba */
        }

        .sc_menu_wrapper .loading {
            position: absolute;
            top: 50px;
            left: 10px;

            margin: 0 auto;
            padding: 10px;

            width: 100px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;

            text-align: center;
            color: #fff;
            border: 1px solid rgb(79, 79, 79);
            background: #1F1D1D;
        }

        div.sc_menu {
            /* Set it so we could calculate the offsetLeft */
            position: relative;
            height: 145px;
            width: 500px;
            /* Add scroll-bars */
            overflow: auto;
        }

        ul.sc_menu {
            display: block;
            height: 110px;
            /* Max width here, for users without Javascript */
            width: 1500px;
            padding: 15px 0 0 15px;
            /* Remove default margin */
            margin: 0;
            list-style: none;
        }

        .sc_menu li {
            display: block;
            float: left;
            padding: 0 4px;
        }

        .sc_menu a {
            display: block;
            text-decoration: none;
        }

        .sc_menu span {
            /* We want a caption to display on the next line */
            display: block;
            margin-top: 3px;
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
    </style>

</head>
<body>
    <div style="position: relative;" class="carrawrapper">
        <a
            style="cursor: pointer; display: block; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px; position: absolute; top: 65px; left: 3px;"
            onclick="return false;"
            class="shiftBookShelfLeftRight"
            href="javascript:;"
        >
            <img src="/images/new_design/galleryprev.png">
        </a>
        <div style="margin: 0pt 42px; overflow: hidden; width: 650px;" class="sc_menu_wrapper">
            <ul style="display: block;" class="sc_menu">
                <li>
                    <a href="the_world_without_us_tefno_154524.html">
                        <img src="/images/jackets/17/172522.jpg" class="menutooltipImage">
                    </a>
                </li>
                <li>
                    <a title="nav" href="#">
                        <img src="2.jpg" alt="Navigation"/>
                    </a>
                </li>
                <li>
                    <a title="scroling" href="#">
                        <img src="2.jpg" alt="Scrolling"/>
                    </a>
                </li>
                <li>
                    <a title="jquery" href="#">
                        <img src="2.jpg" alt="jQuery"/>
                    </a>
                </li>
                <li>
                    <a title="jquery" href="#">
                        <img src="2.jpg" alt="jQuery"/>
                    </a>
                </li>
                <li>
                    <a title="jquery" href="#">
                        <img src="2.jpg" alt="jQuery"/>
                    </a>
                </li>
                <li>
                    <a title="jquery" href="#">
                        <img src="2.jpg" alt="jQuery"/>
                    </a>
                </li>
                <li>
                    <a title="jquery" href="#">
                        <img src="2.jpg" alt="jQuery"/>
                    </a>
                </li>
                <li>
                    <a title="jquery" href="#">
                        <img src="2.jpg" alt="jQuery"/>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s