Как сделать паспорту в фотогалерее
На примере этой фото: 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> » <a href="$MODULE_URL$"><!--<s5169>-->Фотоальбом<!--</s>--></a> <?if($SECTION_NAME$)?>» <a href="$SECTION_URL$">$SECTION_NAME$</a><?endif?> » <a href="$CAT_URL$">$CAT_NAME$</a> » $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>
Помогите, как поставить ссылку что-то на подобии кода "$ссылка на фото$" чтобы само изображение было кликабельно и в то же время имело меньше размер.
Нужно его уменьшить до мобильных размеров, для паспарту, а не как на данный момент - занимает полэкрана,
И еще вопрос, если есть чуть ниже фотографии - кнопочка, посмотреть фото в полном размере, вот как сделать такую же кнопочку только сверху по центру фото - с функцией закрыть?