Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,994
    Thanks
    4
    Thanked 2,662 Times in 2,631 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript frameworks forum.

    In the future, please wrap your code in [code][/code] tags to preserve formatting.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 
    Been gone for a few months, and haven't programmed in that long of a time. Meh, I'll wing it ;)


  •  

    Posting Permissions

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