Lightbox Var問題

對於一個項目，我必須實現基於JavaScript的LightBox腳本。我用了我的一個朋友的腳本。事情是，該腳本僅適用於頁面上的一個圖像。這意味着其他4個不工作。所以基本上我的猜測是它只能從5箇中調用一個圖像來實際工作。我對JavaScript仍然非常基本，我無法自行解決問題。Lightbox Var問題

這是燈箱腳本的JavaScript代碼：

var smallimg = document.getElementsByClassName("small")[0]; 
var bigimg = document.getElementsByClassName("big")[0]; 
var close = document.getElementsByClassName("close")[0]; 
var el = document.getElementsByClassName("back")[0]; 

smallimg.addEventListener("click", function() { fadeIn() }); 

function fadeIn() { 
el.style.display = "block"; 
el.style.opacity = 0; 

tick(); 
showpicture(); 
} 

function tick() { 
el.style.opacity = +el.style.opacity + 0.03; 

if (+el.style.opacity < 1) { 
    (window.requestAnimationFrame && requestAnimationFrame(tick)) ||  setTimeout(tick, 16) 
} 
} 

function showpicture() { 
var NewSrc = smallimg.src.split(".png")[0] + "1.png"; 
console.log(NewSrc); 
bigimg.src = NewSrc; 
} 

close.addEventListener("click", function() { closing() }); 

function closing() { 
el.style.display = "none"; 
}

這是第2個圖像&文本的HTML代碼。

<aside> 
<img class="small" name="small1" src="../images/Rambla.png" alt="La Rambla"  /> 
    </aside> 

    <h2>La Rambla</h2> 
    <article> 

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 


     </article> 

    <aside> 
     <img class="small" name="small2" src="../images/Sagrada.png" alt="La Sagrada Familia" /> 
    </aside> 

    <br> <h2>La Sagrada Familia</h2> 
    <article> 

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 
     <br/><br/> 


     </article>

來源

2016-08-03 Cicero Von Halsen

這將工作。請嘗試。

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>SSIndex</title> 
    <link href="~/Content/lightbox.min.css" rel="stylesheet" /> 
</head> 
<body> 
    <aside> 
     <img class="example-image small" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="0" /> 
     <img class="example-image el big close back" 
       style="display:none" alt="0" /> 
    </aside> 
    <h2>La Rambla</h2> 
    <article> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 
    </article> 
    <aside> 
     <img class="example-image small" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="1" /> 
     <img class="example-image el big close back" 
      style="display:none" alt="1" /> 
    </aside> 
    <br> <h2>La Sagrada Familia</h2> 
    <article> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. 
     <br /><br /> 
    </article> 
    <script src="~/Scripts/lightbox-plus-jquery.min.js"></script> 
    <script type="text/javascript"> 
     //var smallimg = document.getElementsByClassName("small")[0]; 
     //var bigimg = document.getElementsByClassName("big")[0]; 
     //var close = document.getElementsByClassName("close")[0]; 
     //var el = document.getElementsByClassName("back")[0]; 

     //smallimg.addEventListener("click", function() { fadeIn() }); 
     var index = 0; 

     $(".small").click(function() { 
      fadeIn($(this)); 
     }); 

     function fadeIn(small) { 
      //get index 
      index = small.attr("alt"); 

      //get big 
      var el = $(".back")[index]; 

      el.style.display = "block"; 
      //changed this to 1 
      el.style.opacity = 1; 

      tick(el); 

      //get small 
      var small = $(".small")[index]; 
      showpicture(small, el); 
     } 

     function tick(el) { 
      el.style.opacity = +el.style.opacity + 0.03; 

      if (+el.style.opacity < 1) { 
       (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16) 
      } 
     } 

     function showpicture(smallimg, bigimg) { 
      //var NewSrc = smallimg.src.split(".png")[0] + "1.png"; 
      //get the filename 
      var filename = smallimg.src.split('/').pop(); 
      //get the pathname 
      var pathname = smallimg.src.substr(0, smallimg.src.indexOf(filename)); 
      //replace filename small with big 
      filename = filename.replace("thumb", "image"); 
      //put it together 
      var NewSrc = pathname + filename; 
      console.log(NewSrc); 
      bigimg.src = NewSrc; 
     } 

     //close.addEventListener("click", function() { closing() }); 
     $(".close").click(function() { 
      closing($(this)); 
     }); 

     function closing(el) { 
      el.css("display", "none"); 
     } 
    </script> 
</body> 
</html>

來源

2016-08-04 00:01:10 kblau

它的工作，謝謝Kblau！ –

jquery選擇器拉動dom順序一致http://stackoverflow.com/questions/1636201/is-the-order-objects-are-return-by-a-jquery-selector-specified 2）更好的解決方案將獲得一個對象的元素數組，並在這個對象中找到一個元素，而不是使用alt屬性:) – kblau

我在大圖上將不透明度從0改爲1，但我認爲應該有漸變的不透明度 – kblau

Lightbox Var問題

回答

相關問題