Joomla Templates Club 406,261 posts

[gail_peacock Friend gail_peacockJoin date: January 2010Posts: 23Downloads:1Uploads:0 Thanks: 7 Thanked: 4 times in 3 posts]

#148751

Hello

This slideshow is causing me problems. Does it actually work in Internet Explorer? It functions perfectly in Firefox. It displays the title and description of the first item when the page loads, great. When you select another item the image changes ok but the title and description do not change. Only when I move the cursor over the main large image does it change its state.

Like I have said it all functions well in firefox. In IE it just doesn’t keep up.

What can be done about it please?

I have tried adding new items to the slideshow whilst browsing in Firefox to see if this might change anything but it didn’t.

Once I have this little gremlin sorted I can get on and tidy articles up and go live.

Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#333530

Hello guy!

as our demo, the module is working well, if it does not work well on your site, may be some conflict happened. pls give me the link to your site.
Thanks

[gail_peacock Friend gail_peacockJoin date: January 2010Posts: 23Downloads:1Uploads:0 Thanks: 7 Thanked: 4 times in 3 posts]

#333756

Hello,

It’s OK I have it working as it should now. It took some messing around with the settings. I would like to have the main image as a kink to the article though. I also need to fix the Read more link to show the article and not to link to only the home page.

[th3who Friend th3whoJoin date: September 2009Posts: 42Downloads:0Uploads:2 Thanks: 8 Thanked: 1 times in 1 posts]

#335156

i am having this same issue how can i resolve this??? the demo site does this same thing for me on INTERNET explorer 8 but compatibility view resolves the issue

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#335554

Dear all

the issue with ie 8 is fixed:

/*
$JA#COPYRIGHT$
*/
Element.Events.extend({
‘wheelup’: {
type: Element.Events.mousewheel.type,
map: function(event){
event = new Event(event);
if (event.wheel >= 0) this.fireEvent(‘wheelup’, event)
}
},
‘wheeldown’: {
type: Element.Events.mousewheel.type,
map: function(event){
event = new Event(event);
if (event.wheel <= 0) this.fireEvent(‘wheeldown’, event)
}
}
});

