div를 추가 한 후 이미지가 보이지 않음

Question

이미지 슬라이더를 만들 때 imageFlow을 사용하고 있습니다. 나는 Flip 기능을 클릭하여 이미지에 추가했다. 내 문제는 설명 주위에 div 이미지를 추가 할 수 있지만 이미지 주위에 div 추가 할 때 보이지 않는됩니다. js 파일을 업데이트하는 방법을 모르겠습니다.

제안하십시오

,

/* ImageFlow constructor */ 

기능 ImageFlow() {

/* Setting option defaults */ 
this.defaults = 
{ 
    animationSpeed:  100,    /* Animation speed in ms */ 
    aspectRatio:  1.964,   /* Aspect ratio of the ImageFlow container (width divided by height) */ 
    buttons:   false,   /* Toggle navigation buttons */ 
    captions:   false,   /* Toggle captions */ 
    circular:   true,   /* Toggle circular rotation */ 
    imageCursor:  'default',  /* Cursor type for all images - default is 'default' */ 
    ImageFlowID:  'imageflow', /* Default id of the ImageFlow container */ 
    imageFocusM:  1.0,   /* Multiplicator for the focussed image size in percent */ 
    imageFocusMax:  3,    /* Max number of images on each side of the focussed one */ 
    imagePath:   '',    /* Path to the images relative to the reflect_.php script */ 
    imageScaling:  true,   /* Toggle image scaling */ 
    imagesHeight:  0.67,   /* Height of the images div container in percent */ 
    imagesM:   1.0,   /* Multiplicator for all 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 to 10) first value is for the focussed image */ 
    percentLandscape: 118,   /* Scale landscape format */ 
    percentOther:  100,   /* Scale portrait and square format */ 
    preloadImages:  false,   /* Toggles loading bar (false: requires img attributes height and width) */ 
    reflections:  false,   /* Toggle reflections */ 
    reflectionGET:  '',    /* Pass variables via the GET method to the reflect_.php script */ 
    reflectionP:  0.5,   /* Height of the reflection in percent of the source image */ 
    reflectionPNG:  false,   /* Toggle reflect2.php or reflect3.php */ 
    reflectPath:  '',    /* Path to the reflect_.php script */ 
    scrollbarP:   0.6,   /* Width of the scrollbar in percent */ 
    slider:    false,   /* Toggle slider */ 
    sliderCursor:  'e-resize',  /* Slider cursor type - default is 'default' */ 
    sliderWidth:  17,    /* Width of the 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 to begin with */ 
    glideToStartID:  true,   /* Toggle glide animation to start ID */ 
    startAnimation:  false,   /* Animate images moving in from the right on startup */ 
    xStep:    180    /* Step width on the x-axis in px */ 
}; 


/* Closure for this */ 
var my = 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 to get ImageFlow div element */ 
    var ImageFlowDiv = document.getElementById(my.ImageFlowID); 
    if(ImageFlowDiv) 
    { 
     /* Set it global within the ImageFlow scope */ 
     ImageFlowDiv.style.visibility = 'visible'; 
     this.ImageFlowDiv = ImageFlowDiv; 

     /* Try to 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 the ImageFlow container and center the 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 all images into the 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 and append them to the images div */ 
      imageNode = node.cloneNode(true); 
      imagesDiv.appendChild(imageNode); 
     } 
    } 

    /* Clone some more images to make a circular animation possible */ 
    if(my.circular) 
    { 
     /* Create temporary elements to hold the cloned images */ 
     var first = my.Helper.createDocumentElement('div','images'); 
     var last = my.Helper.createDocumentElement('div','images'); 

     /* Make sure, that there are enough images to use circular mode */ 
     max = imagesDiv.childNodes.length; 
     if(max < my.imageFocusMax) 
     { 
      my.imageFocusMax = max; 
     } 

     /* Do not clone anything if there is only one image */ 
     if(max > 1) 
     { 
      /* Clone the first and last images */ 
      var i; 
      for(i = 0; i < max; i++) 
      { 
       /* Number of clones on each side equals the 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 the image nodes in the following order: last | originals | first */ 
      for(i = 0; i < max; i++) 
      { 
       node = imagesDiv.childNodes[i]; 
       imageNode = node.cloneNode(true); 
       last.appendChild(imageNode); 
      } 



      for(i = 0; i < my.imageFocusMax; i++) 
      { 
       node = first.childNodes[i]; 
       imageNode = node.cloneNode(true); 
       last.appendChild(imageNode); 
      } 

      /* Overwrite the imagesDiv with the new order */ 
      imagesDiv = last; 

     } 


    } 

    /* Create slideshow button div and append it to the 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 the 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 and button div container inside the 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 and 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 the 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 and call the refresh function */ 
this.loadingProgress = function() 
{ 
    var p = my.loadingStatus(); 
    if((p < 100 || my.firstCheck) && my.preloadImages) 
    { 
     /* Insert a short delay if the browser loads rapidly from its 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 this event for the IE */ 
     window.setTimeout(my.Helper.addResizeEvent, 1000); 

     /* Call refresh once on startup to display images */ 
     my.refresh(); 

     /* Only initialize navigation elements if there is more than one image */ 
     if(my.max > 1) 
     { 
      /* Initialize mouse, touch and 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 and loading text */ 
this.loadingStatus = function() 
{ 
    var max = my.imagesDiv.childNodes.length; 
    var i = 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+'%'; 

    /* Do not count the cloned images */ 
    if(my.circular) 
    { 
     i = i - (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 EVERYTHING that only changes on refresh or resize of the 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 the reflection multiplicator */ 
    var multi = (my.reflections === true) ? my.reflectionP + 1 : 1; 

    /* Set image attributes */ 
    var max = my.imagesDiv.childNodes.length; 
    var i = 0; 
    var image = null; 
    for (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 to store values */ 
      image.url = image.getAttribute('longdesc'); 
      image.xPosition = (-i * my.xStep); 
      image.i = i; 

      /* Add width and height as attributes only 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. Get 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 and 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 the first image */ 
    if(my.imageScaling === false) 
    { 
     image = my.imagesDiv.childNodes[my.indexArray[0]]; 

     /* Set left padding for the first image */ 
     this.totalImagesWidth = image.w * my.max; 
     image.style.paddingLeft = (my.imagesDivWidth/2) + (image.w/2) + 'px'; 

     /* Override images and navigation div height */ 
     my.imagesDiv.style.height = image.h + 'px'; 
     my.navigationDiv.style.height = (my.maxHeight - image.h) + 'px'; 
    } 

    /* Handle startID on the first refresh */ 
    if(my.firstRefresh) 
    { 
     /* Reset variable */ 
     my.firstRefresh = false; 

     /* Set imageID to the startID */ 
     my.imageID = my.startID-1; 
     if (my.imageID < 0) 
     { 
      my.imageID = 0; 
     } 

     /* Map image id range in cicular mode (ignore the cloned images) */ 
     if(my.circular) 
     { 
      my.imageID = my.imageID + my.imageFocusMax; 
     } 

     /* Make sure, that the id is smaller than the image count */ 
     maxId = (my.circular) ? (my.max-(my.imageFocusMax))-1 : my.max-1; 
     if (my.imageID > maxId) 
     { 
      my.imageID = maxId; 
     } 

     /* Toggle glide animation to start ID */ 
     if(my.glideToStartID === false) 
     { 
      my.moveTo(-my.imageID * my.xStep); 
     } 

     /* Animate images moving in from the right */ 
     if(my.startAnimation) 
     { 
      my.moveTo(5000); 
     } 
    } 

    /* Only animate if there is more than one 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 */ 
    for (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 that are 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 they are processed, but set display style to block */ 
       image.style.display = 'block'; 

       /* Process new image height and 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 and onclick function of the 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 the 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; 
    } 
}; 

Answer 1

당신이 그것을 생성하고 코드를 보지 않고는 무슨 일 정확히 무슨 말을하기가 어렵습니다,하지만 난 것으로 추측에는 요 이미지 주변에 div를 추가하면 이미지를 배치 할 때 ImageFlow가 찾고있는 형식이 엉망입니다.

설명이 길어요? 그렇지 않은 경우 이미지에 alt 태그로 추가 한 다음 ImageFlow 옵션에서 캡션을 활성화 할 수 있습니다. 그런 다음 alt 태그 설명이 이미지의 캡션으로 표시됩니다.