Как сделать паспорту в фотогалерее

голоса: 0

Как сделать паспорту в фотогалерее
На примере этой фото: http://www.elitanochi.ru/photo/45-0-152

Сделать в этом духе:
 
Есть код страницы "Страница с полной фотографией и комментариями":

   <html class="Main"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>$PHOTO_NAME$ - $CAT_NAME$ <?if($SECTION_NAME$)?>- $SECTION_NAME$<?endif?> - $MODULE_NAME$ - $SITE_NAME$</title> <link type="text/css" rel="stylesheet" href="/_st/my.css" /> </head>  <body> $ADMIN_BAR$ <div class="Header"> $GLOBAL_AHEADER$ </div> <div class="Container"> <div class="MainBlock"> <!-- <middle> --> <div class="LeftBlock"> $GLOBAL_CLEFTER$ </div> <div class="RightBlock"><!-- <body> --><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> &raquo; <a href="$MODULE_URL$"><!--<s5169>-->Фотоальбом<!--</s>--></a> <?if($SECTION_NAME$)?>&raquo; <a href="$SECTION_URL$">$SECTION_NAME$</a><?endif?> &raquo; <a href="$CAT_URL$">$CAT_NAME$</a> &raquo; $PHOTO_NAME$  <hr />  <div id="u-photos">  <div class="uphoto-entry">  <h2 class="photo-etitle">$PHOTO_NAME$</h2>  <div class="photo-edescr">  $PHOTO_DESCR$  </div>  <div class="u-center">  <div class="photo-block">  <div class="ph-wrap">  <span class="photo-expand">  $PHOTO$  <?if($FULL_PHOTO_DIRECT_URL$)?><a class="dd-tip ulightbox" href="$FULL_PHOTO_DIRECT_URL$" target="_blank"><i class="expand-ico"></i><!--<s10014>-->В реальном размере<!--</s>--> <b>$PHOTO_SIZE$</b> / $PHOTO_WEIGHT$Kb</a><?endif?>  </span>  </div>  <div class="photo-edetails ph-js-details">  <span class="phd-views">$REVIEWS$</span>  <span class="phd-comments">$COMMENTS_NUM$</span>  <?if($RATING$)?>  <span class="phd-rating">  <span id="entRating$ID$">$RATING$</span>  </span>  <span class="phd-dorating"><?$RSTARS$('14','/.s/img/photopage/rstars.png','1','float')?></span>  <?endif?>  </div>  <hr class="photo-hr" />  <div class="photo-edetails2"> <!--<s10015>-->Добавлено<!--</s>--> $ADD_DATE$ <a class="phd-author" href="$PROFILE_URL$">$USER$</a>  </div>  </div>  <?if($MODER_PANEL$)?><span style="display: block;vertical-align: middle;margin: 10px 0;white-space: nowrap;">$MODER_PANEL$</span><?endif?>  </div>  </div>  <div class="photo-slider u-center">  <?if($OTHER_PHOTOS$)?>$NEAR_PHOTOS$<?endif?>  </div>  </div>  <hr />   <?if($COM_IS_ACTIVE$)?>  <?if($COM_CAN_READ$)?>  <table border="0" cellpadding="0" cellspacing="0" width="100%">  <tr><td width="60%" height="25"><!--<s5183>-->Всего комментариев<!--</s>-->: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>  <tr><td colspan="2">$COM_BODY$</td></tr>  <tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>  <tr><td colspan="2" height="10"></td></tr>  </table>  <?endif?>   <?if($COM_CAN_ADD$)?>  $COM_ADD_FORM$  <?else?>  <?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg"><!--<s5237>-->Добавлять комментарии могут только зарегистрированные пользователи.<!--</s>--><br />[ <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> ]</div><?endif?>  <?endif?>  <?endif?><!-- </body> --></div> <div class="CLR"></div> <!-- </middle> --> </div>  <div class="Footer"> $GLOBAL_BFOOTER$ </div> <script src="/js/Plagin.js"></script> </div> </body> </html> 


