AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Как сделать предпросмотр картинки с открытием оригинала на javascript с использованием Framework.

Для этого воспользуемся готовой библиотекой LightBox2.

Lightbox - простой JS скрипт, отображающий изображения на текущей странице, на страницу можно поместить уменьшенное изображение, нажав на него открывается красивое окошко, где это изображение будет показано в оригинальном размере, самое главное это окошко открывается без перезагрузки страницы и работает почти во всех современных браузерах. Взять скрипт и посмотреть как он работает можно здесь.

Установка LightBox:

1. Lightbox использует JavaScript библиотеки Prototype Framework и Scriptaculous, нам нужно будет подключить в нашу страничку три файла, для этого вставьте следующий код в вашу страничку между тэгами <head> и </head>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Дальше нам нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте в вашу страничку следующий код, между тэгами <head> и </head>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Потом проверьте в файле CSS ссылки на prev.gif next.gif. Также убедитесь в правильности ссылок на loading.gif и close.gif, в файле lightbox.js.

Использование LightBox:

1. Добавляем такую ссылку после тэга<body>, этим кодом мы сделали LightBox для картинки image-1.jpg, таким образом можно подключить и другие картинки. Атрибут title служит для подписи картинки, его можно и не использовать.

<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src=" images/image.jpg"></a>

2. Если у вас есть группа превьюшек, которые необходимо сгруппировать, необходимо дополнительно включить в атрибут rel - имя группы в квадратных скобках. Пример:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image 1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image 2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image 3</a>

. http://www.photomax.ru/ секреты создания шикарных фотокниг.

© Copyright 2008-2016 by KDG