2013-05-31 325 views
0

我使用http://finnrudolph.de/ImageFlow/Examples爲imageFlow,當我調整窗口大小窗口時,小圖像變得非常小,因爲它們的計算方式。我想改變但沒有成功,有什麼建議嗎?imageflow滑塊圖像的寬度和大小調整大小

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; 
+0

你可以用CSS解決這個問題。 如果你看看類** imageflow **,它的寬度設置爲100%。如果將此更改爲固定寬度,則可以解決問題。 –

+0

@Natalie H我不想讓它的固定大小......但如果窗口的大小調整它比圖像的寬度和高度來得小,應該不會發生我想要更大的圖像 – anam

回答

0

您可以在圖像上設置最小寬度。例如:

img {min-width: 200px;} 
相關問題