Litebox 插件不起作用

Posted 2023-05-09

【中文标题】Litebox 插件不起作用

【英文标题】：Litebox plugin does not work

【发布时间】：2014-08-29 12:25:12

【问题描述】：

我一直在尝试使用 litebox 插件为弹出效果创建一个画廊。该网站是一个带有单个母版页的 aspx 网站。 母版页中的链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/javascript/jquery.slides.js" type="text/javascript"></script>
<script src="assets/javascript/jquery.slides.min.js" type="text/javascript"></script>

<!--Litebox start-->
<link href="assets/litebox/css/litebox.css" rel="stylesheet" type="text/css" />
<link href="assets/litebox/css/litebox.css" rel="stylesheet" type="text/css" />
<link href="assets/litebox/css/normalize.css" rel="stylesheet" type="text/css" />
<script src="assets/litebox/js/smoothscroll.js" type="text/javascript"></script>
<script src="assets/litebox/js/images-loaded.min.js" type="text/javascript"></script>
<script src="assets/litebox/js/litebox.js" type="text/javascript"></script>
<script src="assets/litebox/js/backbone.js" type="text/javascript"></script>

弹出图片：

<p>
<a href="assets/images/portfolio/customizingQuestions.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1" ><img src="assets/images/portfolio/customizingQuestionsThumb.jpg" class="inline-block" /></a>
                <a href="assets/images/portfolio/differentQuestionTypes.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/images/portfolio/differentQuestionTypesThumb.jpg" class="inline-block" /></a>
                <a href="assets/images/portfolio/finalMoments.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/images/portfolio/finalMomentsThumb.jpg" class="inline-block" /></a>
                <a href="assets/images/portfolio/pressingAButton.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/images/portfolio/pressingAButtonThumb.jpg" class="inline-block" /></a>
                <a href="assets/images/portfolio/welcomeScreen.jpg" target="_self" class="inline-block litebox" data-litebox-group="group-1"><img src="assets/images/portfolio/welcomeScreenThumb.jpg" class="inline-block" /></a>
            </p>

【问题讨论】：

感谢您的回答破解者，但它什么也没做。当我单击图片时，将被重定向到只有该图片的空白页面。

【参考方案1】：

试试

html

<div id="gallery">
       <ul>
           <li><a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
               <img src="photos/thumb_image1.jpg"    />
           </a></li>
           <li><a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
               <img src="photos/thumb_image2.jpg"    />
           </a></li>
           <li><a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
               <img src="photos/thumb_image3.jpg"    />
           </a></li>
           <li><a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
               <img src="photos/thumb_image4.jpg"    />
           </a></li>
           <li><a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
               <img src="photos/thumb_image5.jpg"    />
           </a></li>
       </ul>
   </div>

Javascript

<script type="text/javascript">
        $(function () 
            $('#gallery a').lightBox();
        );
</script>