Создание лайтбокса JQuery - PullRequest
1 голос
/ 31 июля 2011

Я пробовал три разных jquery-плагина, чтобы при включении ссылки с изображением появился лайтбокс. Это тот, который я сейчас пытаюсь http://balupton.github.com/jquery-lightbox/demo/ Я добавил источник плагина в голову, и ссылки с изображениями имеют значение rel = 'lightbox', но когда я нажимаю на изображение, браузер открывает изображение.

Это то, что у меня в голове

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="description" content="sumthing">
<meta name="keywords" content="stuff">
<link rel="stylesheet" type="text/css" href="/site_media/css/peda.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/site_media/favicon.ico" type="image/x-icon"> 
<script type="text/javascript" src="/site_media/js/jquery.js"></script>
<script type="text/javascript" src="/site_media/jquery-lightbox/scripts/jquery.lightbox.min.js"></script>
<script src="/site_media/js/imgscale.js"></script>
<script type="text/javascript">

Вот так у меня есть ссылки на изображения

<a rel="lightbox" href="someexternalimage.jpg"><img class="contentimg" style="display:block; max-width:100%;max-height:500px; padding-top:5px; margin-bottom:3px" src="someexternalimage.jpg"></a>

Надеюсь, кто-нибудь может мне помочь, спасибо

Ответы [ 2 ]

1 голос
/ 01 августа 2011

Убедитесь, что сценарии добавлены на страницу, и вы используете версию jquery, которую рекомендует lightbox. Я думаю, это как-то связано с вашей установкой, потому что я начал работать на скрипке:

http://jsfiddle.net/jensbits/u6v98/

Инструкция по установке

0 голосов
/ 31 июля 2011

Если вы поместите его в тег <a>, убедитесь, что вы запретите запуск обработчика событий по умолчанию.

$('a[rel=lightbox]').click(function(event){
    event.preventDefault();
});

Запретив запуск события по умолчанию, вы говорите браузеру не перенаправлять на someexternalimage.jpg, как обычно, когда он находится внутри ссылки.

...