Фотоальбом от UcoZ + Fancybox
Добавлено: 06 окт 2008, 22:46Итак, хотите, чтобы у вас фотки открывались, как здесь? Тогда устанавливайте следующий скриптик
1. В шаблоны "Главная страница фотоальбома", "Страница со списком фотографий раздела", "Страница со списком фотографий альбома"
а) Подключаем JQuery - между <head> и </head> вставляем
б) Подключаем FancyBox:
2. В "Управление шаблонами (CSS)"
3. В шаблон "Вид материалов"
Если все выполнили правильно, то будет работать как надо
1. В шаблоны "Главная страница фотоальбома", "Страница со списком фотографий раздела", "Страница со списком фотографий альбома"
а) Подключаем JQuery - между <head> и </head> вставляем
- Код: Выделить всё
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
б) Подключаем FancyBox:
- Код: Выделить всё
<script type="text/javascript" src="/fancybox/js/jquery.fancybox.js"></script>
<script type="text/javascript">$(document).ready(function(){ $("a.photolink").fancybox({overlayShow: true}); });</script>
2. В "Управление шаблонами (CSS)"
- Код: Выделить всё
/* Fancybox */
div#fancy_overlay {
position:absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
background-color: #333;
}
div#fancy_loading {
position: absolute;
height: 40px;
width: 40px;
cursor: pointer;
display: none;
overflow: hidden;
background: transparent;
z-index: 100;
}
div#fancy_loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background: transparent url(/fancybox/img/fancy_progress.png) no-repeat;
}
div#fancy_close {
position: absolute;
top: -12px;
right: -12px;
height: 30px;
width: 30px;
background: transparent url(/fancybox/img/fancy_closebox.png) ;
cursor: pointer;
z-index: 100;
display: none;
}
div#fancy_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
z-index: 96;
}
#fancy_frame {
position: relative;
width: 100%;
height: 100%;
display: none;
}
img#fancy_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
padding: 0;
margin: 0;
z-index: 92;
}
div#fancy_title {
position: absolute;
bottom: -35px;
left: 0;
width: 100%;
z-index: 100;
display: none;
}
div#fancy_title table {
margin: 0 auto;
}
div#fancy_title div {
color: #FFF;
font: bold 12px Arial;
padding-bottom: 2px;
}
td#fancy_title_left {
height: 32px;
width: 15px;
background: transparent url(/fancybox/img/fancy_title_left.png) repeat-x;
}
td#fancy_title_main {
height: 32px;
background: transparent url(/fancybox/img/fancy_title_main.png) repeat-x;
}
td#fancy_title_right {
height: 32px;
width: 15px;
background: transparent url(/fancybox/img/fancy_title_right.png) repeat-x;
}
div#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 18px 18px 58px 18px;
margin: 0;
overflow: hidden;
background: transparent;
display: none;
}
div#fancy_inner {
position: relative;
width:100%;
height:100%;
border: 1px solid #444;
background: #FFF;
}
a#fancy_left, a#fancy_right {
position: absolute;
bottom: 10px;
height: 100%;
width: 35%;
cursor: pointer;
background-image: url(data:image/gif;base64,AAAA);
z-index: 100;
}
a#fancy_left {
left: 0px;
}
a#fancy_right {
right: 0px;
}
a#fancy_left:hover {
background: transparent url(/fancybox/img/fancy_left.gif) no-repeat 0% 100%;
}
a#fancy_right:hover {
background: transparent url(/fancybox/img/fancy_right.gif) no-repeat 100% 100%;
}
#fancy_bigIframe, #fancy_freeIframe {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
div#fancy_bg {
display: none;
}
div.fancy_bg {
position: absolute;
display: block;
z-index: 70;
}
div.fancy_bg_n {
top: -18px;
width: 100%;
height: 18px;
background: transparent url(/fancybox/img/fancy_shadow_n.png) repeat-x;
}
div.fancy_bg_ne {
top: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(/fancybox/img/fancy_shadow_ne.png) no-repeat;
}
div.fancy_bg_e {
right: -13px;
height: 100%;
width: 13px;
background: transparent url(/fancybox/img/fancy_shadow_e.png) repeat-y;
}
div.fancy_bg_se {
bottom: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(/fancybox/img/fancy_shadow_se.png) no-repeat;
}
div.fancy_bg_s {
bottom: -18px;
width: 100%;
height: 18px;
background: transparent url(/fancybox/img/fancy_shadow_s.png) repeat-x;
}
div.fancy_bg_sw {
bottom: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(/fancybox/img/fancy_shadow_sw.png) no-repeat;
}
div.fancy_bg_w {
left: -13px;
height: 100%;
width: 13px;
background: transparent url(/fancybox/img/fancy_shadow_w.png) repeat-y;
}
div.fancy_bg_nw {
top: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(/fancybox/img/fancy_shadow_nw.png) no-repeat;
}
/* -------- */
3. В шаблон "Вид материалов"
- Код: Выделить всё
<a title="$PHOTO_NAME$" rel="group1" href="<?if($FULL_PHOTO_DIRECT_URL$)?>$FULL_PHOTO_DIRECT_URL$<?else?>$PHOTO_DIRECT_URL$<?endif?>" class="photolink">$PHOTO$</a>
Если все выполнили правильно, то будет работать как надо
