Как-то я писал об эффекте GreyBox. Эффект красивый, но на моем блоге посвященном интересной рекламе, он почему-то корректно не заработал. Долго разбираться не стал, так как такого добра много.
Первым скриптом, который попался мне на глаза, оказался FancyBox. На нем и становил свой выбор.
Плагин FancyBox умеет все то же, что и GreyBox и даже больше. А точнее FancyBox умеет:
- красиво выводить увеличенные изображения;
- подгонять выводимые изображения под размер экрана (нет проблемы, когда изображение не влезает в экран, но иногда на моем нетбуке изображение не увеличивается, так как экран маленький :), но это не так категорично);
- группировать изображения;
- выводить флешролики;
- выводить отдельную web-страницу по URL.
- Загружаем код с сайта разработчика FancyBox.
- В архиве находится директория fancybox, которую следует поместить в корень Вашего сайта и CSS-файл style.css помещаем туда, где лежат Ваши CSS.
- Далее между тегами <HEAD>...<HEAD> помещаем ниже приведенный код: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox();
$("a.zoom1").fancybox({
'overlayOpacity' : 0.7,
'overlayColor' : '#FFF'
});
$("a.zoom2").fancybox({
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500
});
});
</script> - С установкой покончено. Далее в том месте, где нужно вывести изображение помещаем код: <a class="zoom" rel="group" title="Социальная реклама. Реклама, которая заставляет задуматься" href="/images/soz_reklama_1.jpg"><img src="/images/soz_reklama_1_t.jpg" alt="" /></a>
Сразу извиняюсь, но я не могу привести наглядную демонстрацию сего скрипта, так как он конфликтует с ранее установленным скриптом GreyBox. Реализацию скрипта FancyBox можно посмотреть на блоге рекламы.
Интересный факт: Знаете ли Вы, что одна чайная ложечка меда стоила 200 пчелам непрерывной работы от заката до рассвета в течении целого дня. А нам говорят, что рабство отменили, и что дачный поселок Альпийский построили тоже не рабы. Кому верить?
Спасибо за грамотную подачу урока, получилось!
Спасибо огромное. Все работает :)
Иначе и быть не может ;)
у меня почему-то ничего не вышло:((…а вообще хотел GreyBox, но не могу скачать:(( буду признателен если вы мне поможете…
С FancyBox проблем вроде не было. А сайт GreyBox уже доступен
а для совсем новичков можно подробней? между тегами <HEAD>…<HEAD>
это в каком файле? style.css в корне уже есть куда его помещать?
Смотря что за CMS.
Есть куда более легкое (по весу) решение. Этож надо джэкверю тащить на страницу + скрипт fancybox-a.
Решение – www.scriptiny.com/20…. Весит очень немного.
Если никаких финтиплюшек не надо кроме окна , то tinybox – это супер. Задействовал здесь amway24.ru/catalog.p…