SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast freelancekaleem's Avatar
    Join Date
    Dec 2010
    Location
    Pakistan
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery Gallery Script alpha problem

    Hi,
    I have develop a jquery image gallery with text description , image and other thing and its live know. you can check the live gallery Executed for Makkah !
    But i am facing some problem in JavaScript coding as i am not a expert init.
    If you click on any image you can see that new information appear with some effect like fade in or fade out.
    Which gives very bad impression to my client. I want to remove that effect and want to appear the text immediately without any effect.
    I am placing the code below and also highlighted the area which control that effect and try myself to edit that one can't able to get the results that i want.

    Any one plz help me to solve this problem.

    if(!window.DG) {
    window.DG = {};
    }



    DG.ImageGallery = new Class({
    Extends: Events,


    autoplay : {
    buttons : {
    start : {
    txt : '',
    enabled : true
    },
    stop : {
    txt : '',
    enabled : true
    }
    },
    enabled : true,
    pause : 3,
    timestampLastIteration : 0
    },

    preload : true,


    thumbs : {
    width : 0, /* Measured automatically */
    height : 0,
    noThumbsInView : 0
    },

    images : [],
    dom : {
    el : null,
    thumbnailContainerParent : null,
    thumbnailContainer : null,
    enlargedImage : null,
    enlargedImages : {},
    activeEnlargedImage : {
    id : null,
    image : null,
    caption : null
    },
    autoplay : {
    start : null,
    stop : null
    }

    },

    currentZIndex : 0,

    initialize : function(config) {
    if(config.preload !== undefined){
    this.preload = config.preload;
    }
    if(config.autoplay !== undefined) {
    if (config.autoplay.enabled !== undefined) {
    this.autoplay.enabled = config.autoplay.enabled;
    }
    if(config.autoplay.pause){
    this.autoplay.pause = config.autoplay.pause;
    }
    if(config.autoplay.buttons) {
    if(config.autoplay.buttons.start){
    if(config.autoplay.buttons.start.txt){
    this.autoplay.buttons.start.txt = config.autoplay.buttons.start.txt;
    }
    if(config.autoplay.buttons.start.enabled !== undefined){
    this.autoplay.buttons.start.enabled = config.autoplay.buttons.start.enabled;
    }
    if(config.autoplay.buttons.stop.txt){
    this.autoplay.buttons.stop.txt = config.autoplay.buttons.stop.txt;
    }
    if(config.autoplay.buttons.stop.enabled !== undefined){
    this.autoplay.buttons.stop.enabled = config.autoplay.buttons.stop.enabled;
    }
    }

    }
    }

    this.dom.el = config.el;


    this.getImages();


    if(this.preload){
    this.preloadImages();
    }
    this.storeThumbnailSize();
    this.createDomElements();
    this.storeNumberOfThumbnailsInView();
    this.selectImage(this.images[0].id);

    if (this.autoplay.enabled) {
    this.updateAutoplayTimestamp();
    this.startAutoPlay();
    }
    this.doAutoPlay.delay(200, this);


    },

    preloadImages : function() {

    var countImages = this.images.length;
    var images = [];
    var i=0;
    for(i=0;i<countImages;i++){
    images.push(this.images[i].src);
    }
    Asset.images(images);
    },
    startAutoPlay : function() {
    this.autoplay.enabled = true;
    if(this.dom.autoplay.start){
    this.dom.autoplay.start.addClass('dg-image-gallery-next-autoplay-start-off');
    }
    if(this.dom.autoplay.stop){
    this.dom.autoplay.stop.removeClass('dg-image-gallery-next-autoplay-stop-off');
    }
    },
    stopAutoPlay : function() {
    this.autoplay.enabled = false;
    if(this.dom.autoplay.start){
    this.dom.autoplay.start.removeClass('dg-image-gallery-next-autoplay-start-off');
    }
    if(this.dom.autoplay.stop){
    this.dom.autoplay.stop.addClass('dg-image-gallery-next-autoplay-stop-off');
    }
    },
    doAutoPlay : function() {
    var d = new Date();
    if(this.autoplay.enabled && this.isReadyToContinueAutoplay()){
    var index = this.getCurrentIndex();
    index++;
    if(index === this.images.length){
    index = 0;
    }
    this.selectImage(this.images[index].id);
    }

    this.doAutoPlay.delay(200, this);
    },

    isReadyToContinueAutoplay : function() {
    var d = new Date();
    var timestamp = d.getTime();

    if(timestamp - this.autoplay.timestampLastIteration >= this.autoplay.pause * 1000){
    this.updateAutoplayTimestamp();
    return true;
    }
    return false;
    },
    updateAutoplayTimestamp : function() {
    var d = new Date();
    var timestamp = d.getTime();
    this.autoplay.timestampLastIteration = timestamp;
    },
    storeThumbnailSize : function() {
    var el = new Element('div');

    el.setStyles({
    'position' : 'absolute',
    'visibility' : 'hidden'
    });
    $(document.body).adopt(el);
    el.addClass('dg-image-gallery-thumbnail');

    var widthProperties = ['width','margin-left','margin-right','padding-left','padding-right','border-left-width','border-right-width'];
    for(i=0;i<widthProperties.length;i++){
    this.thumbs.width += el.getStyle(widthProperties[i]).replace('px','') / 1;
    }

    var heightProperties = ['height','margin-top','margin-bottom','padding-top','padding-bottom','border-top-width','border-bottom-width'];
    for(i=0;i<heightProperties.length;i++){
    this.thumbs.height+= el.getStyle(heightProperties[i]).replace('px','')/1;
    }
    el.destroy();
    },

    storeNumberOfThumbnailsInView : function() {
    this.thumbs.noThumbsInView = Math.round(this.dom.thumbnailContainerParent.getStyle('width').replace('px','') / this.thumbs.width);
    },
    createDomElements : function() {
    this.createDomForThumbnails();
    this.createDomForThumbnailHighlight();
    this.createDomForArrows();
    this.createDomForAutoplay();

    },

    createDomForAutoplay : function() {
    if (this.autoplay.buttons.start.enabled || this.autoplay.buttons.stop.enabled) {
    var autoPlayParent = new Element('div');
    autoPlayParent.addClass('dg-image-gallery-next-autoplay-container');
    $(this.dom.el).adopt(autoPlayParent);
    }

    if(this.autoplay.buttons.start.enabled){
    var el = this.dom.autoplay.start = new Element('div');
    el.addClass('dg-image-gallery-next-autoplay-start');
    el.addEvent('click', this.startAutoPlay.bind(this));
    el.set('html', this.autoplay.buttons.start.txt);
    autoPlayParent.adopt(el);
    }
    if(this.autoplay.buttons.stop.enabled){
    el = this.dom.autoplay.stop = new Element('div');
    el.addClass('dg-image-gallery-next-autoplay-stop');
    el.addEvent('click', this.stopAutoPlay.bind(this));
    el.set('html', this.autoplay.buttons.stop.txt);
    autoPlayParent.adopt(el);
    }

    },

    createDomForThumbnails : function() {
    var el = this.dom.thumbnailContainerParent = new Element('div');
    el.addClass('dg-image-gallery-thumbnail-container');
    el.setStyles({
    height : this.thumbs.height,
    overflow : 'hidden'
    });
    $(this.dom.el).adopt(el);

    this.dom.thumbnailContainer = new Element('div');
    this.dom.thumbnailContainer.setStyles({
    height: this.thumbs.height,
    position : 'absolute',
    left:'0px',
    top : '0px',
    width : (this.images.length * this.thumbs.width)
    });

    el.adopt(this.dom.thumbnailContainer);

    this.currentLeft = 0;
    Array.each(this.images, function(image){
    var div = new Element('div');

    div.addClass('dg-image-gallery-thumbnail');
    div.setProperty('id', image.id);
    div.setStyles({
    'background-repeat' : 'no-repeat',
    'background-position' : 'center center',
    'background-image' : 'url(' + image.thumb + ')',
    'position' : 'absolute',
    'left' : this.currentLeft,
    'cursor' : 'pointer'
    });
    this.currentLeft += this.thumbs.width;
    div.addEvent('click', this.clickOnThumbnail.bind(this));
    this.dom.thumbnailContainer.adopt(div);
    }, this);
    },

    createDomForThumbnailHighlight : function() {
    var el = this.dom.thumbnailHighlight = new Element('div');
    el.addClass('dg-image-gallery-thumbnail-highlight');
    $(this.dom.thumbnailContainerParent).adopt(el);
    el.setStyles({
    width : this.thumbs.width
    - el.getStyle('border-left-width').replace('px','')
    - el.getStyle('border-right-width').replace('px','')
    - el.getStyle('padding-left').replace('px','')
    - el.getStyle('padding-right').replace('px','')
    - el.getStyle('margin-left').replace('px','')
    - el.getStyle('margin-right').replace('px','')
    ,
    height : this.thumbs.height
    - el.getStyle('border-top-width').replace('px','')
    - el.getStyle('border-bottom-width').replace('px','')
    - el.getStyle('padding-top').replace('px','')
    - el.getStyle('padding-bottom').replace('px','')
    - el.getStyle('margin-top').replace('px','')
    - el.getStyle('margin-bottom').replace('px','')
    ,
    left : '0px',
    'z-index' : 100,
    position : 'absolute'
    });
    },

    createDomForArrows : function() {
    var el = this.dom.arrowLeft = new Element('div');
    el.addClass('dg-image-gallery-previous');
    el.setStyles({
    'background-repeat' : 'no-repeat'
    });
    el.addEvent('click', this.previous.bind(this));
    el.addEvent('mouseover', this.arrowOn.bind(this));
    el.addEvent('mouseout', this.arrowOff.bind(this));
    $(this.dom.el).adopt(el);

    var el = this.dom.arrowRight = new Element('div');
    el.addClass('dg-image-gallery-next');
    el.setStyles({
    'background-repeat' : 'no-repeat'
    });

    el.addEvent('mouseover', this.arrowOn.bind(this));
    el.addEvent('mouseout', this.arrowOff.bind(this));
    el.addEvent('click', this.next.bind(this));
    $(this.dom.el).adopt(el);
    },
    arrowOn : function(e) {
    e.target.addClass(e.target.className.trim() + '-over');


    },
    arrowOff : function(e) {
    e.target.removeClass('dg-image-gallery-previous-over');
    e.target.removeClass('dg-image-gallery-next-over');


    },

    previous : function() {
    this.updateAutoplayTimestamp();
    var index = Math.max(0, this.getCurrentIndex()-1);
    this.selectImage(this.getIdByIndex(index));
    },
    next : function() {
    this.updateAutoplayTimestamp();
    var index = Math.min(this.images.length-1, this.getCurrentIndex()+1);
    this.selectImage(this.getIdByIndex(index));
    },
    getIdByIndex : function(index) {
    return this.images[index].id;
    },
    clickOnThumbnail : function(e){
    this.updateAutoplayTimestamp();
    var id = e.target.id;
    this.selectImage(id);
    },

    getCurrentIndex : function() {
    return this.dom.activeEnlargedImage.index;
    },

    selectImage : function(id) {

    if(id == this.dom.activeEnlargedImage.id){
    return;
    }
    var imageData = this.getImageDataById(id);

    if(!this.dom.enlargedImages[id]) {
    this.dom.enlargedImages[id] = {};
    var el = this.dom.enlargedImages[id].image = new Element('div');
    el.addClass('dg-image-gallery-enlarged-image');
    $(this.dom.el).adopt(el);
    el.setStyles({
    'background-image' : 'url(' + imageData.src + ')',
    'background-repeat' : 'no-repeat',
    'opacity' : 0,
    'filter' : 'alpha(opacity=0)
    '
    });

    var el = this.dom.enlargedImages[id].caption = new Element('div');
    el.addClass('dg-image-gallery-caption');
    el.setStyles({
    'opacity' : 0,
    'filter' : 'alpha(opacity=0)'

    });
    el.set('html', imageData.caption);
    $(this.dom.el).adopt(el);
    }

    if(this.dom.activeEnlargedImage.id) {
    this.dom.activeEnlargedImage.image.fade('out');
    this.dom.activeEnlargedImage.caption.fade('out');
    }
    this.currentZIndex ++;
    this.dom.enlargedImages[id].image.setStyle('z-index', this.currentZIndex);
    this.dom.enlargedImages[id].caption.setStyle('z-index', this.currentZIndex);
    this.dom.enlargedImages[id].image.fade('in');
    this.dom.enlargedImages[id].caption.fade('in');
    this.dom.activeEnlargedImage = {
    index : imageData.index,
    id : id,
    image : this.dom.enlargedImages[id].image,
    caption : this.dom.enlargedImages[id].caption
    }
    this.highlightAndMoveThumbnailIntoView();
    },
    getIndexPositionOfHighlightDiv : function() {
    var posHighlight = $(this.dom.thumbnailHighlight).getStyle('left').replace('px', '') / 1;
    return Math.round(posHighlight / this.thumbs.width);
    },
    getIndexPositionOfActiveThumbnail : function() {
    var pos = $(this.dom.activeEnlargedImage.id).getStyle('left').replace('px','') / 1 + this.dom.thumbnailContainer.getStyle('left').replace('px','') / 1;
    return Math.round(pos / this.thumbs.width);
    },
    highlightAndMoveThumbnailIntoView : function() {

    var indexHighlight = this.getIndexPositionOfHighlightDiv();
    var indexThumb = this.getIndexPositionOfActiveThumbnail();

    var newPosStrip = this.dom.thumbnailContainer.getStyle('left');
    var newPosHighlight = indexThumb * this.thumbs.width;;

    if (this.isLocatedAtFirstImageInSlideshow()){
    newIndexHighlight = 0;
    }else if(this.isLocatedAtLastImageInSlideshow()){
    newIndexHighlight = Math.min(this.thumbs.noThumbsInView-1, this.images.length-1);
    }
    else if(this.isLocatedAtLastThumbnailInView()) {
    newIndexHighlight = indexThumb-1;
    }
    else if(this.isLocatedAtFirstThumbnailInView()){
    newIndexHighlight = 1;
    }
    else {
    newIndexHighlight = indexThumb;

    }

    newPosHighlight = newIndexHighlight * this.thumbs.width;
    newPosStrip = (0 - this.getCurrentIndex() + newIndexHighlight) * this.thumbs.width

    var myFx = new Fx.Tween(this.dom.thumbnailHighlight);
    myFx.start('left', this.dom.thumbnailHighlight.getStyle('left') , newPosHighlight);

    var myFx = new Fx.Tween(this.dom.thumbnailContainer);
    myFx.start('left',this.dom.thumbnailContainer.getStyle('left') , newPosStrip);

    },
    isLocatedAtFirstThumbnailInView : function() {
    return this.getIndexPositionOfActiveThumbnail() == 0;
    },
    isLocatedAtLastThumbnailInView : function() {
    return this.getIndexPositionOfActiveThumbnail() == this.thumbs.noThumbsInView-1;
    },
    isLocatedAtFirstImageInSlideshow : function() {
    return this.getCurrentIndex() == 0;
    },
    isLocatedAtLastImageInSlideshow : function() {
    return this.getCurrentIndex() == this.images.length-1;
    },
    getImageDataById : function(id) {
    var countImages = this.images.length;

    for(var i=0;i<countImages;i++){

    if(this.images[i].id == id){
    return this.images[i];
    }
    }

    },

    getImages : function() {
    var imageObjects = $$('.dg-image-gallery-image');
    var countImages = imageObjects.length;

    for(var i=0;i<countImages;i++) {
    var img = imageObjects[i];
    var id = this.getUniqueId();
    this.images.push({
    index : i,
    id : id,
    thumb : img.getElements('img')[0].src,
    caption: img.getElements('.dg-image-gallery-caption')[0].get('html').trim(),
    capti: img.getElements('.dg-image-gallery-large-image-path')[0].get('html').trim()

    });

    img.setStyle('display','none');
    }

    },
    getUniqueId : function() {
    var ret = 'unique' + Math.random() + + Math.random();
    ret = ret.replace('.','');
    return ret;

    }



    });

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code is unreadable the way you've posted it, next time make sure it's formatted and within HIGHLIGHT blocks.

    Here is your code again but formatted, I'll take a look now if I can fix your problem.

    Code JavaScript:
    if (!window.DG) {
        window.DG = {};
    }
     
     
     
    DG.ImageGallery = new Class({
        Extends: Events,
     
     
        autoplay: {
            buttons: {
                start: {
                    txt: '',
                    enabled: true
                },
                stop: {
                    txt: '',
                    enabled: true
                }
            },
            enabled: true,
            pause: 3,
            timestampLastIteration: 0
        },
     
        preload: true,
     
     
        thumbs: {
            width: 0,
            /* Measured automatically */
            height: 0,
            noThumbsInView: 0
        },
     
        images: [],
        dom: {
            el: null,
            thumbnailContainerParent: null,
            thumbnailContainer: null,
            enlargedImage: null,
            enlargedImages: {},
            activeEnlargedImage: {
                id: null,
                image: null,
                caption: null
            },
            autoplay: {
                start: null,
                stop: null
            }
     
        },
     
        currentZIndex: 0,
     
        initialize: function (config) {
            if (config.preload !== undefined) {
                this.preload = config.preload;
            }
            if (config.autoplay !== undefined) {
                if (config.autoplay.enabled !== undefined) {
                    this.autoplay.enabled = config.autoplay.enabled;
                }
                if (config.autoplay.pause) {
                    this.autoplay.pause = config.autoplay.pause;
                }
                if (config.autoplay.buttons) {
                    if (config.autoplay.buttons.start) {
                        if (config.autoplay.buttons.start.txt) {
                            this.autoplay.buttons.start.txt = config.autoplay.buttons.start.txt;
                        }
                        if (config.autoplay.buttons.start.enabled !== undefined) {
                            this.autoplay.buttons.start.enabled = config.autoplay.buttons.start.enabled;
                        }
                        if (config.autoplay.buttons.stop.txt) {
                            this.autoplay.buttons.stop.txt = config.autoplay.buttons.stop.txt;
                        }
                        if (config.autoplay.buttons.stop.enabled !== undefined) {
                            this.autoplay.buttons.stop.enabled = config.autoplay.buttons.stop.enabled;
                        }
                    }
     
                }
            }
     
            this.dom.el = config.el;
     
     
            this.getImages();
     
     
            if (this.preload) {
                this.preloadImages();
            }
            this.storeThumbnailSize();
            this.createDomElements();
            this.storeNumberOfThumbnailsInView();
            this.selectImage(this.images[0].id);
     
            if (this.autoplay.enabled) {
                this.updateAutoplayTimestamp();
                this.startAutoPlay();
            }
            this.doAutoPlay.delay(200, this);
     
     
        },
     
        preloadImages: function () {
     
            var countImages = this.images.length;
            var images = [];
            var i = 0;
            for (i = 0; i < countImages; i++) {
                images.push(this.images[i].src);
            }
            Asset.images(images);
        },
        startAutoPlay: function () {
            this.autoplay.enabled = true;
            if (this.dom.autoplay.start) {
                this.dom.autoplay.start.addClass('dg-image-gallery-next-autoplay-start-off');
            }
            if (this.dom.autoplay.stop) {
                this.dom.autoplay.stop.removeClass('dg-image-gallery-next-autoplay-stop-off');
            }
        },
        stopAutoPlay: function () {
            this.autoplay.enabled = false;
            if (this.dom.autoplay.start) {
                this.dom.autoplay.start.removeClass('dg-image-gallery-next-autoplay-start-off');
            }
            if (this.dom.autoplay.stop) {
                this.dom.autoplay.stop.addClass('dg-image-gallery-next-autoplay-stop-off');
            }
        },
        doAutoPlay: function () {
            var d = new Date();
            if (this.autoplay.enabled && this.isReadyToContinueAutoplay()) {
                var index = this.getCurrentIndex();
                index++;
                if (index === this.images.length) {
                    index = 0;
                }
                this.selectImage(this.images[index].id);
            }
     
            this.doAutoPlay.delay(200, this);
        },
     
        isReadyToContinueAutoplay: function () {
            var d = new Date();
            var timestamp = d.getTime();
     
            if (timestamp - this.autoplay.timestampLastIteration >= this.autoplay.pause * 1000) {
                this.updateAutoplayTimestamp();
                return true;
            }
            return false;
        },
        updateAutoplayTimestamp: function () {
            var d = new Date();
            var timestamp = d.getTime();
            this.autoplay.timestampLastIteration = timestamp;
        },
        storeThumbnailSize: function () {
            var el = new Element('div');
     
            el.setStyles({
                'position': 'absolute',
                'visibility': 'hidden'
            });
            $(document.body).adopt(el);
            el.addClass('dg-image-gallery-thumbnail');
     
            var widthProperties = ['width', 'margin-left', 'margin-right', 'padding-left', 'padding-right', 'border-left-width', 'border-right-width'];
            for (i = 0; i < widthProperties.length; i++) {
                this.thumbs.width += el.getStyle(widthProperties[i]).replace('px', '') / 1;
            }
     
            var heightProperties = ['height', 'margin-top', 'margin-bottom', 'padding-top', 'padding-bottom', 'border-top-width', 'border-bottom-width'];
            for (i = 0; i < heightProperties.length; i++) {
                this.thumbs.height += el.getStyle(heightProperties[i]).replace('px', '') / 1;
            }
            el.destroy();
        },
     
        storeNumberOfThumbnailsInView: function () {
            this.thumbs.noThumbsInView = Math.round(this.dom.thumbnailContainerParent.getStyle('width').replace('px', '') / this.thumbs.width);
        },
        createDomElements: function () {
            this.createDomForThumbnails();
            this.createDomForThumbnailHighlight();
            this.createDomForArrows();
            this.createDomForAutoplay();
     
        },
     
        createDomForAutoplay: function () {
            if (this.autoplay.buttons.start.enabled || this.autoplay.buttons.stop.enabled) {
                var autoPlayParent = new Element('div');
                autoPlayParent.addClass('dg-image-gallery-next-autoplay-container');
                $(this.dom.el).adopt(autoPlayParent);
            }
     
            if (this.autoplay.buttons.start.enabled) {
                var el = this.dom.autoplay.start = new Element('div');
                el.addClass('dg-image-gallery-next-autoplay-start');
                el.addEvent('click', this.startAutoPlay.bind(this));
                el.set('html', this.autoplay.buttons.start.txt);
                autoPlayParent.adopt(el);
            }
            if (this.autoplay.buttons.stop.enabled) {
                el = this.dom.autoplay.stop = new Element('div');
                el.addClass('dg-image-gallery-next-autoplay-stop');
                el.addEvent('click', this.stopAutoPlay.bind(this));
                el.set('html', this.autoplay.buttons.stop.txt);
                autoPlayParent.adopt(el);
            }
     
        },
     
        createDomForThumbnails: function () {
            var el = this.dom.thumbnailContainerParent = new Element('div');
            el.addClass('dg-image-gallery-thumbnail-container');
            el.setStyles({
                height: this.thumbs.height,
                overflow: 'hidden'
            });
            $(this.dom.el).adopt(el);
     
            this.dom.thumbnailContainer = new Element('div');
            this.dom.thumbnailContainer.setStyles({
                height: this.thumbs.height,
                position: 'absolute',
                left: '0px',
                top: '0px',
                width: (this.images.length * this.thumbs.width)
            });
     
            el.adopt(this.dom.thumbnailContainer);
     
            this.currentLeft = 0;
            Array.each(this.images, function (image) {
                var div = new Element('div');
     
                div.addClass('dg-image-gallery-thumbnail');
                div.setProperty('id', image.id);
                div.setStyles({
                    'background-repeat': 'no-repeat',
                    'background-position': 'center center',
                    'background-image': 'url(' + image.thumb + ')',
                    'position': 'absolute',
                    'left': this.currentLeft,
                    'cursor': 'pointer'
                });
                this.currentLeft += this.thumbs.width;
                div.addEvent('click', this.clickOnThumbnail.bind(this));
                this.dom.thumbnailContainer.adopt(div);
            }, this);
        },
     
        createDomForThumbnailHighlight: function () {
            var el = this.dom.thumbnailHighlight = new Element('div');
            el.addClass('dg-image-gallery-thumbnail-highlight');
            $(this.dom.thumbnailContainerParent).adopt(el);
            el.setStyles({
                width: this.thumbs.width - el.getStyle('border-left-width').replace('px', '') - el.getStyle('border-right-width').replace('px', '') - el.getStyle('padding-left').replace('px', '') - el.getStyle('padding-right').replace('px', '') - el.getStyle('margin-left').replace('px', '') - el.getStyle('margin-right').replace('px', ''),
                height: this.thumbs.height - el.getStyle('border-top-width').replace('px', '') - el.getStyle('border-bottom-width').replace('px', '') - el.getStyle('padding-top').replace('px', '') - el.getStyle('padding-bottom').replace('px', '') - el.getStyle('margin-top').replace('px', '') - el.getStyle('margin-bottom').replace('px', ''),
                left: '0px',
                'z-index': 100,
                position: 'absolute'
            });
        },
     
        createDomForArrows: function () {
            var el = this.dom.arrowLeft = new Element('div');
            el.addClass('dg-image-gallery-previous');
            el.setStyles({
                'background-repeat': 'no-repeat'
            });
            el.addEvent('click', this.previous.bind(this));
            el.addEvent('mouseover', this.arrowOn.bind(this));
            el.addEvent('mouseout', this.arrowOff.bind(this));
            $(this.dom.el).adopt(el);
     
            var el = this.dom.arrowRight = new Element('div');
            el.addClass('dg-image-gallery-next');
            el.setStyles({
                'background-repeat': 'no-repeat'
            });
     
            el.addEvent('mouseover', this.arrowOn.bind(this));
            el.addEvent('mouseout', this.arrowOff.bind(this));
            el.addEvent('click', this.next.bind(this));
            $(this.dom.el).adopt(el);
        },
        arrowOn: function (e) {
            e.target.addClass(e.target.className.trim() + '-over');
     
     
        },
        arrowOff: function (e) {
            e.target.removeClass('dg-image-gallery-previous-over');
            e.target.removeClass('dg-image-gallery-next-over');
     
     
        },
     
        previous: function () {
            this.updateAutoplayTimestamp();
            var index = Math.max(0, this.getCurrentIndex() - 1);
            this.selectImage(this.getIdByIndex(index));
        },
        next: function () {
            this.updateAutoplayTimestamp();
            var index = Math.min(this.images.length - 1, this.getCurrentIndex() + 1);
            this.selectImage(this.getIdByIndex(index));
        },
        getIdByIndex: function (index) {
            return this.images[index].id;
        },
        clickOnThumbnail: function (e) {
            this.updateAutoplayTimestamp();
            var id = e.target.id;
            this.selectImage(id);
        },
     
        getCurrentIndex: function () {
            return this.dom.activeEnlargedImage.index;
        },
     
        selectImage: function (id) {
     
            if (id == this.dom.activeEnlargedImage.id) {
                return;
            }
            var imageData = this.getImageDataById(id);
     
            if (!this.dom.enlargedImages[id]) {
                this.dom.enlargedImages[id] = {};
                var el = this.dom.enlargedImages[id].image = new Element('div');
                el.addClass('dg-image-gallery-enlarged-image');
                $(this.dom.el).adopt(el);
                el.setStyles({
                    'background-image': 'url(' + imageData.src + ')',
                    'background-repeat': 'no-repeat',
                    'opacity': 0,
                    'filter': 'alpha(opacity=0)'
                });
     
                var el = this.dom.enlargedImages[id].caption = new Element('div');
                el.addClass('dg-image-gallery-caption');
                el.setStyles({
                    'opacity': 0,
                    'filter': 'alpha(opacity=0)'
                });
                el.set('html', imageData.caption);
                $(this.dom.el).adopt(el);
            }
     
            if (this.dom.activeEnlargedImage.id) {
                this.dom.activeEnlargedImage.image.fade('out');
                this.dom.activeEnlargedImage.caption.fade('out');
            }
            this.currentZIndex++;
            this.dom.enlargedImages[id].image.setStyle('z-index', this.currentZIndex);
            this.dom.enlargedImages[id].caption.setStyle('z-index', this.currentZIndex);
            this.dom.enlargedImages[id].image.fade('in');
            this.dom.enlargedImages[id].caption.fade('in');
            this.dom.activeEnlargedImage = {
                index: imageData.index,
                id: id,
                image: this.dom.enlargedImages[id].image,
                caption: this.dom.enlargedImages[id].caption
            }
            this.highlightAndMoveThumbnailIntoView();
        },
        getIndexPositionOfHighlightDiv: function () {
            var posHighlight = $(this.dom.thumbnailHighlight).getStyle('left').replace('px', '') / 1;
            return Math.round(posHighlight / this.thumbs.width);
        },
        getIndexPositionOfActiveThumbnail: function () {
            var pos = $(this.dom.activeEnlargedImage.id).getStyle('left').replace('px', '') / 1 + this.dom.thumbnailContainer.getStyle('left').replace('px', '') / 1;
            return Math.round(pos / this.thumbs.width);
        },
        highlightAndMoveThumbnailIntoView: function () {
     
            var indexHighlight = this.getIndexPositionOfHighlightDiv();
            var indexThumb = this.getIndexPositionOfActiveThumbnail();
     
            var newPosStrip = this.dom.thumbnailContainer.getStyle('left');
            var newPosHighlight = indexThumb * this.thumbs.width;;
     
            if (this.isLocatedAtFirstImageInSlideshow()) {
                newIndexHighlight = 0;
            } else if (this.isLocatedAtLastImageInSlideshow()) {
                newIndexHighlight = Math.min(this.thumbs.noThumbsInView - 1, this.images.length - 1);
            } else if (this.isLocatedAtLastThumbnailInView()) {
                newIndexHighlight = indexThumb - 1;
            } else if (this.isLocatedAtFirstThumbnailInView()) {
                newIndexHighlight = 1;
            } else {
                newIndexHighlight = indexThumb;
     
            }
     
            newPosHighlight = newIndexHighlight * this.thumbs.width;
            newPosStrip = (0 - this.getCurrentIndex() + newIndexHighlight) * this.thumbs.width
     
            var myFx = new Fx.Tween(this.dom.thumbnailHighlight);
            myFx.start('left', this.dom.thumbnailHighlight.getStyle('left'), newPosHighlight);
     
            var myFx = new Fx.Tween(this.dom.thumbnailContainer);
            myFx.start('left', this.dom.thumbnailContainer.getStyle('left'), newPosStrip);
     
        },
        isLocatedAtFirstThumbnailInView: function () {
            return this.getIndexPositionOfActiveThumbnail() == 0;
        },
        isLocatedAtLastThumbnailInView: function () {
            return this.getIndexPositionOfActiveThumbnail() == this.thumbs.noThumbsInView - 1;
        },
        isLocatedAtFirstImageInSlideshow: function () {
            return this.getCurrentIndex() == 0;
        },
        isLocatedAtLastImageInSlideshow: function () {
            return this.getCurrentIndex() == this.images.length - 1;
        },
        getImageDataById: function (id) {
            var countImages = this.images.length;
     
            for (var i = 0; i < countImages; i++) {
     
                if (this.images[i].id == id) {
                    return this.images[i];
                }
            }
     
        },
     
        getImages: function () {
            var imageObjects = $$('.dg-image-gallery-image');
            var countImages = imageObjects.length;
     
            for (var i = 0; i < countImages; i++) {
                var img = imageObjects[i];
                var id = this.getUniqueId();
                this.images.push({
                    index: i,
                    id: id,
                    thumb: img.getElements('img')[0].src,
                    caption: img.getElements('.dg-image-gallery-caption')[0].get('html').trim(),
                    capti: img.getElements('.dg-image-gallery-large-image-path')[0].get('html').trim()
     
                });
     
                img.setStyle('display', 'none');
            }
     
        },
        getUniqueId: function () {
            var ret = 'unique' + Math.random() + +Math.random();
            ret = ret.replace('.', '');
            return ret;
     
        }
     
     
     
    });

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  3. #3
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The "problem" seems to be at lines 365, 366, 371 and 372.
    Here, the fade() function from mootools is used.
    Try changing

    Code JavaScript:
    if (this.dom.activeEnlargedImage.id) {
                this.dom.activeEnlargedImage.image.fade('out');
                this.dom.activeEnlargedImage.caption.fade('out');
            }
            this.currentZIndex++;
            this.dom.enlargedImages[id].image.setStyle('z-index', this.currentZIndex);
            this.dom.enlargedImages[id].caption.setStyle('z-index', this.currentZIndex);
            this.dom.enlargedImages[id].image.fade('in');
            this.dom.enlargedImages[id].caption.fade('in');

    to

    Code JavaScript:
    if (this.dom.activeEnlargedImage.id) {
                this.dom.activeEnlargedImage.image.setStyle('visibility','hidden');
                this.dom.activeEnlargedImage.image.setStyle('opacity',0);
                this.dom.activeEnlargedImage.caption.setStyle('visibility','hidden');
                this.dom.activeEnlargedImage.caption.setStyle('opacity',0);
            }
            this.currentZIndex++;
            this.dom.enlargedImages[id].image.setStyle('z-index', this.currentZIndex);
            this.dom.enlargedImages[id].caption.setStyle('z-index', this.currentZIndex);
            this.dom.enlargedImages[id].image.setStyle('visibility','visible');
            this.dom.enlargedImages[id].image.setStyle('opacity',1);
            this.dom.enlargedImages[id].caption.setStyle('visibility','visible');
            this.dom.enlargedImages[id].caption.setStyle('opacity',1);

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  4. #4
    SitePoint Enthusiast freelancekaleem's Avatar
    Join Date
    Dec 2010
    Location
    Pakistan
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can i thanks to you Kokos. You have really done a great job for me and help in difficult times. my Dear Friend if you need any help from regarding web designing i will love to do it for you. You can contact me at: kuhashmi AT gmail DOT com.
    Once again my friend thanks for your help.
    GOD BLESS you

  5. #5
    SitePoint Enthusiast freelancekaleem's Avatar
    Join Date
    Dec 2010
    Location
    Pakistan
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also want to put mouse over effect on small image thumbnail. When some one mouse over the image text will appear on a specific location. I try many scripts but can't able to figure out the solutions. Can any body help me plzzz


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •