2013
10
Дек

Фотогалерея для сайта
jquery jPage Flip



Foto jPage Flip

Привлекательная фотогалерея с эффектом перелистывания страниц может украсить любую страницу вашего сайта. Оформить такую галерею не сложно.

Сущность фотогалереи заключается в том, что при помощи мышки за уголок можно перелистывать страницы с изображениями. Скорость перелистывания можно задавать самому. Заглавная и последняя страницы могут быть оформлены самостоятельно. Все зависит от вашей фантазии.

Скачайте исходник, в котором находятся изображения, скрипты, файл HTML и текстовый файл.

Изображения имеют размер 328х500 px (обязательно все фото должны одного размера), под галерею подложили книжный фон (у меня он 720х550 px).

Обязательно делаем файл clearpixel.gif  (размером, как и все остальные картинки) Этот файл всегда будет последним, как закрывающая корка книги (за этим следит сам скрипт). Чтобы книга не закрывалась совсем, количество картинок должно быть четным.

Между тегами <head></head> вставляем код (обязательно правильно укажите путь к скриптам):

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jpageflip-0.9.7.js"></script> <script type="text/javascript"> window.onload = pageIsLoaded(); function pageIsLoaded() {$(document).ready(function(){ $('#myPageFlip').jPageFlip({ width: 330,//ширина корки книги height: 500,//высота top: 17,//отступ от верхней линии изображения left: 33,//отступ от обложки до листа startPage : 1//старт с первой картинки });});} // pageIsLoaded</script> <style> *{ margin:0; padding:0}/*убираем отступы*/ .example { width:710px;/*ширина блока*/ height:600px;/*высота блока*/ margin:50px auto;/*внешние отступы*/ background:url(images/1.png) no-repeat;/*картинка обложки книги. без повтора*/ } </style>

В коде дана расшифровка всех параметров, которые вы можете изменить под свою галерею.

Ширина блока (две картинки по 330 и плюс выступающая часть обложки) берем 710 px, высота – 600 px из расчета (фото 500 px плюс обложка). Для перелистывания страницы щелкаем мышкой в нижнем углу страницы (справа или слева, в зависимости от направления перелистывания).

Следующий код вставляем между тегами <body></body>, т.е. туда где вы хотите разместить свою галерею. Идентификатор id="myPageFlip" (по скрипту) и class="example" (для блока).

<div class="example"> <div id="myPageFlip"> <img src="images/corka.jpg" class="jPageFlip"> <img src="images/1.jpg" class="jPageFlip"> <img src="images/2.jpg" class="jPageFlip"> <img src="images/3.jpg" class="jPageFlip"> <img src="images/4.jpg" class="jPageFlip"> <img src="images/5.jpg" class="jPageFlip"> <img src="images/6.jpg" class="jPageFlip"> <img src="images/7.jpg" class="jPageFlip"> <img src="images/8.jpg" class="jPageFlip"> <img src="images/9.jpg" class="jPageFlip"> <img src="images/10.jpg" class="jPageFlip"> <img src="images/11.jpg" class="jPageFlip"> <img src="images/12.jpg" class="jPageFlip"> </div></div>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР

Изменения, которые вы можете сделать в скрипте данной галереи:


<script> $.jPageFlip.defaultOptions = { animationDynamic : 50, //скорость перелистывания страницы (20линия) cornerSize : 50, //размер квадрата длч перелистывания щелчком showCorner : false,//выключение показа уголка cornerColor : '#FFFFFF',//цвет уголка cornerAlpha : 0.3,//непрозрачность }; </script>