Лайтбокс JQuery не сработает - PullRequest
Новая
       1

Лайтбокс JQuery не сработает

0 голосов
/ 15 декабря 2011

Я работаю с ASP.NET MVC 3. У меня есть дочерняя страница, которая наследует главную страницу, которая загружает скрипты jQuery Lightbox для отображения изображений во всплывающем окне. Я последовал примеру здесь . Изображения загружаются правильно (я вижу эскизы, как в примере с этого сайта), но когда я нажимаю на одно из них, я перенаправляюсь на страницу только с этим изображением, и всплывающее окно не появляется. Скрипты (из jquery, jquery.lightbox, необходимого css) все загружены правильно (я отлаживаю с Firebug и вижу их в начале исходного кода страницы).

Что я должен сделать, чтобы получить эффект всплывающего окна? (Я также добавил функцию, которая применяет лайтбокс к элементу div, содержащему фотогалерею $('#gallery a').lightBox();, как в примере, но все еще ничего).

EDIT

Пример кода с главной страницы: 

script src="<%=Html.Resolve("/Content/MediaHelpers/js/jquery.js") %>" type="text/javascript"></script>
"type =" text / javascript "charset =" utf-8 ">

"type =" text / css "media =" screen "/> 

<script type="text/javascript">
    $(document).ready(function () {
        $("#Item_StartDate").datepicker();
        $("#Item_EndDate").datepicker();
        $("#Item_CheckInDate").datepicker();
        $("#Item_CheckOutDate").datepicker();
        $("#Item_DepartTime").datepicker();
        $("#Item_ArrivalTime").datepicker();
        $("#Item_PickUpDate").datepicker();
        $("#Item_DropOffDate").datepicker();
        $('#gallery a').lightBox();
    });

Html.Resolve работает хорошо, так как я вижу их загруженными на веб-странице при запуске сайта.

Дочерняя страница содержит именно тот код из примера лайтбокса: 

<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" width="72" height="72" alt="" />
        </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" width="72" height="72" alt="" />
        </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" width="72" height="72" alt="" />
        </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" width="72" height="72" alt="" />
        </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" width="72" height="72" alt="" />
        </a>
    </li>
</ul>

Заранее спасибо, Тамас

1 Ответ

0 голосов
/ 15 декабря 2011

Ваша HTML-разметка может выглядеть следующим образом:

HTML: 

<div id="gallery">
        <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar.">
            <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
        </a>
        <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar.">
            <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
        </a>
        <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar.">
            <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
        </a>
        <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar.">
            <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
        </a>
        <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar.">
            <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
        </a>
</div>

Doc Ready JS: 

$('#gallery a').lightBox();

Рабочий пример ЗДЕСЬ

...