var JASlideshowThree = new Class({
initialize: function(options){
this.options = Object.extend({
buttons : {},
interval:5000,
handle_event: ‘click’,
button_event: ‘click’,
box: {},
size: 240,
mode: ‘horizontal’,
items:[],
handles:[],
onWalk:{},
handlerBox:null,
animation: ‘fade’,
animationRepeat: ‘true’,
autoPlay: false,
languageDirection:null
}, options || {});

this.items = this.options.items;
if( this.options.languageDirection == ‘rtl’ ) {
this.modes = {horizontal:[‘right’,’width’], vertical:[‘top’,’height’]};
}else {
this.modes = {horizontal:[‘left’,’width’], vertical:[‘top’,’height’]};
}
this.box = $(this.options.box);

this.buttons = {previous: [], next: [], play: [], playback: [], stop: []};

this.allbuttons = [];
if(this.options.buttons){
for(var action in this.options.buttons){
this.addActionButtons(action, $type(this.options.buttons)==’array’ ? this.options.buttons : ]);
}
}
this.handles = this.options.handles;
if(this.handles){
this.addHandleButtons(this.handles);
}
///
if( this.options.handlerBox != null){
this.options.handlerBox.addEvents({
‘wheelup’: function(e) {

e = new Event(e).stop();
this.previous(true);
}.bind(this),

‘wheeldown’: function(e) {
e = new Event(e).stop();

this.next(true);
}.bind(this)
} );
}
////
//this.fx = new Fx.Style(this.box,this.modes[0],this.options.fxOptions||{duration:500,wait:false});
this.allbuttons.each (function (button){
button.addEvent (‘mouseover’, function (){this.addClass (‘hover’);});
button.addEvent (‘mouseout’, function (){this.removeClass (‘hover’);});
});

this.currentIndex = this.options.startItem || 0;
this.previousIndex = null;
this.nextIndex = null;
this._auto = null;
this.initFx();
if(this.options.autoPlay) this.play(this.options.interval,’next’,true);
this.walk (this.currentIndex);
},

previous: function(manual){
this.lastIndex = this.currentIndex;
this.currentIndex += this.currentIndex>0 ? -1 : this.items.length-1;
this.walk(null,manual);
},

next: function(manual){
this.lastIndex = this.currentIndex;
this.currentIndex += this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length;
this.walk(null,manual);
},

play: function(delay,direction,wait){
this.stop();
if(!wait){
this(false);
}
this._auto = this.periodical(delay,this,false);
},

stop: function(){
$clear(this._auto);
},

walk: function(item,manual){
//alert(item + ‘ ‘ + manual);
if($defined(item)){
this.lastIndex = this.currentIndex;
//if(item==this.currentIndex) return;
this.currentIndex= parseInt(item);
}
this.previousIndex = this.currentIndex + (this.currentIndex>0 ? -1 : this.items.length-1);
this.nextIndex = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);

if(manual || (this.nextIndex == 0 && this.options.animationRepeat==’false’)){
this.stop();
}
//this.fx.start(-this.currentIndex*this.options.size + this.options.offset);
if(this.options.onWalk){ this.options.onWalk(this.currentIndex,(this.handles?this.handles:null)); }
this.animate();
if(manual && this.options.autoPlay){ this.play(this.options.interval,’next’,true); }
},
initFx: function () {
if (this.options.animation.test (/move/)) {
this.box.setStyle(this.modes[1],(this.options.size*this.options.items.length+200)+’px’);
this.box.setStyle(this.modes[0],(-this.currentIndex*this.options.size) + this.options.offset+’px’);
this.fx = new Fx.Style(this.box,this.modes[0],this.options.fxOptions||{duration:500,wait:false});
return;
}
this.items.setStyles({‘position’:’absolute’, ‘top’:0, ‘display’:’none’});
this.items.setStyle(this.modes[0],0);
this.items.setStyle (‘display’, ‘block’);
if (this.options.animation.test (/fade/)) {
for (var i=0;i<this.items.length;i++) {
this.items.fx = new Fx.Style(this.items,’opacity’,this.options.fxOptions||{duration:500,wait:false});
}
}
},
animate: function () {
if (this.options.animation.test (/move/)) {
this.fx.start(-this.currentIndex*this.options.size + this.options.offset);
return;
}
var others = [];
for (var i=0;i<this.items.length;i++) {
this.items.fx.stop();
if (i!=this.currentIndex && i!= this.lastIndex) others.push (this.items);
}
this.currentIndex = parseInt(this.currentIndex);
$$(others).setStyle (‘display’, ‘none’);
if (this.lastIndex == this.currentIndex) {
this.items.setStyles ({‘display’:’block’, ‘opacity’: 1});
} else {
this.items.setStyles ({‘display’:’block’, ‘opacity’: 0, ‘z-index’: 10});
this.items.setStyles ({‘z-index’: 9});
}
if (this.options.animation.test (/fade/)) {
this.items.fx.start(0);
this.items.fx.start(1);
return;
}
},

addHandleButtons: function(handles){
for(var i=0;i<handles.length;i++){
handles.addEvent(this.options.handle_event,this.walk.bind(this,));
this.allbuttons.push (handles);
}
//handles.addEvent(this.options.handle_event, function(){this.blur();});
},

addActionButtons: function(action,buttons){
for(var i=0; i<buttons.length; i++){
switch(action){
case ‘previous’: buttons.addEvent(this.options.button_event,this.previous.bind(this,true)); break;
case ‘next’: buttons.addEvent(this.options.button_event,this.next.bind(this,true)); break;
case ‘play’: buttons.addEvent(this.options.button_event,this.play.bind(this,)); break;
case ‘playback’: buttons.addEvent(this.options.button_event,this.play.bind(this,)); break;
case ‘stop’: buttons.addEvent(this.options.button_event,this.stop.bind(this)); break;
}
this.buttons.push(buttons);
buttons.addEvent(this.options.button_event, function(){this.blur();});
this.allbuttons.push (buttons);
}
}

});
///

