Как интегрировать Fancybox в NetCat? пошаговая инструкция, как всегда

Fancybox - популярная online-смотрелка фотографий для сайта. В ряду других смотрелок, использующих библиотеку jQuery ее отличает особенная простота и аскетизм исполнения. Кроме фотографий, штука умеет показывать во всплывающих окнах любой html-код, флэш-анимацию и даже другие сайты через iframe. Полезная, в общем, штука, так как же ее интегрировать в NetCat? Краткий ответ: точно также, как и в любую другую CMS.

Установка:

  1. Скачиваем релиз с официального сайта;
  2. Директорию "fancybox" в архиве переименовываем в "phph-fancybox" и заливаем в /images нашего сайта;
  3. В заголовок макета дизайна вставляем примерно следующий код:
        <!-- phph-fancybox -->
            <link rel='stylesheet' href='/images/phph-fancybox/jquery.fancybox-1.3.4.css' type='text/css' media='screen' />
            <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
            <script type='text/javascript' src='/images/phph-fancybox/jquery.fancybox-1.3.4.pack.js'></script>
            <script type=\"text/javascript\">
                $(document).ready(function() {

                /* описываем вызов fancybox из ссылок с заданными ID*/
                $(\"a#single_image\").fancybox();
                $(\"a#inline\").fancybox({
                    'titleShow'     :   false
                });

                /* Apply fancybox to multiple items */
                $(\"a.group\").fancybox({
                    'transitionIn'  :   'elastic',
                    'transitionOut' :   'elastic',
                    'speedIn'   :   600,
                    'speedOut'  :   200,
                    'overlayShow'   :   false,
                    'titleShow' :   false
                });

            });
            </script>
        <!-- /phph-fancybox -->

Теперь ссылка с id='single_image' будут открываться через Fancybox, красивенько. А ссылка с id='inline' тоже будет открываться через Fancybox не менее красивенько, но без заголовка.

Наконец, все ссылки с class='group' тоже будут открываться через Fancybox. Они могут быть объединены в группу (слайдшоу) со сквозной навигацией, настройки которой и описаны. Т.е. открываете одну картинку из списка и мотаете фотографии вперед-назад стрелочками. Очень удобно. Можно делать несколько "групп" фотографий на одной странице, например для нескольких фотогалерей. Для этого в ссылках необходимо генерировать rel='XYZ', где XYZ - это уникальной идентификатор галереи. В случае NetCat для создания rel можно воспользоваться разными переменными, например $f_RowNum или $f_RowID. Подробности в нашем решении Фотогалерея для NetCat с пакетной загрузкой файлов.

Евгений — 2012-05-08, 11:58

все ссылки с ИД???
РТФМ!!!

Спасибо за замечание, но... Вот почему бы найдя ошибку не описать ее словами, чтобы всем было понятно? Нет, надо бросить вопросительных и восклицательных знаков и сленговых словечек, из которых непосвященному непонятно ровным счетом ничего. Anyway, fixed.

Finar.

Евгений — 2012-05-12, 15:21

А и не надо это знать не посвященным, хотя они могут и загуглить не понятное слово.
А уж тем более аббревиатуру RTFM : )
Таким тоном по тому-что ошибка очень детская и не техническая, а допущена(по ходу) по не знанию..

Тем самым вводя в заблуждение тех самых не посвященных пользователей.

и это мне напомнило нашего препода по паскалю на первом курсе, он всегда давал коды с глупыми ошибками, ощущение складывалось что он их не тестил.

Если вы проверите код, то убедитесь, что он рабочий. Так что ошибка как раз таки "теоретическая", никак в данном случае на функциональность не влияющая (в отличие от примера с паскалем). Не думаю, что имеет смысл рассказывать тут, откуда растут ее ноги, но "так уж получилось". Я вам благодарен за указание ошибки, но остаюсь при мнении, что конструктивнее помогать, чем свысока ругать.

Finar.

Вячеслав — 2012-10-05, 15:08

Так же не забываем потом открыть на редактирование файл /images/phph-fancybox/jquery.fancybox-1.3.4.css и вставить в него следущее/либо отредактировать поля background-image: url('/images/phph-fancybox/*.*'); т.к. это "внутреннее правило NetCat писать в css относительные пути к файлам".

CSS-код от Вячеслава

/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 *
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
 *
 * Version: 1.3.4 (11/11/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */


#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: -20px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1104;
    display: none;
}

#fancybox-loading div {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 480px;
    background-image: url('/images/phph-fancybox/fancybox.png');
}

#fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    display: none;
}

#fancybox-tmp {
    padding: 0;
    margin: 0;
    border: 0;
    overflow: auto;
    display: none;
}

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

#fancybox-outer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}

#fancybox-content {
    width: 0;
    height: 0;
    padding: 0;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1102;
    border: 0px solid #fff;
}

#fancybox-hide-sel-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1101;
}

#fancybox-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: transparent url('/images/phph-fancybox/fancybox.png') -40px 0px;
    cursor: pointer;
    z-index: 1103;
    display: none;
}

#fancybox-error {
    color: #444;
    font: normal 12px/20px Arial;
    padding: 14px;
    margin: 0;
}

#fancybox-img {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    line-height: 0;
    vertical-align: top;
}

#fancybox-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

