Vraag & Antwoord

Webprogrammeren & scripting

javascript werkt in FF goed in IE niet

1 antwoord
  • Hoi, Voor een gallery gebruik ik deze twee javascript bestanden. playercom.js [code:1:c6535ce4f1] $j(document).ready(function(){ $j('#gallerySel').change(changeGal); $j('#gallerySortSel').change(changeGal); }); function changeGal(){ //get and parse the url var p = new Poly9.URLParser(window.location.href); var queryString = ''; if(p.getQuerystring() != ''){ queryString = '?' + p.getQuerystring(); } var selection = $j('#gallerySel').val(); if(selection == null){ selection = firstGallery; } var order = $j('#gallerySortSel').val(); //true when no order drop down menu displayed if(order == null){ order = defaultOrder; } $j.post(getPly1URL,{'tt_content': tt_content,'selection': selection,'order': order,'pathName': p.getPathname() + queryString,'eco_gal':eco_gal},setPly1); // desctruct the old galley player $j('#eco-gal-ply1').empty(); $j('#waitChangeGal').removeClass('hidden'); } function setPly1(data){ //reset some global variables imageGalleryCaptions = new Array(); imgLastNo = -1; imgNo = 1; doTranslate = false; // rebuild the new gallery player $j('#eco-gal-ply1').html(data); $j('#theImages a').click(showPreview); initSlideShow(); // hide the loading message $j('#waitChangeGal').addClass('hidden'); } [/code:1:c6535ce4f1] en playervieuw.js [code:1:c6535ce4f1] /* Copyright (c) 2007 - Fabien Udriot fabien.udriot (at) ecodev.ch - script improvement : * navigation in the gallery with right left arrow. * colored thumbnail background * jquery + typo3 integration * cross browser improvement * other miscellaneous improvements... Original script gallery : Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com Get this and other scripts at www.dhtmlgoodies.com You can use this script freely as long as this copyright message is kept intact. */ var imageGalleryLeftPos = false; var imageGalleryWidth = false; var imageGalleryObj = false; var maxGalleryXPos = false; var slideSpeed = 0; var imgPadding = 3; var imageGalleryCaptions = new Array(); //variable added by Fabien 23.09.06 var imgLastNo = -1; var imgNo = 1; var speed = 20; var slideOrigin = 39 // the slide show origin var limit = 0 + slideOrigin; // == the slide width var doTranslate = false; var $j = jQuery.noConflict(); // slideWidth = {SLIDE_WIDTH} // the slide width // imagePath = {PATH} defined in the html page $j(document).ready(function() { $j('#theImages a').click(showPreview); if($j('#theImages').size() > 0){ //init the first time only if it is the player alone initSlideShow(); } $j(document).keyup(keyNavigation); }); function keyNavigation(e){ var keycode = e.keyCode; if(keycode == 39){ //right if(imgNo < galleryImgs.length){ showPreview($j('#theImages a:eq('+ imgNo +')'),true); } } else if(keycode == 37){ //left if((imgNo -2) >= 0){ showPreview($j('#theImages a:eq('+ (imgNo - 2) +')'),true); } } } /** * When the mouse goes OVER a ARROW */ function overSlide(){ if(this.id == 'arrow_left'){ var side = 'left-'; } else{ var side = 'right-'; } var arrow = 'arr-' + side + thumbSize if($j.browser.msie){ $j('#'+arrow).attr("src",imagePath + arrow + '-over.gif'); } else{ $j('#'+arrow).attr("src",imagePath + arrow + '-over.png'); } } /** * When the mouse goes OUT a ARROW */ function outSlide(){ if(this.id == 'arrow_left'){ var side = 'left-'; } else{ var side = 'right-'; } var arrow = 'arr-' + side + thumbSize if($j.browser.msie){ $j('#'+arrow).attr("src",imagePath + arrow + '.gif'); } else{ $j('#'+arrow).attr("src",imagePath + arrow + '.png'); } } /** * When the user clicks on the slider right or left * @param {Object} e */ function startSlide(e){ doTranslate = true; if(document.all)e = event; var id = this.id; if(this.id=='arrow_right'){ var direction = 'right'; var stopPosition = imageGalleryObj.offsetLeft - slideWidth; } else{ var direction = 'left'; var stopPosition = imageGalleryObj.offsetLeft + slideWidth; } translate(stopPosition,direction); //tells the limit } /** * When the mouse is OVER a THUMBNAIL * @param {Object} e */ function showImage(){ if($j.browser.msie){ this.style.filter = 'alpha(opacity=99)'; } else{ $j(this).attr('style','opacity:0.99'); } } /** * When the mouse goes OUT a THUMBNAIL * @param {Object} e */ function releaseImage(){ $j(this).removeAttr('style'); } /* TRANSLATE THE THUMBNAIL */ function translate(stopPosition,direction){ //wait one click before going forward if(doTranslate){ var increment = speed; if(direction == 'right') //change the direction increment = -increment; var leftPos = imageGalleryObj.offsetLeft/1 + increment; //new position if(maxGalleryXPos >= leftPos && minGalleryXPos <= leftPos){ //check the end of the gallery imageGalleryObj.style.left = leftPos + 'px'; //stop recursive condition if(direction == 'right'){ if(stopPosition < imageGalleryObj.offsetLeft){ setTimeout("translate("+ stopPosition +",'"+ direction +"')",20); } } else{ if(stopPosition > imageGalleryObj.offsetLeft){ setTimeout("translate("+ stopPosition +",'"+ direction +"')",20); } } } } else{ doTranslate = true; } } /* MAIN METHOD */ function initSlideShow(){ $j('#arrow_left').mouseover(overSlide); $j('#arrow_left').click(startSlide); $j('#arrow_left').mouseout(outSlide); $j('#arrow_right').mouseover(overSlide); $j('#arrow_right').click(startSlide); $j('#arrow_right').mouseout(outSlide); $j('#theImages img').mouseout(releaseImage); imageGalleryObj = document.getElementById('theImages'); imageGalleryLeftPos = imageGalleryObj.offsetLeft; imageGalleryWidth = $j('#galleryContainer').get(0).offsetWidth - 80; maxGalleryXPos = imageGalleryObj.offsetLeft minGalleryXPos = imageGalleryWidth - $j('#slideEnd').get(0).offsetLeft $j('#theImages IMG').mouseover(showImage); //over a thumbnail $j('#theImages IMG').mousemove(showImage); //prepare the image caption var divs = $j('#theImages .imageCaption'); for(var no=0;no<divs.size();no++){ imageGalleryCaptions[no] = $j(divs).get(no).innerHTML; } echo('Gallery express inited'); } function showPreview(el,keyEvent){ if(typeof(keyEvent) == 'undefined'){ el = this; } $j('#theImages a').removeClass('selected'); $j(el).addClass('selected'); // make a nice colored background var uid = $j(el).find('IMG').attr('id'); //the id looks like thumbNo[0-9] imgNo = uid.substr(7,uid.length) - 0; //extract the last numero //do something ONLY if it is NOT the same picture if(imgLastNo != imgNo){ var imgElWidth = $j(el).find('IMG').attr('width') - 0; //correct the padding. IE is too stupid !! if(!$j.browser.msie){ imgElWidth += imgPadding; } else{ imgElWidth += imgPadding - 8; //TODO : check this value } if(imgLastNo < imgNo){ //avoid a second click on the same image var direction = 'right'; var stopPosition = imageGalleryObj.offsetLeft - imgElWidth; } else{ var direction = 'left'; var stopPosition = imageGalleryObj.offsetLeft + imgElWidth; } translate(stopPosition,direction); //tells the limit //for the firstImage don't move the slider if(imgNo == 1 && direction == 'left') { setTimeout('doTranslate = false;',500); } imgLastNo = imgNo; $j('#waitMessage').removeClass('hidden'); var img = $j('#previewPane IMG:eq(0)'); //take the first which is the gallery image, the second is the loading... var curImg = getCurImg(imgNo) $j(img).bind('load',{uid:curImg},hideWaitMessageAndShowCaption) //reslve a SAFARI bug. (for the last image which the same) if($j(img).attr('src') == galleryImgs[curImg]){ $j(img).attr('src',''); } $j(img).attr('src',galleryImgs[curImg]); } return false; } /* hide the wait message */ function hideWaitMessageAndShowCaption(e){ $j('#waitMessage').addClass('hidden'); $j('#largeImageCaption').html(imageGalleryCaptions[e.data.uid]); $j('#imageSrc').attr('href',originalImgs[e.data.uid]); } /** * return the real image to display. Handle the last image exception */ function getCurImg(imgNo){ if(typeof(galleryImgs[imgNo]) != 'undefined'){ //check if there is one more image OR if it is the last image var curImg = imgNo - 1; } else{ var curImg = imgNo-2; } return curImg; } /* UTIL */ function echo(data){ try{ dump(data+"\n"); console.log(data); } catch(e){ e = null; } } /* URL PARSER */ if (typeof Poly9 == 'undefined') var Poly9 = {}; Poly9.URLParser = function(url) { this._fields = {'Username' : 4, 'Password' : 5, 'Port' : 7, 'Protocol' : 2, 'Host' : 6, 'Pathname' : 8, 'URL' : 0, 'Querystring' : 9, 'Fragment' : 10}; this._values = {}; this._regex = null; this.version = 0.1; this._regex = /^((\w+):\/\/)?((\w+):?(\w+)?@)?([^\/\?:]+):?(\d+)?(\/?[^\?#]+)?\??([^#]+)?#?(\w*)/; for(var f in this._fields) this['get' + f] = this._makeGetter(f); if (typeof url != 'undefined') this._parse(url); } Poly9.URLParser.prototype.setURL = function(url) { this._parse(url); } Poly9.URLParser.prototype._initValues = function() { for(var f in this._fields) this._values[f] = ''; } Poly9.URLParser.prototype._parse = function(url) { this._initValues(); var r = this._regex.exec(url); if (!r) throw "DPURLParser::_parse -> Invalid URL" for(var f in this._fields) if (typeof r[this._fields[f]] != 'undefined') this._values[f] = r[this._fields[f]]; } Poly9.URLParser.prototype._makeGetter = function(field) { return function() { return this._values[field]; } } [/code:1:c6535ce4f1] Het resultaat van de gehele code kun je zien op : http://www.tamarawobben.nl/index.php?id=21 Als ik nu in IE 6 de bovenste box verander van ascending naar descending en je kiest dan een thumbnail dan wordt de verkeerde plaatje getoond. In FF 2 werkt het wel. Kan iemand me een tip geven waaraan dit ligt ? Groetjes, Roelof

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.