var JASlideshow2 = new Class({
initialize: function(element, options) {
this.options = Object.extend({
startItem: 0,
showItem: 4,
mainWidth: 360,
mainHeight: 240,
itemWidth: 160,
itemHeight: 160,
duration: 400,
interval: 5000,
transition: Fx.Transitions.Back.easeOut,
thumbOpacity:’0.8′,
maskDesc : ‘maskDesc’,
maskWidth:360,
maskHeigth:50,
but_prev:’ja-slide-prev’,
but_next: ‘ja-slide-next’,
maskOpacity: ‘0.8’,
buttonOpacity: ‘0.4’,
overlap: 1,
navigation: ”,
animation: ‘fade’,
animationRepeat: ‘true’,
thumbSpaces: [3,3],
autoPlay: false,
maskAlignment:’bottom’,
showbtncontrol:false,
urls:”,
maskerTransStyle:’opacity’,
maskerTrans:Fx.Transitions.linear,
navePos:’horizontal’,
languageDirection:null

}, options || {});

if (!this.options.animation.test(/move/)) this.options.overlap = 0;

this.el = $(element);
this.fxOptions = {duration:this.options.duration, transition:this.options.transition, wait: false}

this.elmain = this.el.getElement(‘.ja-slide-main-wrap’);
var conWidth = this.options.overlap?’100%’:this.options.mainWidth;
this.elmain.setStyles ({‘width’:conWidth, ‘height’:this.options.mainHeight});
this.els = this.el.getElements(‘.ja-slide-item’);
this.els.setStyles ({‘width’:this.options.mainWidth, ‘height’:this.options.mainHeight});
this.options.rearWidth = 0;
this.options.mainSpace = 0;

if ( this.options.overlap ) {
this.options.mainSpace = 10;
this.options.rearWidth = Math.ceil((this.elmain.offsetWidth – this.options.mainWidth)/2) – this.options.mainSpace;

this.but_prev = this.el.getElement(‘.’+this.options.but_prev);
this.but_next = this.el.getElement(‘.’+this.options.but_next);

this.but_prev.setStyles({‘opacity’: this.options.buttonOpacity, ‘width’: this.options.rearWidth, ‘height’: this.options.mainHeight});
this.but_next.setStyles({‘opacity’: this.options.buttonOpacity, ‘width’: this.options.rearWidth, ‘height’: this.options.mainHeight});

this.but_prev.addEvents ({
‘mouseover’: function (){this.but_prev.setStyle(‘opacity’, this.options.buttonOpacity/2);}.bind(this),
‘mouseout’: function (){this.but_prev.setStyle(‘opacity’, this.options.buttonOpacity);}.bind(this)
});

this.but_next.addEvents ({
‘mouseenter’: function (){this.but_next.setStyle(‘opacity’, this.options.buttonOpacity/2);}.bind(this),
‘mouseleave’: function (){this.but_next.setStyle(‘opacity’, this.options.buttonOpacity);}.bind(this)
});
this.els.setStyle (‘margin-right’, this.options.mainSpace);
}

/*Need to be fixed to work with moving up/down*/
var navWrap= this.el.getElement(‘.ja-slide-thumbs-wrap’);
if( this.options.navigation && navWrap != null ){
// for hori

if( this.options.languageDirection == ‘rtl’ ){
var modes = {horizontal:[‘right’,’width’], vertical_left:[‘top’,’height’],vertical_right:[‘top’,’height’]};
} else {
var modes = {horizontal:[‘left’,’width’], vertical_left:[‘top’,’height’],vertical_right:[‘top’,’height’]};
}
if( this.options.navePos == ‘vertical_left’ || this.options.navePos == ‘vertical_right’ ){
navWrap.setStyles ({‘width’:this.options.itemWidth, ‘height’:this.options.itemHeight*this.options.showItem});

} else {
navWrap.setStyles ({‘width’:this.options.itemWidth*this.options.showItem, ‘height’:this.options.itemHeight});
}
var thumbs_thumbs = this.el.getElement(‘.ja-slide-thumbs’);
thumbs_thumbs.setStyle(‘left’,0);
thumbs_thumbs.getChildren().setStyles ({‘width’:this.options.itemWidth, ‘height’:this.options.itemHeight});
var thumbs_handles = this.el.getElement(‘.ja-slide-thumbs-handles’);
thumbs_handles.setStyle(‘left’,0);
thumbs_handles.getChildren().setStyles ({‘width’:this.options.itemWidth, ‘height’:this.options.itemHeight});

var thumbsFx_thumbs = new Fx.Style(thumbs_thumbs,modes[0],this.fxOptions);
var thumbsFx_handles= new Fx.Style(thumbs_handles,modes[0],this.fxOptions);

this.el.getElement(‘.ja-slide-thumbs-mask-left’).setStyles ({‘height’:this.options.itemHeight,’width’:2000,’opacity’:this.options.thumbOpacity});
this.el.getElement(‘.ja-slide-thumbs-mask-right’).setStyles ({‘height’:this.options.itemHeight,’width’:2000,’opacity’:this.options.thumbOpacity});
this.el.getElement(‘.ja-slide-thumbs-mask-center’).setStyles ({‘height’:this.options.itemHeight,’width’:this.options.itemWidth,’opacity’:this.options.thumbOpacity});
var tmp = this.el.getElement(‘.ja-slide-thumbs-mask’);
var thumbs_mask = tmp.setStyles ( {‘width’:5000} );

tmp.setStyle(modes[0], this.options.startItem*this.options.itemHeight-2000 );

//var thumbs_mask = this.el.getElement(‘.ja-slide-thumbs-mask’).setStyle(‘left’,(this.options.startItem*this.options.itemWidth-this.options.maskPos)+’px’).setOpacity(this.options.thumbOpacity);

var thumbsFx_mask = new Fx.Style(thumbs_mask, modes[0],this.fxOptions);

}
// templ
var navItems=this.el.getElements (‘.ja-slide-thumb’);
//When slideshow animate
this.onWalk = function (currentIndex, hander ) {
if (this.options.navigation && thumbsFx_mask !=null ) {
if (currentIndex <= this.options.startItem || currentIndex – this.options.startItem >= this.options.showItem-1) {
this.options.startItem = currentIndex – this.options.showItem+2;
if (this.options.startItem < 0) this.options.startItem = 0;
if (this.options.startItem > this.els.length-this.options.showItem) this.options.startItem = this.els.length-this.options.showItem;
}
thumbsFx_mask.start((currentIndex – this.options.startItem)*this.options.itemHeight-2000);
thumbsFx_thumbs.start(-this.options.startItem*this.options.itemHeight);
thumbsFx_handles.start(-this.options.startItem*this.options.itemHeight);

if( $defined(hander) ){
thumbs_handles.getElements(‘span’).removeClass (‘active’);
hander.addClass(‘active’);
navItems.removeClass (‘active’);
navItems.addClass (‘active’);
}

}
if (this.options.descMode.test(/load/) && this.options.showDesc ){
this.hideDesc();
}
}

//Description
this.maskDesc = this.el.getElement (‘.’+this.options.maskDesc);

this.maskDesc.setStyles ({ ‘display’:’block’,
‘position’:’absolute’,
‘width’: this.options.maskWidth,
‘height’: this.options.maskHeigth
});

if ( this.options.showDesc ) {
if (this.options.animation.test (/move/) && this.options.overlap ) {
this.options.maskAlignment = ‘left’;
this.options.maskerTransStyle = ‘opacity’;
}
this.maskDesc.setStyle( this.options.maskAlignment, this.options.rearWidth+this.options.mainSpace );
this.maskDesc.setStyle( ‘opacity’, 0 );
if( this.options.maskerTransStyle == ‘opacity’ ){

this.descFx = new Fx.Style (this.maskDesc, ‘opacity’,{duration:400,transition:this.options.maskerTrans});

this.descs = this.el.getElements (‘.ja-slide-desc’);
this.showDesc = function() {
this.descFx.stop();
this.descFx.start(this.options.maskOpacity);
};
this.hideDesc = function () {
this.descFx.stop();
this.descFx.start(0.01);

};
} else {

sizeOff = this.options.maskAlignment == ‘top’ || this.options.maskAlignment==’bottom’?this.options.maskHeigth : this.options.maskWidth;

this.maskDesc.setStyle( ‘opacity’, this.options.maskOpacity );
this.maskDesc.setStyle( this.options.maskAlignment, -this.options.mainWidth );
this.descFx = new Fx.Style (this.maskDesc, this.options.maskAlignment,{duration:400,transition:this.options.maskerTrans});
this.descs = this.el.getElements (‘.ja-slide-desc’);
this.showDesc = function() {
this.descFx.stop();
this.descFx.start( 0 );
};
this.hideDesc = function () {
this.descFx.stop();
this.descFx.start( -sizeOff );

};
}

this.swapDesc = function (currentIndex) {
//console.log(‘swap ‘+currentIndex);
if (this.maskDesc.currentIndex == currentIndex) return;
if (this.maskDesc.desc) {
this.maskDesc.desc.remove();
this.maskDesc.desc = null;
this.maskDesc.setHTML(”);
}
if (this.descs && this.descs.innerHTML) this.maskDesc.desc = this.descs.inject (this.maskDesc);
this.maskDesc.currentIndex = currentIndex;
}

if (this.options.descMode.test(/mouseover/)){
var childs = this.el.getElements(‘.ja-slide-item’);
childs.each( function(itm, index){
itm.addEvent (‘mouseover’, this.showDesc.bind(this) );
itm.addEvent (‘mouseout’, this.hideDesc.bind(this));
}.bind(this) )
this.maskDesc.addEvent (‘mouseover’, this.showDesc.bind(this) );
this.maskDesc.addEvent (‘mouseout’, this.hideDesc.bind(this));
} else {
this.maskDesc.setStyle (‘opacity’, this.options.maskOpacity);
}
} else {
this.maskDesc.setStyle (‘opacity’, 0 );
}
this.fxOptions.onComplete = function() {
if (this.options.showDesc) {
this.swapDesc(this.hs.currentIndex);
if (this.options.descMode.test(/load/)){
this.showDesc();
}
}
}.bind(this);

if (this.options.urls) {
this.maskDesc.addEvent(‘click’, function () {
// URL
var url = this.options.urls;
if (url) {
var target = this.options.targets;
switch(target){
case “_blank”:{
window.open(url, “newWindow”);
break;
}
default:{
window.location.href = url;
break;
}
}
}
// Target of URL

}.bind(this));
}

this.hs = new JASlideshowThree({
box: this.el.getElement(‘.ja-slide-main’),
languageDirection:this.options.languageDirection,
items: this.els,
handlerBox:thumbs_handles,
handles: thumbs_handles?thumbs_handles.getChildren():[],
fxOptions: this.fxOptions,
interval: this.options.interval,
onWalk: this.onWalk.bind(this),
size: this.options.mainWidth + this.options.mainSpace,
animation: this.options.animation,
animationRepeat: this.options.animationRepeat,
buttons: {
previous: this.el.getElements(‘.ja-slide-prev’),
play: this.el.getElements(‘.ja-slide-play’),
stop: this.el.getElements(‘.ja-slide-stop’),
playback: this.el.getElements(‘.ja-slide-playback’),
next: this.el.getElements(‘.ja-slide-next’)
},
startItem: this.options.startItem,
offset: this.options.overlap?this.options.rearWidth-this.options.mainWidth:0,
autoPlay: this.options.autoPlay
});

//Case xxxx
if(this.options.overlap){
var childs = this.hs.box.getChildren();
childs[0].clone().inject(this.hs.box);
childs.clone().injectTop(this.hs.box);
this.hs.box.setStyle(this.hs.modes[1],(this.hs.options.size*(this.hs.items.length+2)+200)+’px’);
}
this.el.setStyle(‘visibility’, ‘visible’);
},

getFxObjectByMode: function( mode, start, end ){

switch( mode ){
case ‘sideright’ : return { ‘left’: } ; break;
case ‘sideleft’ : return { ‘left’: } ; break;
case ‘sidetop’ : return { ‘top’: } ; break;
case ‘sidedown’ : return { ‘top’: } ; break;
case ‘botleft’ : return { ‘top’: start , ‘left’: end } ; break;
default: return { ‘height’: }; break;
}
},
controlMark:function(){

}
});

you can update the above code for the the modules/mod_jaslideshow2/module/assets/script.js on yours

GOod luck

[Author]

Posts