Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

JS Animated. Как применить плагин jQuery lightbox «prettyPhoto»

Данный туториал покажет, как применить плагин jQuery lightbox «prettyPhoto» в шаблоне JS Animated.

JS Animated. Как применить плагин jQuery lightbox «prettyPhoto» в шаблоне JS Animated.

PrettyPhoto — это клон jQuery lightbox. Он применяется не только для картинок, но и для видео, флеш-анимации, iframes и ajax. Это полноценный медиа lightbox.

Для того, чтобы добавить его на страницу:
  1. Скачайте и разархивируйте файл prettyPhoto_compressed_3.1.5.zip с сайта http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/.

    js_animated_jquery_prettyphoto_lightbox_plugin_implementing_1
  2. Скопируйте папки js и css в папку site шаблона. Поскольку, там уже есть папки с такими названиями, система предложит заменить их. Подтвердите замену, потому что это лишь добавить новые файлы в папки.

    js_animated_jquery_prettyphoto_lightbox_plugin_implementing_2
  3. Откройте файл .html с изображением, для которого вы хотите применить плагин и добавьте библиотеку в таблице стилей в секции <head>, используя текстовый редактор DreamWeaver:

    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
    
    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> 
    
    js_animated_jquery_prettyphoto_lightbox_plugin_implementing_3
  4. Найдите строку с изображением, например:

  5. <img src="images/image_small.jpg " alt="" />
      

    Отредактируйте ее:

        
    <a href="images/image_big.jpg" rel="prettyPhoto" title="Single Photo"><img src="images/image_small.jpg " alt=" " /></a>    
    
    js_animated_jquery_prettyphoto_lightbox_plugin_implementing_4

    В папке images должны быть файлы image_big.jpg и image_small.jpg соответственно.

    js_animated_jquery_prettyphoto_lightbox_plugin_implementing_5
  6. Инициализируйте prettyPhoto: добавьте следующий код в файл .html перед закрывающим тегом </head> :

  7.       
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    });
    </script>
    
    js_animated_jquery_prettyphoto_lightbox_plugin_implementing_6
  8. Сохраните страницу и обновите браузер: картинка должна открываться в lightbox.
  9. js_animated_jquery_prettyphoto_lightbox_plugin_implementing_7.

Более детальную информацию об использовании плагина, можно найти в официальном руководстве на сайте http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation

Вы также можете воспользоваться детальным видео туториалом:

JS Animated. Как применить плагин jQuery lightbox «prettyPhoto»
  • Elikart Kanane Kame Mugangane

    Good Plungin…

    No votes yet.
    Please wait...
 
Чат
We help you to choose the right product.
Начать чат