Войти через loginza
Закрыть панель

5

мая

2010

Модальные окна facebox

Распечатать статью Разместил: spider. Рубрика WebDesign | 6 коммент. »

Недавно столкнулся с темой использующей модальные окна facebox.
Довольно интересное решение.
Наверное все уже встречали окна типа lightbox – красивые всплывающие окна с картинками. При помощи lightbox можно делать как отдельные картинки , так и целые галереи.
Но есть в этом и один минус – показывать в этих окнах можно только картинки.
Facebox – это такие же всплывающие окна, как и lightbox только с одним большим отличием : загружать в них можно как картинки, так и текст, код, да и вообще почти все что угодно.
Facebox работает на jQuery – т.е. для ее работы необходимо подключить эту библиотеку версии не ниже 1.2.1.
Скачать facebox можно тут.

<script src="/js/jquery.js" type="text/javascript"></script>

Далее подключаем сам скрипт и его стили:

<!-- facebox start  -->
<link href="/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/js/facebox/facebox.js" type="text/javascript"></script>
<!-- facebox end -->

А так же скрипт по которому понятно, что окно должно быть модальным:

<!-- facebox rel=    -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'loading.gif',
close_image   : 'closelabel.gif'
}) 
})
</script>
<!-- facebox rel= end -->

Чтоб вывести произвольный текст модальном окне пишем следующий код:

<a rel="facebox" href="#info">Появление произвольного блока в facebox</a>
<div id="info" style="display: none;">
Ваш текст
</div>

Пример блока :
Появление произвольного текстового блока в facebox

Чтобы загрузить удаленную страничку в модальном окне пишем :

<a rel="facebox" href="remote.html">text</a>

Пример robots.txt в модальном окне

 

3

Мар

2010

Картинки в wordpress

Распечатать статью Разместил: spider. Рубрика WebDesign |

Очень часто при вставке картинок в wordpress возникает ситуация, когда хочется сделать обтекание картинки текстом.
Но когда выбираешь положение картинки слева (справа) текст отображается по нижней границе.
Связано это с тем , что при таком выборе wordpress добавляет стили отображения картинки

.aligncenter
.alignleft
.alignright
.wp-caption

Но многие авторы тем это не учитывают в стандартных таблицах стилей.
Откройте Ваш style.css и посмотрите есть ли описание этих классов.
Скорее всего – нет.
Для красивого отображения заменяем или дополняем таблицу стилей следующими классами:

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Теперь картинка должна смотреться так, как Вы и задумывали.
Если не хотите каждый раз делать отступ можно сразу прописать по 5 px:

.alignleft {
float: left;
margin-right: 5px;
}
.alignright {
float: right;
margin-left: 5px;
}

Вот и все премудрости.

 

С высочайшего разрешения хозяина блога  решил всунуть свои «5 копеек»  и добавить в эту копилку  знаний и  цитадель коллективного разума  пару строк.

Так вот.  Как-то вдруг потребовался  мне редактор PHP кода. Хотелось чтобы был удобный, с кучей наворотов, подсветкой синтаксиса, пошаговой отладкой и остальными  нужными (или не очень) «фенечками».  Ну и наличие русского языка было бы желательно, ибо не овладел еще буржуйским в достаточных количествах.

После некоторых поисков выбор остановился на PHP Expert Editor 4.3 от Ankord Development Group (Украина).

43546 Весьма удобный редактор для  PHP, Perl, Python, HTML, Java Script. Поддержка Utf-8. Можно использовать встроенный  HTTP сервер и внешние, есть проверка синтаксиса PHP, встроенный браузер, FTP клиент с поддержкой SFTP, кодовый и файл эксплорер, настраиваемая подсветка кода, пошаговая отладка и т.д. и т.п.

И что самое интересное – программа бесплатна для пользователей из СНГ, а  товарищам из дальнего зарубежья придется выложить 35 евро.

Но при использовании в связке с Денвером не захотел работать пошаговый  отладчик  Expert Debugger. Просто окно дебаггера оставалось пустым, никаких значений переменных, ни кода, ни ошибок.

После рысканья по инету нашел причину и решил поделиться с вами. Итак:

Как настроить PHP Expert Editor под Денвер :

1.  В папке редактора (у меня это  ’C:\Program Files\PHP Expert Editor 4.3\DBG\PHP_DBG.DLL’)  лежат dll-ки к расширению которых добавлена версия. У меня Денвер 3 и PHP  там имеет версию 5.2.4. Следовательно берем файлик  php_dbg.dll-5.2.x  и копируем в папку с PHP Денвера (уменя это ‘Z:\usr\local\php5\ext’).  После того как скопируете, уберите  -5.2.x из расширения, файлик дожен иметь название php_dbg.dll.

2.  В файле php.ini  (у меня он тут ‘Z:\usr\local\php5′)   найдите строку  extension_dir = Путь к папке  с расширениями дожен быть указан жестко (с именем диска). У меня так:

extension_dir = "Z:\usr\local\php5\ext"

3. Там же в php.ini найдите группу значений Windows Extensions.  Допишите туда такую строку

extension=php_dbg.dll

Обратите внимание – перед строкой не должна стоять точка с запятой как перед  некоторыми другими значениями в этой группе !  Поверьте также чтобы не была закомментирована строка:

extension=php_gd2.dll

4. Добавляем  в php.ini секцию:

[Debugger]
debugger.enabled=on
debugger.profiler_enabled=on

5. Перезапускаем Денвер

6.  Теперь настройки самого редактора :

Настройки-> настройки редактора -> запуск и отладка-> настройки http-сервера: – ставим галку «Использовать внешний HTTP сервер»

-   «Имя   хоста»   –  имя вашего проекта в Денвере  (например  www.mysite)

-   «Root directory» –  я указал путь к папке с проектом ( Z:\home\mysite\www)

Теперь сюда  Настройки-> настройки редактора -> запуск и отладка-> интерпретаторы        скриптов:

- первые две строки – указываем путь к файлам  PHP (у меня это так):

Z:\usr\local\php5\php.exe
Z:\usr\local\php5\php-cgi.exe

6. Вот и все – теперь грузим наш скрипт – указываем точки останова – и поехали!!

И напоследок:  редактор PHP Expert Editor4.3 бесплатен для жителей СНГ,  но для того чтобы получить ключик (серийный номер)  нужно регистрироваться на сайте  разработчиков программы. Для самых ленивых (да простят меня авторы) выкладываю  программу с ключиками:  качайте ЗДЕСЬ или  ЗДЕСЬ Не судите строго – и не бейте ногами )) это мой первый пост.

 
  • FireStats

    • Показано страниц :104009
    • Уникальных посетителей:45839
    • Показано страниц за сутки :310
    • Уникальных посетителей за сутки :166