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问题

回答

相关问题