ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивое всплывание изображений для uCoz

Красивое всплывание изображений для uCoz

Здесь вы можете просто установить на сайт оригинальное и Красивое всплывание изображений для uCoz, которое будет трактоваться в двух положениях, и оба они неотразимо по своему эффекту. Можно представить фотоальбом, где вы поставили изображение, и кто то кликнул и там совершенно другое увеличение, которое не такое быстрое, но честно говоря завораживает.
Теперь ближе к теме, вот вот закончил тестировать эффективное всплывания изображений для реализации на сайты системы uCoz. Когда я нашёл данный эффект на другой CMS мне оно сразу понравилось, но что бы реализовать на сайт uCoz мне пришлось очень много попотеть но я справился и результат меня радует.

Эффектное всплывание изображений для сайтов Ucoz

Предоставлю вам два варианта эффектов я их реализовал в модуль фотоальбом и сделал вид материалов фотоальбома, но вы если захотите можете переделать под другой любой модуль который вам нужен.

И так давайте приступим к установки !

Вид материалов фотоальбома

Вставьте ниже приведённый код в вид материала фотоальбома.

Код

<ul class="lb-album">
  <li>
  <a href="#$FULL_PHOTO_DIRECT_URL$">
  <img src="$FULL_PHOTO_DIRECT_URL$" width="150" height="150">
  <span><img src="/img/zuma.png" style="margin: 73px auto;" border="0" alt="" /></span>
  </a>
  <div class="lb-overlay" id="$FULL_PHOTO_DIRECT_URL$">
  <a href="#page" class="lb-close">x Close</a>
  <a href="$PHOTO_URL$"><img src="$FULL_PHOTO_DIRECT_URL$"/></a>
  <div>
  <p><a href="$PHOTO_URL$">$PHOTO_NAME$</a></p>
  </div>
  </div>
  </li>
</ul>

Данный вид материала идёт и для первого примера и для второго!

Теперь установим стили вариантов эффектов

Пример эффекта №1

Вставьте стили которые я указал ниже в самый низ стилей вашего сайта и сохраните их.

Код

