jquery - image invisible after adding div -
i using imageflow making image slider. have added on click flip functionality images. problem want add div around images show description when add div around images becomes invisible. don't know how update js file .
please suggest,
/* imageflow constructor */ function imageflow () {
/* setting option defaults */ this.defaults = { animationspeed: 100, /* animation speed in ms */ aspectratio: 1.964, /* aspect ratio of imageflow container (width divided height) */ buttons: false, /* toggle navigation buttons */ captions: false, /* toggle captions */ circular: true, /* toggle circular rotation */ imagecursor: 'default', /* cursor type images - default 'default' */ imageflowid: 'imageflow', /* default id of imageflow container */ imagefocusm: 1.0, /* multiplicator focussed image size in percent */ imagefocusmax: 3, /* max number of images on each side of focussed 1 */ imagepath: '', /* path images relative reflect_.php script */ imagescaling: true, /* toggle image scaling */ imagesheight: 0.67, /* height of images div container in percent */ imagesm: 1.0, /* multiplicator images in percent */ onclick: function() { /*document.location = this.url;*/ flipit(this) }, /* onclick behaviour */ opacity: true, /* toggle image opacity */ opacityarray: [10,8,6,4], /* image opacity (range: 0 10) first value focussed image */ percentlandscape: 118, /* scale landscape format */ percentother: 100, /* scale portrait , square format */ preloadimages: false, /* toggles loading bar (false: requires img attributes height , width) */ reflections: false, /* toggle reflections */ reflectionget: '', /* pass variables via method reflect_.php script */ reflectionp: 0.5, /* height of reflection in percent of source image */ reflectionpng: false, /* toggle reflect2.php or reflect3.php */ reflectpath: '', /* path reflect_.php script */ scrollbarp: 0.6, /* width of scrollbar in percent */ slider: false, /* toggle slider */ slidercursor: 'e-resize', /* slider cursor type - default 'default' */ sliderwidth: 17, /* width of slider in px */ slideshow: false, /* toggle slideshow */ slideshowspeed: 1500, /* time between slides in ms */ slideshowautoplay: false, /* toggle automatic slideshow play on startup */ startid: 1, /* image id begin */ glidetostartid: true, /* toggle glide animation start id */ startanimation: false, /* animate images moving in right on startup */ xstep: 180 /* step width on x-axis in px */ }; /* closure */ var = this; //console.log(my) /* initiate imageflow */ this.init = function (options) { /* evaluate options */ for(var name in my.defaults) { this[name] = (options !== undefined && options[name] !== undefined) ? options[name] : my.defaults[name]; } /* try imageflow div element */ var imageflowdiv = document.getelementbyid(my.imageflowid); if(imageflowdiv) { /* set global within imageflow scope */ imageflowdiv.style.visibility = 'visible'; this.imageflowdiv = imageflowdiv; /* try create xhtml structure */ if(this.createstructure()) { this.imagesdiv = document.getelementbyid(my.imageflowid+'_images'); this.captiondiv = document.getelementbyid(my.imageflowid+'_caption'); this.navigationdiv = document.getelementbyid(my.imageflowid+'_navigation'); this.scrollbardiv = document.getelementbyid(my.imageflowid+'_scrollbar'); this.sliderdiv = document.getelementbyid(my.imageflowid+'_slider'); this.buttonnextdiv = document.getelementbyid(my.imageflowid+'_next'); this.buttonpreviousdiv = document.getelementbyid(my.imageflowid+'_previous'); this.buttonslideshow = document.getelementbyid(my.imageflowid+'_slideshow'); this.indexarray = []; this.current = 0; this.imageid = 0; this.target = 0; this.memtarget = 0; this.firstrefresh = true; this.firstcheck = true; this.busy = false; /* set height of imageflow container , center loading bar */ var width = this.imageflowdiv.offsetwidth; var height = math.round(width / my.aspectratio); document.getelementbyid(my.imageflowid+'_loading_txt').style.paddingtop = ((height * 0.5) -22) + 'px'; imageflowdiv.style.height = height + 'px'; /* init loading progress */ this.loadingprogress(); } } }; /* create html structure */ this.createstructure = function() { /* create images div container */ var imagesdiv = my.helper.createdocumentelement('div','images'); /* shift images images div */ var node, version, src, imagenode; var max = my.imageflowdiv.childnodes.length; for(var index = 0; index < max; index++) { node = my.imageflowdiv.childnodes[index]; if (node && node.nodetype == 1 && node.nodename == 'img') { /* add 'reflect.php?img=' */ if(my.reflections === true) { version = (my.reflectionpng) ? '3' : '2'; src = my.imagepath+node.getattribute('src',2); src = my.reflectpath+'reflect'+version+'.php?img='+src+my.reflectionget; node.setattribute('src',src); } /* clone image nodes , append them images div */ imagenode = node.clonenode(true); imagesdiv.appendchild(imagenode); } } /* clone more images make circular animation possible */ if(my.circular) { /* create temporary elements hold cloned images */ var first = my.helper.createdocumentelement('div','images'); var last = my.helper.createdocumentelement('div','images'); /* make sure, there enough images use circular mode */ max = imagesdiv.childnodes.length; if(max < my.imagefocusmax) { my.imagefocusmax = max; } /* not clone if there 1 image */ if(max > 1) { /* clone first , last images */ var i; for(i = 0; < max; i++) { /* number of clones on each side equals imagefocusmax */ node = imagesdiv.childnodes[i]; if(i < my.imagefocusmax) { imagenode = node.clonenode(true); first.appendchild(imagenode); } if(max-i < my.imagefocusmax+1) { imagenode = node.clonenode(true); last.appendchild(imagenode); } } /* sort image nodes in following order: last | originals | first */ for(i = 0; < max; i++) { node = imagesdiv.childnodes[i]; imagenode = node.clonenode(true); last.appendchild(imagenode); } for(i = 0; < my.imagefocusmax; i++) { node = first.childnodes[i]; imagenode = node.clonenode(true); last.appendchild(imagenode); } /* overwrite imagesdiv new order */ imagesdiv = last; } } /* create slideshow button div , append images div */ if(my.slideshow) { var slideshowbutton = my.helper.createdocumentelement('div','slideshow'); imagesdiv.appendchild(slideshowbutton); } /* create loading text container */ var loadingp = my.helper.createdocumentelement('p','loading_txt'); var loadingtext = document.createtextnode(' '); loadingp.appendchild(loadingtext); /* create loading div container */ var loadingdiv = my.helper.createdocumentelement('div','loading'); /* create loading bar div container inside loading div */ var loadingbardiv = my.helper.createdocumentelement('div','loading_bar'); loadingdiv.appendchild(loadingbardiv); /* create captions div container */ var captiondiv = my.helper.createdocumentelement('div','caption'); /* create slider , button div container inside scrollbar div */ var scrollbardiv = my.helper.createdocumentelement('div','scrollbar'); var sliderdiv = my.helper.createdocumentelement('div','slider'); scrollbardiv.appendchild(sliderdiv); if(my.buttons) { var buttonpreviousdiv = my.helper.createdocumentelement('div','previous', 'button'); var buttonnextdiv = my.helper.createdocumentelement('div','next', 'button'); scrollbardiv.appendchild(buttonpreviousdiv); scrollbardiv.appendchild(buttonnextdiv); } /* create navigation div container beneath images div */ var navigationdiv = my.helper.createdocumentelement('div','navigation'); navigationdiv.appendchild(captiondiv); navigationdiv.appendchild(scrollbardiv); /* update document structure , return true on success */ var success = false; if (my.imageflowdiv.appendchild(imagesdiv) && my.imageflowdiv.appendchild(loadingp) && my.imageflowdiv.appendchild(loadingdiv) && my.imageflowdiv.appendchild(navigationdiv)) { /* remove image nodes outside images div */ max = my.imageflowdiv.childnodes.length; for(index = 0; index < max; index++) { node = my.imageflowdiv.childnodes[index]; if (node && node.nodetype == 1 && node.nodename == 'img') { my.imageflowdiv.removechild(node); } } success = true; } return success; }; /* manage loading progress , call refresh function */ this.loadingprogress = function() { var p = my.loadingstatus(); if((p < 100 || my.firstcheck) && my.preloadimages) { /* insert short delay if browser loads rapidly cache */ if(my.firstcheck && p == 100) { my.firstcheck = false; window.settimeout(my.loadingprogress, 100); } else { window.settimeout(my.loadingprogress, 40); } } else { /* hide loading elements */ document.getelementbyid(my.imageflowid+'_loading_txt').style.display = 'none'; document.getelementbyid(my.imageflowid+'_loading').style.display = 'none'; /* refresh imageflow on window resize - delay adding event ie */ window.settimeout(my.helper.addresizeevent, 1000); /* call refresh once on startup display images */ my.refresh(); /* initialize navigation elements if there more 1 image */ if(my.max > 1) { /* initialize mouse, touch , key support */ //my.mousewheel.init(); //my.mousedrag.init(); my.touch.init(); my.key.init(); /* toggle slideshow */ if(my.slideshow) { my.slideshow.init(); } /* toggle scrollbar visibility */ if(my.slider) { my.scrollbardiv.style.visibility = 'visible'; } } } }; /* return loaded images in percent, set loading bar width , loading text */ this.loadingstatus = function() { var max = my.imagesdiv.childnodes.length; var = 0, completed = 0; var image = null; for(var index = 0; index < max; index++) { image = my.imagesdiv.childnodes[index]; if(image && image.nodetype == 1 && image.nodename == 'img') { if(image.complete) { completed++; } i++; } } var finished = math.round((completed/i)*100); var loadingbar = document.getelementbyid(my.imageflowid+'_loading_bar'); loadingbar.style.width = finished+'%'; /* not count cloned images */ if(my.circular) { = - (my.imagefocusmax*2); completed = (finished < 1) ? 0 : math.round((i/100)*finished); } var loadingp = document.getelementbyid(my.imageflowid+'_loading_txt'); var loadingtxt = document.createtextnode('loading images '+completed+'/'+i); loadingp.replacechild(loadingtxt,loadingp.firstchild); return finished; }; /* cache changes on refresh or resize of window */ this.refresh = function() { /* cache global variables */ this.imagesdivwidth = my.imagesdiv.offsetwidth+my.imagesdiv.offsetleft; this.maxheight = math.round(my.imagesdivwidth / my.aspectratio); this.maxfocus = my.imagefocusmax * my.xstep; this.size = my.imagesdivwidth * 0.5; this.sliderwidth = my.sliderwidth * 0.5; this.scrollbarwidth = (my.imagesdivwidth - ( math.round(my.sliderwidth) * 2)) * my.scrollbarp; this.imagesdivheight = math.round(my.maxheight * my.imagesheight); /* change imageflow div properties */ my.imageflowdiv.style.height = my.maxheight + 'px'; /* change images div properties */ my.imagesdiv.style.height = my.imagesdivheight + 'px'; /* change images div properties */ my.navigationdiv.style.height = (my.maxheight - my.imagesdivheight) + 'px'; /* change captions div properties */ my.captiondiv.style.width = my.imagesdivwidth + 'px'; my.captiondiv.style.paddingtop = math.round(my.imagesdivwidth * 0.02) + 'px'; /* change scrollbar div properties */ my.scrollbardiv.style.width = my.scrollbarwidth + 'px'; my.scrollbardiv.style.margintop = math.round(my.imagesdivwidth * 0.02) + 'px'; my.scrollbardiv.style.marginleft = math.round(my.sliderwidth + ((my.imagesdivwidth - my.scrollbarwidth)/2)) + 'px'; /* set slider attributes */ my.sliderdiv.style.cursor = my.slidercursor; my.sliderdiv.onmousedown = function () { my.mousedrag.start(this); return false;}; if(my.buttons) { my.buttonpreviousdiv.onclick = function () { my.mousewheel.handle(1); }; my.buttonnextdiv.onclick = function () { my.mousewheel.handle(-1); }; } /* set reflection multiplicator */ var multi = (my.reflections === true) ? my.reflectionp + 1 : 1; /* set image attributes */ var max = my.imagesdiv.childnodes.length; var = 0; var image = null; (var index = 0; index < max; index++) { image = my.imagesdiv.childnodes[index]; if(image !== null && image.nodetype == 1 && image.nodename == 'img') { this.indexarray[i] = index; /* set image attributes store values */ image.url = image.getattribute('longdesc'); image.xposition = (-i * my.xstep); image.i = i; /* add width , height attributes once */ if(my.firstrefresh) { if(image.getattribute('width') !== null && image.getattribute('height') !== null) { image.w = image.getattribute('width'); image.h = image.getattribute('height') * multi; } else{ image.w = image.width; image.h = image.height; } } /* check source image format. image height minus reflection height! */ if((image.w) > (image.h / (my.reflectionp + 1))) { /* landscape format */ image.pc = my.percentlandscape; image.pcmem = my.percentlandscape; } else { /* portrait , square format */ image.pc = my.percentother; image.pcmem = my.percentother; } /* change image positioning */ if(my.imagescaling === false) { image.style.position = 'relative'; image.style.display = 'inline'; } /* set image cursor type */ image.style.cursor = my.imagecursor; i++; } } this.max = my.indexarray.length; /* override dynamic sizes based on first image */ if(my.imagescaling === false) { image = my.imagesdiv.childnodes[my.indexarray[0]]; /* set left padding first image */ this.totalimageswidth = image.w * my.max; image.style.paddingleft = (my.imagesdivwidth/2) + (image.w/2) + 'px'; /* override images , navigation div height */ my.imagesdiv.style.height = image.h + 'px'; my.navigationdiv.style.height = (my.maxheight - image.h) + 'px'; } /* handle startid on first refresh */ if(my.firstrefresh) { /* reset variable */ my.firstrefresh = false; /* set imageid startid */ my.imageid = my.startid-1; if (my.imageid < 0 ) { my.imageid = 0; } /* map image id range in cicular mode (ignore cloned images) */ if(my.circular) { my.imageid = my.imageid + my.imagefocusmax; } /* make sure, id smaller image count */ maxid = (my.circular) ? (my.max-(my.imagefocusmax))-1 : my.max-1; if (my.imageid > maxid) { my.imageid = maxid; } /* toggle glide animation start id */ if(my.glidetostartid === false) { my.moveto(-my.imageid * my.xstep); } /* animate images moving in right */ if(my.startanimation) { my.moveto(5000); } } /* animate if there more 1 image */ if(my.max > 1) { my.glideto(my.imageid); } /* display images in current order */ my.moveto(my.current); }; /* main animation function */ this.moveto = function(x) { //alert(x) this.current = x; this.zindex = my.max; /* main loop */ (var index = 0; index < my.max; index++) { var image = my.imagesdiv.childnodes[my.indexarray[index]]; var currentimage = index * -my.xstep; /* enabled image scaling */ if(my.imagescaling) { /* don't display images not conf_focussed */ if ((currentimage + my.maxfocus) < my.memtarget || (currentimage - my.maxfocus) > my.memtarget) { image.style.visibility = 'hidden'; image.style.display = 'none'; } else { var z = (math.sqrt(10000 + x * x) + 100) * my.imagesm; //var z = (math.sqrt(10000) + 500) * my.imagesm; var xs = x / z * my.size + my.size; /* still hide images until processed, set display style block */ image.style.display = 'block'; /* process new image height , width */ var newimageh = (image.h / image.w * image.pc) / z * my.size; var newimagew = 0; switch (newimageh > my.maxheight) { case false: newimagew = image.pc / z * my.size; break; default: newimageh = my.maxheight; newimagew = image.w * newimageh / image.h; break; } var newimagetop = (my.imagesdivheight - newimageh) + ((newimageh / (my.reflectionp + 1)) * my.reflectionp); /* set new image properties */ image.style.left = xs - (image.pc / 2) / z * my.size + 'px'; if(newimagew && newimageh) { image.style.height = newimageh + 'px'; image.style.width = newimagew + 'px'; image.style.top = newimagetop + 'px'; /* newimagetop="100.239"; newimageh="250"; newimagew="210"; image.style.height = newimageh + 'px'; image.style.width = newimagew + 'px'; image.style.top = newimagetop + 'px'; */ } image.style.visibility = 'visible'; //console.log("left == " +image.style.left); //console.log("top ==" + newimagetop) /* set image layer through zindex */ switch ( x < 0 ) { case true: this.zindex++; break; default: this.zindex = my.zindex - 1; break; } /* change zindex , onclick function of focussed image */ switch ( image.i == my.imageid ) { case false: image.onclick = function() { my.glideto(this.i);}; break; default: this.zindex = my.zindex + 1; if(image.url !== '') { image.onclick = my.onclick; } break; } image.style.zindex = my.zindex; } } /* disabled image scaling */ else { if ((currentimage + my.maxfocus) < my.memtarget || (currentimage - my.maxfocus) > my.memtarget) { image.style.visibility = 'hidden'; } else { image.style.visibility = 'visible'; /* change onclick function of focussed image */ switch ( image.i == my.imageid ) { case false: image.onclick = function() { my.glideto(this.i);}; break; default: if(image.url !== '') { image.onclick = my.onclick; } break; } } my.imagesdiv.style.marginleft = (x - my.totalimageswidth) + 'px'; } x += my.xstep; } };
without seeing code you're generating it's difficult what's going on, i'd guess adding divs around images screwing format imageflow looking when laying out images.
are descriptions long? if not, might able add them alt tags image , enable captions in imageflow options. alt tag description show caption on image.
Comments
Post a Comment