CODEWITHSUNDEEP
javascriptjqueryhtmlonclickonmouseover
Fra
Fra

Reputation: 1

how to change from "on click" to on mouse over in this code

I have this code, and I need to load the larger image on mouse hover on thumb instead of on click. Also, is it possible in a simple way to add "next" and "prev" buttons when a larger image is loaded to go through all the images? thanks!

/**
 * Image toggle in product page previews
 */
$(".product-preview li a").each(function(i,el) {
    var _t = $(el);
    _t.click(function(e) {
        var pr = _t.closest("ul").next(".large-preview"),
            dtsrc = _t.data("src"),
            loader = pr.find("span.load");
        e.preventDefault();
        // fadeout preview-image
        pr.find("img").fadeOut(function(){
            // remove it
            $(this).remove();
            // light-up the loader
            loader.addClass("loading");
            // create new image, append it and reveal it
            var img = $('<img />').hide().attr({ 'src': dtsrc, 'class': 'img-responsive' }).load(function(){
                loader.removeClass("loading");
            }).appendTo(pr).fadeIn();
        });
        // update the large preview
        pr.attr("href", _t.data("large"));
    });
});

HTML:

<div class="product-preview clearfix">
    <ul class="thumblist">

        <li>
            <a href="#" data-src="cover.jpg" data-large="cover.jpg">
                <img src="cover.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="1.jpg" data-large="1.jpg">
                <img src="1.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="2.jpg" data-large="2.jpg">
                <img src="2.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="3.jpg" data-large="3.jpg">
                <img src="3.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="4.jpg" data-large="4.jpg">
                <img src="4.jpg" alt="" class="img-responsive">
            </a>
        </li>

    </ul>
    <!-- // thumblist -->



    <a href="cover.jpg" class="large-preview" data-lightbox="image">
        <span class="load"></span>
        <img src="cover.jpg" alt="" width="460" class="img-responsive">
    </a>
    <!-- // large-preview -->
</div>
<!-- //product-preview -->

Upvotes: 0

Views: 182

Answers (1)

Tushar
Tushar

Reputation: 87203

Change _t.click(function(e) { to

_t.on('hover', function(e) {

You can also use mouseover

_t.on('mouseover', function(e) {

Reference: http://api.jquery.com/on/

Upvotes: 1

Related Questions