#fancybox-left, #fancybox-right {
    position: absolute;
    bottom: 0px;
    height: 100%;
    width: 35%;
    cursor: pointer;
    outline: none;
    background: transparent url('/images/phph-fancybox/blank.gif');
    z-index: 1102;
    display: none;
}

#fancybox-left {
    left: 0px;
}

#fancybox-right {
    right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
    position: absolute;
    top: 50%;
    left: -9999px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    cursor: pointer;
    z-index: 1102;
    display: block;
}

#fancybox-left-ico {
    background-image: url('/images/phph-fancybox/fancybox.png');
    background-position: -40px -30px;
}

#fancybox-right-ico {
    background-image: url('/images/phph-fancybox/fancybox.png');
    background-position: -40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
    visibility: visible; /* IE6 */
}

#fancybox-left:hover span {
    left: 20px;
}

#fancybox-right:hover span {
    left: auto;
    right: 20px;
}

.fancybox-bg {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    width: 20px;
    height: 20px;
    z-index: 1001;
}

#fancybox-bg-n {
    top: -20px;
    left: 0;
    width: 100%;
    background-image: url('/images/phph-fancybox/fancybox-x.png');
}

#fancybox-bg-ne {
    top: -20px;
    right: -20px;
    background-image: url('/images/phph-fancybox/fancybox.png');
    background-position: -40px -162px;
}

#fancybox-bg-e {
    top: 0;
    right: -20px;
    height: 100%;
    background-image: url('/images/phph-fancybox/fancybox-y.png');
    background-position: -20px 0px;
}

#fancybox-bg-se {
    bottom: -20px;
    right: -20px;
    background-image: url('/images/phph-fancybox/fancybox.png');
    background-position: -40px -182px;
}

#fancybox-bg-s {
    bottom: -20px;
    left: 0;
    width: 100%;
    background-image: url('/images/phph-fancybox/fancybox-x.png');
    background-position: 0px -20px;
}

#fancybox-bg-sw {
    bottom: -20px;
    left: -20px;
    background-image: url('/images/phph-fancybox/fancybox.png');
    background-position: -40px -142px;
}

#fancybox-bg-w {
    top: 0;
    left: -20px;
    height: 100%;
    background-image: url('/images/phph-fancybox/fancybox-y.png');
}

#fancybox-bg-nw {
    top: -20px;
    left: -20px;
    background-image: url('/images/phph-fancybox/fancybox.png');
    background-position: -40px -122px;
}

#fancybox-title {
    font-family: Helvetica;
    font-size: 12px;
    z-index: 1102;
}

.fancybox-title-inside {
    padding-bottom: 10px;
    text-align: center;
    color: #333;
    background: #fff;
    position: relative;
}

.fancybox-title-outside {
    padding-top: 10px;
    color: #fff;
}

.fancybox-title-over {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #FFF;
    text-align: left;
}

#fancybox-title-over {
    padding: 10px;
    background-image: url('/images/phph-fancybox/fancy_title_over.png');
    display: block;
}

.fancybox-title-float {
    position: absolute;
    left: 0;
    bottom: -20px;
    height: 32px;
}

#fancybox-title-float-wrap {
    border: none;
    border-collapse: collapse;
    width: auto;
}

#fancybox-title-float-wrap td {
    border: none;
    white-space: nowrap;
}

#fancybox-title-float-left {
    padding: 0 0 0 15px;
    background: url('/images/phph-fancybox/fancybox.png') -40px -90px no-repeat;
}

#fancybox-title-float-main {
    color: #FFF;
    line-height: 29px;
    font-weight: bold;
    padding: 0 0 3px 0;
    background: url('/images/phph-fancybox/fancybox-x.png') 0px -40px;
}

#fancybox-title-float-right {
    padding: 0 0 0 15px;
    background: url('/images/phph-fancybox/fancybox.png') -55px -90px no-repeat;
}

/* IE6 */

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_close.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_nav_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_title_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
    height: expression(this.parentNode.clientHeight + "px");
}

#fancybox-loading.fancybox-ie6 {
    position: absolute; margin-top: 0;
    top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
}

#fancybox-loading.fancybox-ie6 div  { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_loading.png', sizingMethod='scale'); }

/* IE6, IE7, IE8 */

.fancybox-ie .fancybox-bg { background: transparent !important; }

.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/phph-fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }

Блог

Что с Мастерхостом? Когда заработает?!

Этот вопрос всё чаще задают в Интернете начиная примерно с 12:00 дня 2 марта. А всё потому, что он накрылся!

далее

Автоматизированная Система Управления Бэкапами

Автоматизированная Система Управления Бэкапами позволяет добиться полного контроля над резервными копиями сайтов внутри инфраструктуры веб-студии. Если вы поддерживаете десятки сайтов на разных хостингах, без подобной системы вы не можете быть на 100% уверены в том, что каждый из них был корректно зарезервирован прошлой ночью.

далее

WebSocket: интеграция с NetCat

Хотите добавить на сайт под управлением CMS NetCat поддержку технологии WebSocket? Обращайтесь к нам! Посетители сайта смогут получать мгновенные уведомления о событиях сайта без обращений к серверу и перезагрузок страниц. Превратите свой сайт в интерактивную площадку, работающую в реальном времени!

далее

NetCat: техническая поддержка и доработка сайтов

Мы работаем с CMS NetCat уже больше 10 лет. У нас большой опыт и ответственный подход к делу.

далее

Весь блог тут