Хотелось добавить такого типа код, только куда и за место чего его прописать:

   <html>  <head>   <meta charset="utf-8">   <title>Паспарту</title>   <style>    .passe-partout {     padding: 30px; /* Ширина паспарту */     background: #f0f0f0; /* Цвет фона  паспарту */     border: 2px solid #666; /* Параметры рамки */     }   </style>  </head>  <body>   <p><img src="images/mufta.jpg" alt="Девочка с муфтой" class="passe-partout"></p>  </body> </html>

Помогите, как поставить ссылку что-то на подобии кода "$ссылка на фото$" чтобы само изображение было кликабельно и в то же время имело меньше размер. 
Нужно его уменьшить до мобильных размеров, для паспарту, а не как на данный момент - занимает полэкрана,
И еще вопрос, если есть чуть ниже фотографии - кнопочка, посмотреть фото в полном размере, вот как сделать такую же кнопочку только сверху по центру фото - с функцией закрыть?
 

Адрес сайта http://www.elitanochi.ru/
Закрыто с пометкой: Ответ получен!
| Автор: | Категория: Фотоальбомы
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

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

Замените код:

<div id="u-photos">  <div class="uphoto-entry">  <h2 class="photo-etitle">$PHOTO_NAME$</h2>  <div class="photo-edescr">  $PHOTO_DESCR$  </div>  <div class="u-center">  <div class="photo-block">  <div class="ph-wrap">  <span class="photo-expand">  $PHOTO$  <?if($FULL_PHOTO_DIRECT_URL$)?><a class="dd-tip ulightbox" href="$FULL_PHOTO_DIRECT_URL$" target="_blank"><i class="expand-ico"></i><!--<s10014>-->В реальном размере<!--</s>--> <b>$PHOTO_SIZE$</b> / $PHOTO_WEIGHT$Kb</a><?endif?>  </span>  </div>  <div class="photo-edetails ph-js-details">  <span class="phd-views">$REVIEWS$</span>  <span class="phd-comments">$COMMENTS_NUM$</span>  <?if($RATING$)?>  <span class="phd-rating">  <span id="entRating$ID$">$RATING$</span>  </span>  <span class="phd-dorating"><?$RSTARS$('14','/.s/img/photopage/rstars.png','1','float')?></span>  <?endif?>  </div>  <hr class="photo-hr" />  <div class="photo-edetails2"> <!--<s10015>-->Добавлено<!--</s>--> $ADD_DATE$ <a class="phd-author" href="$PROFILE_URL$">$USER$</a>  </div>  </div>  <?if($MODER_PANEL$)?><span style="display: block;vertical-align: middle;margin: 10px 0;white-space: nowrap;">$MODER_PANEL$</span><?endif?>  </div>  </div>  <div class="photo-slider u-center">  <?if($OTHER_PHOTOS$)?>$NEAR_PHOTOS$<?endif?>  </div>  </div>  <hr />

на:

 <div id="u-photos">
 <div class="uphoto-entry">
 <h2 class="photo-etitle">$PHOTO_NAME$</h2>
 <div class="photo-edescr">
 $PHOTO_DESCR$
 </div>
 <div class="u-center">
<a class="ulightbox" href="<?substr($FULL_PHOTO_DIRECT_URL$,0,strpos($FULL_PHOTO_DIRECT_URL$,"?"))?>"><img style="border: 15px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5);" src="<?substr($PHOTO_URL$,0,strpos($PHOTO_URL$,"?"))?>"></a>
 </div>
 <div align="center"><div class="photo-edetails ph-js-details">
 <span class="phd-views">$REVIEWS$</span>
 <span class="phd-comments">$COMMENTS_NUM$</span>
 <?if($RATING$)?>
 <span class="phd-rating">
 <span id="entRating$ID$">$RATING$</span>
 </span>
 <span class="phd-dorating"><?$RSTARS$('14','/.s/img/photopage/rstars.png','1','float')?></span>
 <?endif?>
 </div> </div>
<div align="center"><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></div>
 <hr class="photo-hr" />
 <div class="photo-edetails2">
<!--<s10015>-->Добавлено<!--</s>--> $ADD_DATE$ <a class="phd-author" href="$PROFILE_URL$">$USER$</a>
 </div>
 </div>
 <div class="photo-slider u-center">
 <?if($OTHER_PHOTOS$)?>$NEAR_PHOTOS$<?endif?>
 </div>
 </div>
 <hr />

И далее в стилях строку номер 92:

#phtmDiv35 img {width:756px!important}

регулируем на что-то подобное:

#phtmDiv35 img { max-width: 400px; height: auto!important; }

вместо 400 пропишите размер для фото. В остальном доработка за вами или на https://upartner.pro/

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk

Вот что получилось:
1. Теперь как заменить эту тень по бокам фото на странице фото, как пример: http://www.elitanochi.ru/photo/45-0-152
Нужно сделать именно рамку "линией" как на фото 2, а на данный момент рамка сделана из тени

2. И хотелось чтобы рамка была и на странице отдельно с фото и на всплывающей странице с фото:


, потому-что на сайте у меня можно смотреть товар и так и так - в двух вариантах ).

3. Как переместить заголовок и описание фото сверху под фото? на странице фотографий во всплывающем окне:
http://www.elitanochi.ru/photo/45?photo=152
и в обычной странице:
http://www.elitanochi.ru/photo/45-0-152

Максим Мякотин,
Да, из тени, или же с помощью https://webref.ru/css/outline. По всему остальному вам на https://upartner.pro/
...