• 1626
  • 0
  • Автор: http://www.htmldrive.net/
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt

Fancy зум с JQuery или Mootools
1.скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.распаковываем и заливаем в папку с шаблоном
3.в main.tpl перед /head подключаем скрипты

Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/fancyzoom.js"></script>
4.$('#id').fancyZoom(), где ID это идентификатор тега
Код:
<a>
который вы хотели бы увеличить. Тег
Код:
<a>
должн иметь якоря к ID блока с содержимым, которое должно быть увеличено.например:
Код:
<a href="#small_box" id="small">Small Box!</a>
<div id="small_box">
<p>Here is the contents that will appear in the zoom.</p>
</div>
<script type="text/javascript">
$('#small').fancyZoom();
</script>

// other examples
<script type="text/javascript">
$(document).ready(function() {
$('a.fancy').each(function() { $(this).fancyZoom({width:500, height:300});});
$('#small').fancyZoom({scaleImg: true}); // Scales images inside while zooming
$('#medium').fancyZoom({closeOnClick: true}); // Close the zoom by clicking on the contents
// width and height are optional. defaults to css specifications of width and height.
// if width and height are passed in, they override whatever may be in css.
$('#large').fancyZoom({width:600, height:400});
});
</script>
5.Если изображения не в каталоге 'images', вы можете настроить его таким образом:
Код:
<script type="text/javascript">
$(document).ready(function() {
$('#small').fancyZoom({directory: 'http://foobar.com/images/zoom'}); // Нет необходимости в слешах
});
</script>

Можешь почитать и вот эту статейку "Интересная реализация меню для сайта"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Вы нашли что искали?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element