.lb-album li{
  list-style:none;
  float: left;
  margin: 5px;
  position: relative;
}
.lb-album li > a,
.lb-album li > a img{
  display: block;
}
.lb-album li > a{
  width: 150px;
  height: 150px;
  position: relative;
  padding: 10px;
  background: #f1d2c2;
  -webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  -moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 150px;
  color: rgba(27,54,81,0.8);
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  font-size: 24px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
  width: 0px;
  height: 0px;
  position: fixed;
  overflow: hidden;
  left: 0px;
  top: 0px;
  padding: 0px;
  z-index: 99;
  text-align: center;
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
  position: relative;
  color: rgba(27,54,81,0.8);
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  width: 550px;
  margin: 10px auto 0px auto;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  -webkit-transition: opacity 0.3s linear 1.3s;
  -moz-transition: opacity 0.3s linear 1.3s;
  -o-transition: opacity 0.3s linear 1.3s;
  -ms-transition: opacity 0.3s linear 1.3s;
  transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
  padding: 0px 20px;
  width: 200px;
  height: 60px;
}
.lb-overlay div h3{
  font-size: 36px;
  float: left;
  text-align: right;
  border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
  font-size: 16px;
  font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
  font-style: italic;
}
.lb-overlay div h3 span{
  display: block;
  line-height: 6px;
}
.lb-overlay div p{
  text-align: left;
  float: left;
  width: 260px;
}
.lb-overlay a.lb-close{
  background: rgba(27,54,81,0.8);
  z-index: 1001;
  color: #fff;
  position: absolute;
  top: 43px;
  left: 50%;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  width: 50px;
  height: 23px;
  overflow: hidden;
  margin-left: -25px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  -webkit-transition: opacity 0.3s linear 1.2s;
  -moz-transition: opacity 0.3s linear 1.2s;
  -o-transition: opacity 0.3s linear 1.2s;
  -ms-transition: opacity 0.3s linear 1.2s;
  transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
  /* height: 100%; For Opera max-height does not seem to work */
  max-height: 100%;
  position: relative;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
  width: auto;
  height: auto;
  bottom: 0px;
  right: 0px;
  padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
  -webkit-animation: fadeInScale 1.2s ease-in-out;
  -moz-animation: fadeInScale 1.2s ease-in-out;
  -o-animation: fadeInScale 1.2s ease-in-out;
  -ms-animation: fadeInScale 1.2s ease-in-out;
  animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes fadeInScale {
  0% { -webkit-transform: scale(0.6); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
  0% { -moz-transform: scale(0.6); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
  0% { -o-transform: scale(0.6); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
  0% { -ms-transform: scale(0.6); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/*
  100% Height for Opera as the max-height seems to be ignored, not optimal for large screens
  http://bricss.net/post/11230266445/css-hack-to-target-opera
*/
x:-o-prefocus, .lb-overlay img {
  height: 100%;
}

Пример эффекта №2

Если вам второй вариант понравился больше то вставьте вот эти стили в самый низ стилей вашего сайта .

Код

.lb-album li{
  list-style:none;
  float: right;
  margin: 5px;
  position: relative;
}

.lb-album li > a,
.lb-album li > a img{
  display: block;
}
.lb-album li > a{
  width: 150px;
  height: 150px;
  position: relative;
  padding: 10px;
  background: #f1d2c2;
  -webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  -moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
  position: absolute;
  width: 150px;
  height: 150px;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 150px;
  color: rgba(27,54,81,0.8);
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  font-size: 24px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
  width: 0px;
  height: 0px;
  position: fixed;
  overflow: hidden;
  left: 0px;
  top: 0px;
  padding: 0px;
  z-index: 99;
  text-align: center;
  background: rgb(241,210,194);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
  background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
  position: relative;
  color: rgba(27,54,81,0.8);
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  width: 550px;
  margin: 10px auto 0px auto;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
  -webkit-transition: opacity 0.3s linear 1.3s;
  -moz-transition: opacity 0.3s linear 1.3s;
  -o-transition: opacity 0.3s linear 1.3s;
  -ms-transition: opacity 0.3s linear 1.3s;
  transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
  padding: 0px 20px;
  width: 200px;
  height: 60px;
}
.lb-overlay div h3{
  font-size: 36px;
  float: left;
  text-align: right;
  border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
  font-size: 16px;
  font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
  font-style: italic;
}
.lb-overlay div h3 span{
  display: block;
  line-height: 6px;
}
.lb-overlay div p{
  text-align: left;
  float: left;
  width: 260px;
}
.lb-overlay a.lb-close{
  background: rgba(27,54,81,0.8);
  z-index: 1001;
  color: #fff;
  position: absolute;
  top: 43px;
  left: 50%;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  width: 50px;
  height: 23px;
  overflow: hidden;
  margin-left: -25px;
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  -webkit-transition: opacity 0.3s linear 1.2s;
  -moz-transition: opacity 0.3s linear 1.2s;
  -o-transition: opacity 0.3s linear 1.2s;
  -ms-transition: opacity 0.3s linear 1.2s;
  transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
  /* height: 100%; For Opera max-height does not seem to work */
  max-height: 100%;
  position: relative;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
  box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
  width: auto;
  height: auto;
  bottom: 0px;
  right: 0px;
  padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
  -webkit-animation: scaleDown 1.2s ease-in-out;
  -moz-animation: scaleDown 1.2s ease-in-out;
  -o-animation: scaleDown 1.2s ease-in-out;
  -ms-animation: scaleDown 1.2s ease-in-out;
  animation: scaleDown 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
  opacity: 1;
  filter: alpha(opacity=99); /* internet explorer */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes scaleDown {
  0% { -webkit-transform: scale(10,10); opacity: 0; }
  100% { -webkit-transform: scale(1,1); opacity: 1; }
}
@-moz-keyframes scaleDown {
  0% { -moz-transform: scale(10,10); opacity: 0; }
  100% { -moz-transform: scale(1,1); opacity: 1; }
}
@-o-keyframes scaleDown {
  0% { -o-transform: scale(10,10); opacity: 0; }
  100% { -o-transform: scale(1,1); opacity: 1; }
}
@-ms-keyframes scaleDown {
  0% { -ms-transform: scale(10,10); opacity: 0; }
  100% { -ms-transform: scale(1,1); opacity: 1; }
}
@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}
/*
  100% Height for Opera as the max-height seems to be ignored, not optimal for large screens
  http://bricss.net/post/11230266445/css-hack-to-target-opera
*/
x:-o-prefocus, .lb-overlay img {
  height: 100%;
}

Теперь скачайте архив и загрузите папку img в файловый менеджер вашего сайта , данная папка с картинкой так же идёт и к первому и ко второму варианту.

09 Октября 2015 Загрузок: 4 Просмотров: 1542 Комментариев: (13)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 13
Порядок вывода комментариев: Canon 09 Октября 2015 01:47¹ 0 И написано нормально на понятном языке, но как начнешь ставить, что то всегда не то выходить, просто второй эффект очень понравился. Сопрано 09 Октября 2015 01:49² 0 Canon, нудно только один раз установить и все потом поймете, здесь так просто не объяснить, делайте как написано, или вы просто не понимаете куда нужно ставить. Canon 09 Октября 2015 01:52³ 0 Trantel, да что тут таить, бывает такое напишут, что и не понять в корень сайта пихать или создавать файл и в него с начало а потом в корень или в низ страницы. Вот здесь я всегда начинаю путаться. Сопрано 09 Октября 2015 01:55⁴ 0 Canon, вы сделайте тестовый сайт для этого, и там настраивайте. И когда все будет отлично, тогда переносите на свой сайт. Или просто зайдите в админ панель и поставите точку не обрата, чтоб можно было вернуться на то место от куда начали, это как виндос с системой, чтоб восстановить. Canon 09 Октября 2015 01:59⁵ 0 Да сейчас можно на тестовом, в свое время делал сайты под тест, все ключи по растерял, а здесь сделал, там не могу в админ панель зайти, хотя знаю и пароль м все нужно, но окна не было. Сопрано 09 Октября 2015 02:02⁶ 0 Так Kosnet вчера закачал скрипт специально для того, чтоб старая форма была, посмотрите здесь и установите и должно все по старому. Canon 09 Октября 2015 02:03⁷ 0 Trantel, но я знаю, но как то время не доходило проверить, вет на основном сайте, все как нужно. AnTron 09 Октября 2015 02:26⁸ 0 Вообще не понимаю зачем вам эти слайдеры или эффекты. Kosten 09 Октября 2015 02:28⁹ 0 Не понимаю также, зачем люди создают сайт, это вас AnTron можно так процитировать. DALMATIN 09 Октября 2015 06:01¹⁰ 0 Я как увидел это чудо в HTML версии и сразу подумал что оно должно быть и у пользователей uCoz. Его можно применять хоть к чему и вид материалов и в страницы самого материала, в общем ваша фантазия и всё в путь! Kosten 09 Октября 2015 07:28¹¹ 0 DALMATIN, так можно требовать и прописать источник как zornet.ru. Шутка, даже когда шаблоны в паблике не когда не требовал, кроме одного раза. DALMATIN 09 Октября 2015 07:36¹² 0 Можно ещё как, я стараюсь искать скрипты и разные коды в html версиях так как они чистые и нет в паблике для ucoz что в свою очередь предаёт уникальность для ресурса. Создавая новый сайт http://web-novichok.ru/ я сразу задавал себе что не буду брать материалы на него с других сайтов где всё для ucoz (если только хорошее) так как нужно что то искать новое а не тысячи кодов одних и тех же всё как под копирку. И поэтому ищу на стороне и адаптирую для ucoz. Kosten 09 Октября 2015 08:01¹³ 0 DALMATIN, там где хорошее описание, уже скопированное, знают что копировать, где так написано, не тронуто.