Главная » Файлы » Прочие скрипты » jQuery

Увеличение изображений через плагин imgbox на jQuery
23.06.14, 08:32:08

Скачать файл




Отличный лёгкий шустро работающий плагин для вашей галереи изображений! Лёгок в настройке и использовании

Для начала посмотрите ДЕМО

Установка:

После /head на страницах, где будет применяться данный плагин, вставляйте:
Код
<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) Эффект простого увеличения:
Код
<div id="images">  
<a id="example1-1" title="" href="Ссылка на увеличенное изображение"><img alt="" src="Ссылка на уменьшенное изображение" /></a>
</div>


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


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


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


Ну вроде бы всё разжевал, осталось лишь залить файлы из прикреплённого архива следующим образом: Скрипт - в папку js, картинки - в папку images

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: JQuery, imgbox, изображений, Через, на, плагин, увеличение
Просмотров: 357 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: