Oxarticlebox.js

Deutsches Forum
1

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

( 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

2

wie bringe ich dem script bei, dass es nachdem einblenden des Elements, nach dem .mouseover wieder ausblendet geht.

wie müsste dieser teil vom code aussehen?

//if not opened

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

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

weiss es echt niemand wie man das macht?

4

Schon einmal mouseout probiert?
http://api.jquery.com/mouseout/