Quantcast
Channel: OXID Community Forum
Viewing all articles
Browse latest Browse all 6951

oxarticlebox.js

$
0
0
hallo zusammen,

ich hoffe, jemand kann mir bei meinem vorhaben helfen.

ich versuche die oxarticlebox.js so umzubauen, dass es das gleiche macht wie bei:

www.impressionen.ch

siehe unter "Kunden kauften auch" Marke und Preis wird angezeigt, während man mit der Maus über das Produkt fährt.

Code: oxarticlebox.js

HTML Code:

( function( $ ) {

    oxArticleBox = {

        _create: function(){
            var oSelf        = this,
                oElement      = oSelf.element,
                sTitlePattern = /^(.+) \([0-9]+\)$/,
                sEndPattern  = / \([0-9]+\)$/;

            //hide all
            $('.articleTitle', oElement).hide();

            //open first
            //$('.articleTitle:last', oElement).hide();
            //$('.articleTitle:last', oElement).addClass('showTitle');

            $('.articleImage', oElement).mouseover(function() {

                //if not opened
                if ($(this).next().is(':hidden') == true) {

                    //closing opened
                              $('.articleImage', oElement).removeClass('imageOn');                                                       
                    $('.showTitle', oElement).slideUp(500);
                                       
                    //opening selected
                    $(this).addClass('imageOn');
                    $(this).next().addClass('showTitle')
                    $(this).next().toggle(600);
                }
            });
                       

            // triming titles to mach container width (if needed)
            $( ".box h3 a", oElement ).each(function() {
                var  iTitleWidthh = $(this).width(),
                    iContWidt = $(this).parent().width(),
                    sTitleText  = $.trim($(this).text());

                // if title is longer than its container
                if (iTitleWidth > iContWidth) {

                    // checking if title has numbers at the end
                    var sTitleEnd            = $.trim(sEndPattern.exec(sTitleText));

                    // seperating the title from the numbers
                    if (sTitleEnd) {
                        sTitleEnd  = ' ' + sTitleEnd;
                        sTitleText = sTitlePattern.exec(sTitleText).pop();
                    }

                    // getting the length of the title
                    var iTitleLength = sTitleText.length;

                    while (iTitleWidth > iContWidth)
                    {
                        iTitleLength--;
                        $(this).html(sTitleText.substr(0, iTitleLength)+'…' + sTitleEnd);
                        var iTitleWidth = $(this).width();
                    }
                    $(this).attr('title',sTitleText);
                }
            });
        }
    }

    $.widget( "ui.oxArticleBox", oxArticleBox );

} )( jQuery );



Vielen Dank.
Avni

Viewing all articles
Browse latest Browse all 6951

Trending Articles