1
私はいくつかの部分を変更中にスラックしましたTHISスライダ。ここ複雑なjQueryイメージスライダを実装している間に
サムネイル&メイン表示画像が1つのサムネイルをクリックすると、1つの関係すなわち1つを持って、それはそうでその関連画像&を表示&次のサムネイルにスライド単一イメージ&を示しています。
今、私は1枚のサムネイルがassiciated /複数の画像とリンクしなければならないような方法で、このスライダーを変更するには、多くのメイン表示画像の関係（1 -to-多く）をクリックして、すなわち
に1つのサムネイル、すなわち"ベッドルームサムネイル"（付属の画像.. SCREENSHOT）には、&スライド5（またはn）個の画像がこの特定のサムネイルに関連して表示されます。同様に、「バスルームサムネイル "、それはこの特定のセクションに関連する&スライド5（またはn）枚数の画像を&と表示する必要があります。 1つのサムネイルから1つのメイン表示画像をONEからMANY [1つのサムネイルから5またはn個の特定のサムネイルに関連する画像]に変更する方法です
My Modified Thumbnail SectionのHTMLコードは同じです。
示すように、私は私は1つに画像のグループをリンクしながら、これまでのところ、私は、加算器別wrappersubクラス&を持っている私は立ち往生しています、スライダーのスクリプトコードを変更しています。..
<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>
をメインイメージ・セクションを変更しましたサムネイル、すなわちメイン画像セクションのulとサムネイルの画像をリンクする。
(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;
}
}
助けてください。
あなたは
アイデアマンのための感謝...しかし、スライドショーとスライダのリンクなどはありますか？ – Xzzst