Announcement

Collapse
No announcement yet.

Christmas present! Display a tooltip image on the shopping cart icons.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Christmas present! Display a tooltip image on the shopping cart icons.

    This should work on most SellerDeck versions. The shopping cart shows a small icon for each product. This tweak displays a larger version of the icon as a tool-tip when the customer hovers over the icon.

    To install, go to Design / Library / Layouts / JavaScript Header Functions / Standard Javascript Header Functions
    Scroll to the bottom and after all existing code paste the following:
    Code:
    <style>
    /* Tooltip for shopping cart icons */
    #ct-popimg {min-width:100px; max-width:200px;}
    #ct-preview {position:absolute; border:1px solid #999; border-radius: 5px; background:#ffffff; padding:5px; display:none; color:#333; z-index:999999;}
    </style>
    
    <script type="text/javascript">
    /*
     * Image preview script - tweaked drillpine for unique namespace and repositioning
     * written by Alen Grakalic (http://cssglobe.com)
     * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
     */
    
    this.ct_ImagePreview = function(){    
        var xOffset = 30;    // NB back to front
        var yOffset = 20;
    
        $("img.cartthumbnail").click(function(e){return false;});    // inhibit click
        $("img.cartthumbnail").hover(function(e){
            this.t = this.title;
            this.title = "";
            var c = (this.t != "") ? "<br/>" + this.t : "";
            $("body").append("<p id='ct-preview'><img id='ct-popimg' src='"+ $(this).attr('src') +"' alt='Image preview' />"+ c + "</p>");
            var ttwidth = $("#ct-preview").width();
                                     
            $("#ct-preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",((ttwidth + e.pageX + yOffset) < $(window).width() ) ? e.pageX + yOffset : e.pageX - ttwidth - yOffset + "px")
                .fadeIn(500);                        
        },
        function(){
            this.title = this.t;    
            $("#ct-preview").remove();
        });    
        $("img.cartthumbnail").mousemove(function(e){
            var pw = $("#ct-popimg").width();
            $("#ct-preview").width(pw);
            var border_top = $(window).scrollTop();
            var ttheight = $("#ct-preview").height();
            var ttwidth = $("#ct-preview").width();
            var top_pos = (border_top+(xOffset*2)>=(e.pageY - ttheight)) ? border_top + xOffset : e.pageY - ttheight - xOffset;
            $("#ct-preview")
                .css("top", top_pos + "px")
                .css("left",((ttwidth + e.pageX + yOffset) < $(window).width() ) ? e.pageX + yOffset : e.pageX - ttwidth - yOffset + "px");
        });            
    };
    
    $(document).ready(function(){ct_ImagePreview();});
    </script>
    Update the site and that's it.


    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey
Working...
X