Business Catalyst Web App: How do i created a image that hovers over list view

Question

Please see link below: http://deerfootnew.businesscatalyst.com/_ryan

I have been trying to create a event handler for a few days with no luck. I want end users to hover over any one of those web app items and an image appear over the list view, center of the page. The image removes when the mouse leaves.

The image (the carpet) is derived from one the web app fields {tag_picture}. The image is a larger than what you see in the list view, and I want a lighbox to appear to show the larger image.

what do I do?

Answer 1

Be aware that changing the page layout on hover, or showing elements atop the hovered elements, is at best a dire User Interface pattern; it won't work for touch devices, and often creates loops when the hovered element is no longer hovered because the layout changed.

You may have more luck putting the large image in the web app List Item template, hidden by default, then shown beside the item. Perhaps something like this?

HTML snippet, based on the linked page (.df-largeimage is new):

<div class="deerfootCarpretTest">
    <div class="df1">Carpet </div>
    <div class="df2"><a href="/carpet_test/carpet-1"><img border="0" alt="" src="/images/test carpet-01.jpg"></a></div>
    <div class="df3"> From:     300</div>
    <div class="df-largeimage">
        <img border="0" alt="" src="/images/test carpet-01.jpg">
    </div>
</div>

CSS:

.df-largeimage {
    display: none;
    left: 230px;
    position: absolute;
}

Javascript:

jQuery(".df2").hover(
    // mouseenter
    function() {
        jQuery(this).siblings(".df-largeimage").show()
    },
    // mouseleave
    function() {
        jQuery(this).siblings(".df-largeimage").hide()
    }
);