Главная » 2011 » Октябрь » 15 » Увеличение изображений через плагин imgbox на jQuery (Javascript)
15.10.2011, 22:00

Увеличение изображений через плагин imgbox на jQuery



.

ДЕМО МАТЕРИАЛА

Установка:

После /head на страницах, где будет применяться данный плагин, вставляйте:
Code
<script type="text/javascript" src="/js/jquery.imgbox.pack.js"></script>  
  <style>  
  #imgbox-loading {  
  position: absolute;  
  top: 0;  
  left: 0;  
  background: url('/images/imgbox-spinner.gif') center center no-repeat;  
  cursor: pointer;  
  display: none;  
  z-index: 90;  
  }  

  #imgbox-loading div {  
  background: #FFF;  
  width: 100%;  
  height : 100%;  
  }  

  #imgbox-overlay {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background: #000;  
  display: none;  
  z-index: 80;  
  }  

  .imgbox-wrap {  
  position: absolute;  
  top: 0;  
  left: 0;  
  background: #FFF;  
  display: none;  
  z-index: 90;  
  }  

  .imgbox-img {  
  padding: 0;  
  margin: 0;  
  border: none;  
  width: 100%;  
  height: 100%;  
  vertical-align: top;  
  }  

  .imgbox-close {  
  position: absolute;  
  top: -15px;  
  right: -15px;  
  height: 30px;  
  width: 30px;  
  background: url('/images/imgbox-close.png') top left no-repeat;  
  cursor: pointer;  
  outline: none;  
  }  

  .imgbox-title {  
  padding-top: 10px;  
  font-size: 11px;  
  text-align: center;  
  font-family: Arial;  
  color: #333;  
  display: none;  
  }  

  .imgbox-bg-wrap {  
  position: absolute;  
  padding: 0;  
  margin: 0;  
  display: none;  
  }  

  .imgbox-bg {  
  position: absolute;  
  width: 20px;  
  height: 20px;  
  }  

  .imgbox-bg-n {  
  left: 0;  
  top: -20px;  
  width: 100%;  
  background: url(/images/imgbox-bg-n.png) repeat-x;  
  }  

  .imgbox-bg-ne {  
  right: -20px;  
  top: -20px;  
  background: url(/images/imgbox-bg-ne.png) no-repeat;  
  }  

  .imgbox-bg-e {  
  right: -20px;  
  top: 0;  
  height: 100%;  
  background: url(/images/imgbox-bg-e.png) repeat-y;  
  }  

  .imgbox-bg-se {  
  right: -20px;  
  bottom: -20px;  
  background: url(/images/imgbox-bg-se.png) no-repeat;  
  }  

  .imgbox-bg-s {  
  left: 0;  
  bottom: -20px;  
  width: 100%;  
  background: url(/images/imgbox-bg-s.png) repeat-x;  
  }  

  .imgbox-bg-sw {  
  left: -20px;  
  bottom: -20px;  
  background: url(/images/imgbox-bg-sw.png) no-repeat;  
  }  

  .imgbox-bg-w {  
  left: -20px;  
  top: 0;  
  height: 100%;  
  background: url(/images/imgbox-bg-w.png) repeat-y;  
  }  

  .imgbox-bg-nw {  
  left: -20px;  
  top: -20px;  
  background: url(/images/imgbox-bg-nw.png) no-repeat;  
  }  
  </style>  
  <style type="text/css">  
  #images a {  
  margin-right: 14px;  
  }  

  #images a img {  
  border: 1px solid #888;  
  padding: 3px;  
  vertical-align: top;  
  }  

  #credit {  
  clear: both;  
  margin-top: 50px;  
  padding-top: 20px;  
  font-size: 10px;  
  border-top: 1px solid #BBB;  
  font-family: Verdana;  
  }  
  </style>  
  <script type="text/javascript">  
  $(document).ready(function() {  
  $("#example1-1").imgbox();  

  $("#example1-2").imgbox({  
  'zoomOpacity' : true,  
  'alignment' : 'center'  
  });  

  $("#example1-3").imgbox({  
  'speedIn' : 0,  
  'speedOut' : 0  
  });  

  $("#example2-1").imgbox({  
  'speedIn' : 0,  
  'speedOut' : 0,  
  'alignment' : 'center',  
  'overlayShow' : true,  
  'allowMultiple' : false  
  });  
  });  
  </script>

Здесь предоставлено четыре различных настройки плагина для четырёх различных ID: example1-1, example1-2, example1-3 и example2-1. Для того, чтобы понять, о чём я говорю, необходимо хотя бы поверхностно знать jQuery

Далее прописываем сами картинки (Обратите внимание на ID, который применяется для каждого эффекта):

1) Эффект простого увеличения:
Code
<div id="images">  
  <a id="example1-1" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>  
  </div>

2) Эффект увеличения с плавным скроллом:
Code
<div id="images">  
  <a id="example1-2" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>  
  </div>

3) Эффект появления с плавным появлением без скроллом:
Code
<div id="images">  
  <a id="example1-3" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>  
  </div>

4) Эффект появления с затемнением заднего плана:
Code
<div id="images">  
  <a id="example2-1" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>  
  </div>

Ну вроде бы всё разжевал, осталось лишь залить файлы из прикреплённого архива следующим образом: Скрипт - в папку js, картинки - в папку images
Материал взят с сайта infoscript.ru
Теги: Скачать Увеличение изображений через плагин imgbox на jQuery
Скачать "Увеличение изображений через плагин imgbox на jQuery"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: siteforsites.ru
Категория: JavaScript's | Просмотров: 2946 | Добавил: manikom-auto | Рейтинг: 4.0/3 |
Теги: изображений, через, на, Плагин, увеличение, jquery, imgbox
Всего комментариев: 3
1 Dimsan   (16.10.2011 17:08)
Аватар пользователя
а с $PHOTO$ работать будет ??
типа:
<div id="images">
<a id="example1-1" title="" href="$PHOTO_URL$"><img alt="" src="$FULL_PHOTO_DIRECT_URL$ width=170 border=0></a>
</div>

2 SlamCheck   (29.10.2011 21:05)
Аватар пользователя
Увеличивает только одну картинку, остальные открывает в новом окне. Как быть?

+1   Спам
3 summoning   (03.12.2013 13:04)
Аватар пользователя
измени id на class. id может один раз на странице встречаться, class сколько душе угодно

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]