Застрял во время реализации сложных jQuery Image Slider - PullRequest
0 голосов
/ 14 марта 2012

Я застрял где-то при изменении ЭТОГО слайдера.

Здесь Миниатюра и главное отображение изображения имеют отношение один к одному, то есть, нажав на 1 миниатюру, Этопоказывает одно изображение, затем оно перемещается к следующему уменьшенному изображению и отображает связанное с ним изображение и т. д.

Теперь я хочу изменить этот ползунок таким образом, чтобы один эскиз был связан / связан с несколькими изображениями.то есть один эскиз ко многим основным отображаемым изображениям (один – ко-многим)

, т. е. нажав « Эскиз спальни » (как показано на прилагаемом изображении .. SCREENSHOT ), он должен отображать и скользить только 5 (или n) количество изображений, связанных с этой конкретной миниатюрой, а затем, если я нажимаю «Миниатюра ванной комнаты», он должен отображаться и скользить 5(или n) количество изображений, связанных с этим конкретным разделом и так далее.Так вот, как я хочу изменить код от ОДНОГО к ОДНОМУ [одно изображение миниатюры к одному основному отображению] на ОДНО К МНОГОМУ [одно изображение от 5 до n или число изображений, связанных с этим конкретным уменьшенным изображением]

HTML-код моей секции измененных миниатюр такой же.

Я изменил секцию основного изображения, как показано ..

<div id="lofslidecontent45" class="lof-slidecontent" style="width:670px;height:236px;">
<div class="preload"><div></div></div>
<div class="lof-main-outer" style="width:670px; height:236px;">
<ul class="lof-main-wapper">
    <li>
        <ul class=”lof-main-subwapper”>
                    <li>
 <img src="images/slider1.jpg" title="Newsflash 2" >           
                        <div class="lof-main-item-desc">
                        <h3>Innovation</h3>
<h2>lorem ipsum is simply dummy text</h2>
                        </div>
                    </li>
                     <li>
                         ..
                     </li>
         </ul>
     </li>
     <li>
        <ul class=”lof-main-subwapper”>
            <li>
                …
            </li>
            <li>
                …
            </li>
        </ul>
    </li>
</ul>
</div>
</div>

Я изменяю код сценария ползунка, поэтомупока у меня есть сумматор другого класса wrappersub, и я застрял, когда связывал группу изображений с одним эскизом, т.е. связывал ul основного раздела изображения с li эскиза ...

 (function($) {
 $.fn.lofJSidernews = function( settings ) {
    return this.each(function() {
        // get instance of the lofSiderNew.
        new  $.lofSidernews( this, settings ); 
    });
 }


$.lofSidernews = function( obj, settings ){
    this.settings = {
        direction           : '',
        mainItemSelector        : 'li',
                    mainInnerItemSelector   : 'li',
        navInnerSelector    : 'ul',
        navSelector         : 'li' ,
        navigatorEvent      : 'click',
                    subWrapperSelector      :'.lof-main-subwrapper',
        wapperSelector:     '.lof-main-wapper',
        interval        : 4000,
                    innerinterval           :20000,  
        auto                : true, // whether to automatic play   the slideshow
maxItemDisplay      : 5,
        startItem           : 0,
        navPosition         : 'vertical', 
        navigatorHeight     : 100,
        navigatorWidth      : 310,
        duration            : 600,
navItemsSelector    : '.lof-navigator li',
        navOuterSelector    : '.lof-navigator-outer' ,
        isPreloaded         : true,
        easing              : 'easeInOutQuad'
    }   

$.extend( this.settings, settings ||{} );   
    this.nextNo         = null;
    this.previousNo     = null;
    this.maxWidth  = this.settings.mainWidth || 600;
    this.wrapper = $( obj ).find( this.settings.wapperSelector );
            this.subSlides = this.wrapper.find( this.settings.mainItemSelector );
            this.subwrapper = this.subslides.find(this.settings.subWrapperSelector)
            this.slides = this.subwrapper.find(this.settings.mainInnerItemSelector)

if( !this.wrapper.length || !this.subslides.length ) return ;
if( !this.subwrapper.length || !this.slides.length ) return ;
if( this.settings.maxItemDisplay > this.slides.length ){
        this.settings.maxItemDisplay = this.slides.length;  
}
    this.currentNo      = isNaN(this.settings.startItem)
)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );  
    this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){ 
        this.navigatorInner.width( this.slides.length *   this.settings.navigatorWidth );
        this.navigatorOuter.width( this.settings.maxItemDisplay *   this.settings.navigatorWidth );
        this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
        this.navigatorInner.height( this.slides.length *    this.settings.navigatorHeight );    

        this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
        this.navigatorOuter.width(  this.settings.navigatorWidth );
    }       

this.navigratorStep = this.__getPositionMode( this.settings.navPosition );      
    this.directionMode = this.__getDirectionMode();  
if( this.settings.direction == 'opacity') {
this.subwrapper.addClass( 'lof-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
} else { 
        this.subwrapper.css
({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) *    this.slides.length } );
    }
    if( this.settings.isPreloaded ) {
        this.preLoadImage( this.onComplete );
    } else {
        this.onComplete();
    }

 }


  $.lofSidernews.fn =  $.lofSidernews.prototype;
 $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;

 $.lofSidernews.fn.extend({


    startUp:function( obj, subwrapper ) {
        seft = this;

        this.navigatorItems.each( function(index, item ){
            $(item).click( function(){
                seft.jumping( index, true );
                seft.setNavActive( index, item );                   
            } );
            $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
        })
        this.registerWheelHandler( this.navigatorOuter, this );
        this.setNavActive(this.currentNo );

        if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
            this.registerButtonsControl( 'click', this.settings.buttons, this );

        }
        if( this.settings.auto ) 
        this.play( this.settings.innerinterval,'next', true );

        return this;
    },
onComplete:function(){
        setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
    },
preLoadImage:function(  callback ){
        var self = this;
        var images = this.subwrapper.find( 'img' );
var count = 0;
        images.each( function(index,image){ 
            if( !image.complete ){                
                image.onload =function(){
                    count++;
                    if( count >= images.length ){
                        self.onComplete();
                    }
                }
                image.onerror =function(){ 
                    count++;
                    if( count >= images.length ){
                        self.onComplete();
                    }   
                }
            }else {
                count++;
                if( count >= images.length ){
                    self.onComplete();
                }   
            }
        } );
    },
    navivationAnimate:function( currentIndex ) { 

        if (currentIndex <= this.settings.startItem 
            || currentIndex - this.settings.startItem >=   this.settings.maxItemDisplay-1) {
                this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                if (this.settings.startItem < 0) this.settings.startItem = 0;
                if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                    this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                }
        }       

Любая ПОМОЩЬ была бы признательна.

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 июня 2013

попробуйте добавить "var" в строку 238, это становится: var seft = this;

0 голосов
/ 14 марта 2012

Возможно, вы могли бы попробовать добавить слайд-шоу внутри другого слайдера, который будет поддерживать больше контента, например Anything Slider .Я использовал его в проектах, и мне повезло с добавлением моих собственных вещей в слайды.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...