Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

javascript werkt in FF goed in IE niet

snowman2
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){
    /
    eset 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){ /
    ight
    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)
    /
    eslve 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+"
    ");
    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

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