>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Как изменить просмотр фотографий?

Голоса: +1
В моем шаблоне просмотр фотографий крайне неудобен тем, что при нажатии на фото оно открывается как новость в блоге и нет возможности  перелистывать, нужно вернуться назад открыть следующее и опять вернуться ,  - это ужас просто как не удобно и нудно.

Вопрос:  Можно ли в моем шаблоне  прописать такие настройки, чтобы  фотографии в фотоальбоме открывались в окошко в центре экрана в полном размере с возможностью перелистывания между собой , а не на отдельной странице ввиде записи в блоге.
Пожалуйста помогите!!!
Адрес сайта www.eva.moscow
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: +2
 
Лучший ответ

Перейдите в Панель управления - Главная - Фотоальбом - Управление дизайном модуля - Вид фотографий, далее скопируйте код с данной страницы шаблона и предоставьте в теме.

| Автор:
Выбор ответа лучшим | | Автор: masyaeva
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=false">
<title>$MODULE_NAME$ - $SITE_NAME$</title>
<!--[if lt IE 9]>
<script type="text/javascript">
var e = ("header,footer,article,aside,section,nav").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<link rel="stylesheet" href="/css/font-awesome.css">
<link type="text/css" rel="StyleSheet" href="/css/photo.css" />
 
$INCLUDES$
 
</head>
 <body>
 <div id="wrapper">
 <main class="content" role="main">
$GLOBAL_CLEFTER$
<div id="content">
<div class="post-photo" id="photo">
<div class="catbox">
$CATEGORIES$
</div>
$BODY$
<div style="margin: 10px 0;text-align: center;">
$PAGE_SELECTOR$
</div>
</div>
</div>
</main>
<div class="ft-otstp"> </div>
$GLOBAL_BFOOTER$

 </div>
 <script type="text/javascript" src="/js/classie.js"></script>
 <script type="text/javascript" src="/js/photo.js"></script>
 <script type="text/javascript" src="/js/jquery.nicescroll.min.js"></script>
 <script type="text/javascript" src="/js/icons.js"></script>
 <script type="text/javascript" src="/js/scripts.js"></script>
 <script type="text/javascript" src="/js/submenu.js"></script>
 <script type="text/javascript" src="/js/jquery.fitvids.js"></script>
 
</body>
</html>
| Автор:
Это шаблон Главной страницы модуля - Фотоальбом, а нужен именно Вид фотографий - http://i.imgur.com/BUnLiiS.png
| Автор:
<div class="photo" style="background-image: url($FULL_PHOTO_DIRECT_URL$)">
<a class="title" href="$PHOTO_URL$">
<span>
<span class="ttl-cat">$PHOTO_NAME$</span>
<span class="photo-cat">$CAT_NAME$</span>
</span>
</a>
</div>
| Автор:
В данном коде замените переменную $PHOTO_URL$  на $PHOTO_LIGHTBOX_URL$

То есть готовый код должен выглядеть вот так:
<div class="photo" style="background-image: url($FULL_PHOTO_DIRECT_URL$)">
<a class="title" href="$PHOTO_LIGHTBOX_URL$">
<span>
<span class="ttl-cat">$PHOTO_NAME$</span>
<span class="photo-cat">$CAT_NAME$</span>
</span>
</a>
</div>
| Автор:
Спасибо ) Теперь они открываются в полном размере, но все же  без функции  перелистывания.
Но это уже намного лучше чем было. И все же вопрос можно ли добавить  функцию перелистывания?
| Автор:
Да, можно. Перейдите в Панель управления - Главная - Дизайн - Управление дизайном(CSS), далее найдите строки начиная с номера 987 по 1003, вы увидите стили:
.photo .title{
 display:block;
 position:absolute;
 width:100%;
 height:100%;
 top: 0;
 left: -100%;
 opacity: 0;
 text-align: center;
 color: #FFF;
}

.photo:hover .title {
 left:0;
 opacity:1;
 background-color: rgba(34,34,34,0.9);
}

Которые нужно заменить на:
.photo .ulightbox{
 display:block;
 position:absolute;
 width:100%;
 height:100%;
 top: 0;
 left: -100%;
 opacity: 0;
 text-align: center;
 color: #FFF;
}

.photo:hover .ulightbox {
 left:0;
 opacity:1;
 background-color: rgba(34,34,34,0.9);
}

Сохранить.

Далее в виде Виде фотографий модуля фотоальбом, заменить код:
<div class="photo" style="background-image: url($FULL_PHOTO_DIRECT_URL$)">
<a class="title" href="$PHOTO_LIGHTBOX_URL$">
<span>
<span class="ttl-cat">$PHOTO_NAME$</span>
<span class="photo-cat">$CAT_NAME$</span>
</span>
</a>
</div>

На:
<div class="photo" style="background-image: url($FULL_PHOTO_DIRECT_URL$)">
<a class="ulightbox" href="$PHOTO_LIGHTBOX_URL$">
<span>
<span class="ttl-cat">$PHOTO_NAME$</span>
<span class="photo-cat">$CAT_NAME$</span>
</span>
</a>
</div>

Сохранить изменения. Вот и все!
| Автор:
Ура!!!СПАСИБО!!!!!!  :*******)
| Автор:
...