Как заменить стандартный фотосет Фоторамой?

Блог им. kovinev
Добрый вечер.
Надеюсь не утомил своими вопросами по поводу фотосета.
Так вот, думаю многим будет интересно, как заменить стандартный шаблон фотосета Фоторамой.

Если есть такие, кто уже воплотили такое у себя, пожалуйста поделитесь.

Заранее спасибо.

34 комментария

avatar
Действительно оказывается это многим интересно, но предыдущие вопросы пока остались без ответа:
github.com/livestreet/livestreet/issues/80
livestreet.ru/blog/9215.html
avatar
так давайте всё в одной ветке обсуждать, как это сделать.
avatar
У Фоторамы есть ограничения использования, поэтому ее нельзя просто так включить в сборку LiveStreet.
avatar
Ну так она доступна для скачивания. Проблема с лицензией это уже проблема хозяина сайта.
avatar
Она доступна для скачивания для установки на личных сайтах.
Т.е. каждому придется отдельно решать может ли он использовать Фотораму, скачивать ее и устанавливать…
avatar
Короче говоря. Для начала:
1. Скачиваем архив отсюда.
2. Заливаем файл fotorama.css в папку со стилями нашего шаблона (css).
3. Заливаем файл fotorama.js в папку со скриптами нашего шаблона (js).
4. В header.tpl вставляем:

	<link rel="stylesheet" href="/css/fotorama.css">
	<script src="/js/fotorama.js"></script>

5. Редактируем шаблон topic_photoset.tpl.
Вот с этим проблема возникает. Что здесь как заменять?
Мой файл здесь стандартный для фотосета шаблона simple.

    <div class="topic-photo-preview" onclick="window.location='{$oTopic->getUrl()}#photoset'" id="photoset-main-preview-{$oTopic->getId()}">
        {assign var=oMainPhoto value=$oTopic->getPhotosetMainPhoto()}
		<div class="topic-photo-count" id="photoset-photo-count-{$oTopic->getId()}"><span>{$oTopic->getPhotosetCount()}</span></div>
		{if $oMainPhoto->getDescription()}
			<div class="topic-photo-desc" id="photoset-photo-desc-{$oTopic->getId()}">{$oMainPhoto->getDescription()}</div>
		{/if}
		<img src="{$oMainPhoto->getWebPath(500)}" alt="image" id="photoset-main-image-{$oTopic->getId()}" />
	</div>

    {assign var=iPhotosCount value=$oTopic->getPhotosetCount()}
	<div class="content">
	{if $bTopicList}
        {$oTopic->getTextShort()}
        {if $oTopic->getTextShort()!=$oTopic->getText()}
          <a href="{$oTopic->getUrl()}#cut" title="{$aLang.topic_read_more}">
          {if $oTopic->getCutText()}
              {$oTopic->getCutText()}
          {else}
            {$aLang.topic_photoset_show_all|ls_lang:"COUNT%%`$iPhotosCount`"} →
          {/if}
          </a>
        {/if}
    {else}
        {$oTopic->getText()}
    {/if}
	</div>


	{if !$bTopicList}
		<script type="text/javascript" src="{cfg name='path.root.engine_lib'}/external/prettyPhoto/js/prettyPhoto.js"></script>
		<link rel='stylesheet' type='text/css' href="{cfg name='path.root.engine_lib'}/external/prettyPhoto/css/prettyPhoto.css" />
		<script type="text/javascript">
		    jQuery(document).ready(function($) {
		        $('.photoset-image').prettyPhoto({
		               social_tools:'',
		               show_title: false,
		               slideshow:false,
		               deeplinking: false
		        });
		    });
		</script>

		<div class="topic-photo-images">
			<h2>{$oTopic->getPhotosetCount()} {$oTopic->getPhotosetCount()|declension:$aLang.topic_photoset_count_images}</h2>
			<a name="photoset"></a>
			<ul id="topic-photo-images" >
				{assign var=aPhotos value=$oTopic->getPhotosetPhotos(0, $oConfig->get('module.topic.photoset.per_page'))}
				{if count($aPhotos)}
					{foreach from=$aPhotos item=oPhoto}
						<li><a class="photoset-image" href="{$oPhoto->getWebPath(1000)}" rel="[photoset]"  title="{$oPhoto->getDescription()}"><img src="{$oPhoto->getWebPath('50crop')}" alt="{$oPhoto->getDescription()}" /></a></li>
						{assign var=iLastPhotoId value=$oPhoto->getId()}
					{/foreach}
				{/if}
				<script type="text/javascript">
					ls.photoset.idLast='{$iLastPhotoId}';
				</script>
			</ul>
			{if count($aPhotos)<$oTopic->getPhotosetCount()}
				<a href="javascript:ls.photoset.getMore({$oTopic->getId()})" id="topic-photo-more" class="topic-photo-more">{$aLang.topic_photoset_show_more} ↓</a>
			{/if}
		</div>
	{/if}

Я так понимаю собака зарыта в этом коде. Не подскажете что чем здесь заменять?
avatar
Может поможет? livestreet.ru/blog/tips_and_tricks/9578.html
avatar
Смотрел уже данный топик.
Ничего дельного по тому, как заменить стандартный фотосет не было.
avatar
Мануал

        {if !$bTopicList}
                <script type="text/javascript" src="{cfg name='path.static.skin'}/js/fotorama.js"></script>
                <link rel='stylesheet' type='text/css' href="{cfg name='path.static.skin'}/css/fotorama.css" />
                <script type="text/javascript">
                    jQuery(document).ready(function($) {
                        $('.topic-photo-images').fotorama();
                    });
                </script>

                <div class="topic-photo-images">
                        <h2>{$oTopic->getPhotosetCount()} {$oTopic->getPhotosetCount()|declension:$aLang.topic_photoset_count_images}</h2>
                                {assign var=aPhotos value=$oTopic->getPhotosetPhotos(0, $oConfig->get('module.topic.photoset.count_photos_max'))}
                                {if count($aPhotos)}
                                        {foreach from=$aPhotos item=oPhoto}
                                                <a class="photoset-image" href="{$oPhoto->getWebPath(500)}" title="{$oPhoto->getDescription()}"><img src="{$oPhoto->getWebPath('50crop')}" alt="{$oPhoto->getDescription()}" /></a>
                                        {/foreach}
                                {/if}
                </div>
        {/if}

Неужели трудно?
avatar
Спасибо, работает.
Еще вопрос. Как запихнуть туда описание в формате html?
avatar
В вышеприведенном коде, после 
jQuery(document).ready(function($) {
                        $('.topic-photo-images').fotorama();
                    });
добавьте 
fotoramaDefaults = {

	caption: true,

  }
avatar
Есть пример как это в самом ЛС будет выглядеть?
avatar
Такой вот пример есть.
avatar
Собрав информацию из двух топиков я установил фотораму. Но она у меня работает не как надо, верхняя картинка не кликабельна, при просмотре нет описания к картинкам и нет значка «на весь экран». Да мне действительно трудно ее установить, потому что я не программист. И я понял что такие вот топики «с инструкцией» рассчитаны на людей, знающих какой кусок кода куда вставить и что добавить, чтобы получилось то что хотелось. Интересно, найдется ли человек который подробно и полно распишет как установить фотораму, чтобы получилось так как надо?
  • Yra
  • 0
  • ↓
avatar
Очень милая история про «я не программист», но а как вы сайт решили делать без того, чтобы «неподразобраться» в чем-то? Рано или поздно все приходят к тому, что «если хочешь сделать что-то хорошо — сделай это сам».
По поводу фоторамы — Этот комментарий все описывает, за исключением
при просмотре нет описания к картинкам и нет значка «на весь экран»
Для этого нужно добавить функцию с настройками: 
fotoramaDefaults = {
			fullscreenIcon: true,
			caption: true,
			width: 610,
			margin: 0
 		 }

Где fullscreenIcon — добавляет кнопку «на весь экран, caption — добавляет описания ниже блока для фоток, a width — ширина, соответственно.
В итоге, самый простой для вас способ установки фоторамы:
1) Качаете отсюда саму фотораму и заливаете её файлы к себе на хост (2 файла — 1 css и 1 js, css-файл идет в папку css вашего шаблона, а js-файл идет в js папку вашего шаблона).
2) Открываете файл topic_photoset.tpl шаблона и находите примерно такое: 
{if !$bTopicList}
...
{/if}
удаляете его и и меняете на готовый код: 
{if !$bTopicList}
                <script type="text/javascript" src="{cfg name='path.static.skin'}/js/fotorama.js"></script>
                <link rel='stylesheet' type='text/css' href="{cfg name='path.static.skin'}/css/fotorama.css" />
                <script type="text/javascript">
                    jQuery(document).ready(function($) {
                        $('.topic-photo-images').fotorama();
                    });
 		 fotoramaDefaults = {
			fullscreenIcon: true,
			caption: true,
			width: 610,
			margin: 0
 		 }
                </script>
			
                <div class="topic-photo-images">
                                {assign var=aPhotos value=$oTopic->getPhotosetPhotos(0, $oConfig->get('module.topic.photoset.count_photos_max'))}
                                {if count($aPhotos)}
                                        {foreach from=$aPhotos item=oPhoto}
                                                <a class="photoset-image" href="{$oPhoto->getWebPath(500)}" title="{$oPhoto->getDescription()}"><img src="{$oPhoto->getWebPath('50crop')}" alt="{$oPhoto->getDescription()}" /></a>
                                        {/foreach}
                                {/if}
                </div>
	{/if}

Также, для настройки своего дизайна: fotorama__caption-outer — это класс div'a, который отвечает за вывод блока с описанием. Отредактировать его можно в fotorama.css
avatar
Я попробовал так установить — не работает она у меня. Вернул всё обратно.

Это 

fotoramaDefaults = {
                        fullscreenIcon: true,
                        caption: true,
                        width: 610,
                        margin: 0
                 }


добавляется в css скина?
avatar
верхняя картинка не кликабельна
Немного не понял с этим. А как она должна быть кликабельна? В плане, что перебрасывает к фотораме? Если так, то добавьте перед 
{if !$bTopicList}
...
{/if}
это 
<a name="photoset"></a>
avatar
Спасибо большое! Теперь все работает. Единственное я заметил отличия от примера на сайте (ссылка выше). На двух одинаковых изображениях в примере разные описания, то есть там какое то общее описание на верхнем изображении и описание к картинке, на нижнем. А у меня получается что на верхнем изображении просто выводится описание к картинке. Ну и значки другие. Вобщем с эти буду разбираться сам, покопаюсь в настройках самой фоторамы. Единственное, хотелось бы получить компетентный комментарий, плагин Liteimage заменяет фотораму, или планируется ее заменить? Имеется ввиду сделать одно изображение, вместо двух с превью как на фотораме. Спасибо.
avatar
Вот мой код topic_photoset.tpl в шаблоне Social, всё идёт правильно и без ошибок.
{assign var="oBlog" value=$oTopic->getBlog()}
{assign var="oUser" value=$oTopic->getUser()}
{assign var="oVote" value=$oTopic->getVote()}

<script type="text/javascript">
jQuery(window).load(function($) {
	ls.photoset.showMainPhoto({$oTopic->getId()});
});
</script>

<div class="topic photo {if $tSingle}single{/if}">
	<div class="title">
		{if $oBlog->getType() == 'personal'}
			<a href="{$oUser->getUserWebPath()}"><img src="{$oUser->getProfileAvatarPath(48)}" alt="avatar" class="blog-avatar" /></a>
		{else}	
			<a href="{router page='blog'}{$oBlog->getUrl()}/"><img src="{$oBlog->getAvatarPath(48)}" alt="avatar" class="blog-avatar" /></a>
		{/if}
		<a href="{$oBlog->getUrlFull()}" class="title-blog">{$oBlog->getTitle()|escape:'html'}</a>
		/ 
		{if $oTopic->getPublish()==0}	
			<img src="{cfg name='path.static.skin'}/images/draft.png" title="{$aLang.topic_unpublish}" alt="{$aLang.topic_unpublish}" />
		{/if}
		<h1 class="title-topic"><a href="{$oTopic->getUrl()}">{$oTopic->getTitle()|escape:'html'}</a></h1><br />
		<a href="{$oUser->getUserWebPath()}" class="username">{$oUser->getLogin()}</a>, {date_format date=$oTopic->getDateAdd() format="j F Y, H:i"}
		
		<div id="vote_area_topic_{$oTopic->getId()}" class="voting {if $oVote || ($oUserCurrent && $oTopic->getUserId()==$oUserCurrent->getId()) || strtotime($oTopic->getDateAdd())<$smarty.now-$oConfig->GetValue('acl.vote.topic.limit_time')}{if $oTopic->getRating()>0}positive{elseif $oTopic->getRating()<0}negative{/if}{/if} {if !$oUserCurrent || $oTopic->getUserId()==$oUserCurrent->getId() || strtotime($oTopic->getDateAdd())<$smarty.now-$oConfig->GetValue('acl.vote.topic.limit_time')}guest{/if}{if $oVote} voted {if $oVote->getDirection()>0}plus{elseif $oVote->getDirection()<0}minus{/if}{/if}">
			<a href="#" class="minus" onclick="return ls.vote.vote({$oTopic->getId()},this,-1,'topic');"></a>
			<a href="#" class="plus" onclick="return ls.vote.vote({$oTopic->getId()},this,1,'topic');"></a>
			<span id="vote_total_topic_{$oTopic->getId()}" class="total" title="{$aLang.topic_vote_count}: {$oTopic->getCountVote()}">{if $oVote || ($oUserCurrent && $oTopic->getUserId()==$oUserCurrent->getId()) || strtotime($oTopic->getDateAdd())<$smarty.now-$oConfig->GetValue('acl.vote.topic.limit_time')} {if $oTopic->getRating()>0}{/if}{$oTopic->getRating()} {else} <a href="#" onclick="lsVote.vote({$oTopic->getId()},this,0,'topic'); return false;">?</a> {/if}</span>
		</div>
	</div>

    
{assign var=iPhotosCount value=$oTopic->getPhotosetCount()}
	<div class="content">
					
			{if $bTopicList}
			{$oTopic->getTextShort()}
			{if $oTopic->getTextShort()!=$oTopic->getText()}
				<br /><a href="{$oTopic->getUrl()}#cut" title="{$aLang.topic_read_more}">
				{if $oTopic->getCutText()}
					{$oTopic->getCutText()}
				{else}
					{$aLang.topic_photoset_show_all|ls_lang:"COUNT%%`$iPhotosCount`"} →
				{/if}			   
				</a>
			{/if}
		
                    {else}
			{$oTopic->getText()}

		{/if}
	</div> 

	
		<div class="topic-photo-preview" id="photoset-main-preview-{$oTopic->getId()}" onclick="window.location='{$oTopic->getUrl()}#photoset'">
		{assign var=oMainPhoto value=$oTopic->getPhotosetMainPhoto()}
			
	// ФОТОРАМА
		{if !$bTopicList}
                <script type="text/javascript" src="{cfg name='path.static.skin'}/js/fotorama.js"></script>
                <link rel='stylesheet' type='text/css' href="{cfg name='path.static.skin'}/css/fotorama.css" />
				
				
				
                <script type="text/javascript">
                    jQuery(document).ready(function($) {
                        $('.topic-photo-images').fotorama();
                    });
				
					fotoramaDefaults = {
fullscreenIcon: true,
	caption: true,
	width: 610,
	margin: 0
  }
                </script>

																
           <center> <div class="topic-photo-images">
                <h2>{$oTopic->getPhotosetCount()} {$oTopic->getPhotosetCount()|declension:$aLang.topic_photoset_count_images}</h2>
                                {assign var=aPhotos value=$oTopic->getPhotosetPhotos(0, $oConfig->get('module.topic.photoset.count_photos_max'))}
                                {if count($aPhotos)}
                                     {foreach from=$aPhotos item=oPhoto}
                                                <a class="photoset-image" href="{$oPhoto->getWebPath(500)}" title="{$oPhoto->getDescription()}"><img src="{$oPhoto->getWebPath('50crop')}" alt="{$oPhoto->getDescription()}" /></a>
                                        {/foreach}
                                {/if}
                </div>
        {/if}</center>
		// ФОТОРАМА		
				
	</div>
	

	
	{if !$bTopicList}
		<ul class="tags">
			{foreach from=$oTopic->getTagsArray() item=sTag name=tags_list}
				<li><a href="{router page='tag'}{$sTag|escape:'url'}/">{$sTag|escape:'html'}</a>{if !$smarty.foreach.tags_list.last}, {/if}</li>
			{/foreach}	


<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug"></div> 						     
		</ul>
	      {/if}

	
	<ul class="info">
		<li class="comments-link">
			{assign var="comments" value=$aLang.comments_1|cat:";"|cat:$aLang.comments_2|cat:";"|cat:$aLang.comments_3}
			{assign var="count_comments" value=$oTopic->getCountComment()}
			
			{if $bTopicList}<a href="{$oTopic->getUrl()}#comments">
			{if $oTopic->getCountComment()>0}
				{$count_comments} {$count_comments|declension:$comments:'russian'} <span>{if $oTopic->getCountCommentNew()}+{$oTopic->getCountCommentNew()}{/if}</span>
			{else}
				{$aLang.topic_comment_add}
			{/if}
			</a>{/if}
		</li>
		{if !$bTopicList}<li><a href="#" onclick="return ls.favourite.toggle({$oTopic->getId()},this,'topic',true);" class="favourite-inline {if $oUserCurrent && $oTopic->getIsFavourite()}active{/if}">{if $oTopic->getIsFavourite()}{$aLang.fav_delete}{else}{$aLang.fav_add}{/if}</a></li>{/if}

		
		<li class="actions">								   
			{if $oUserCurrent and ($oUserCurrent->getId()==$oTopic->getUserId() or $oUserCurrent->isAdministrator() or $oBlog->getUserIsAdministrator() or $oBlog->getUserIsModerator() or $oBlog->getOwnerId()==$oUserCurrent->getId())}
				<a href="{cfg name='path.root.web'}/{$oTopic->getType()}/edit/{$oTopic->getId()}/" title="{$aLang.topic_edit}" class="edit">{$aLang.topic_edit}</a>
			{/if}
			{if $oUserCurrent and ($oUserCurrent->isAdministrator() or $oBlog->getUserIsAdministrator() or $oBlog->getOwnerId()==$oUserCurrent->getId())}
				<a href="{router page='topic'}delete/{$oTopic->getId()}/?security_ls_key={$LIVESTREET_SECURITY_KEY}" title="{$aLang.topic_delete}" onclick="return confirm('{$aLang.topic_delete_confirm}');" class="delete">{$aLang.topic_delete}</a>
			{/if}
		</li>

		{hook run='topic_show_info' topic=$oTopic}
	</ul>

	{if !$bTopicList}
		{hook run='topic_show_end' topic=$oTopic}
	{/if}
</div>
avatar
Ура! Заработало!
avatar
А кто знает, чтобы работало переключение с клавиатуры?
avatar
А есть уже какое-нибудь готовое решение? Пусть не плагин, а хотябы архив с новыми и измененными файлами, патч, так сказать…
avatar
А как сделать точки вместо превьюшек. Посмотрел пример на сайте проекта — там скрипт в html документе + внешний фоторамовский.
Не понимаю что с этим делать.
avatar
Там есть настройки. Нужно просто включить их.
avatar 
fotoramaDefaults = {
    nav: 'dots',
avatar
Ребят, кто-нибудь разобрался как скрипт фоторамы настраивается?
avatar
все настройки после fotoramaDefaults = {
Вот описание настроек
avatar
Спасибо за ссылку. Разобрался!
avatar
Меня волнует то, что нельзя сохранить картинку ни со стандартного фотосета, н ис фоторамы.
Т.е. если пользователь хочет сохранить картинку, жмет правой кнопкой, там нету «Сохранить картинку как».
avatar
Комрады, как сделать переключение фоторамы с кнопок?
avatar
Тоже интересует как сделать в редакторе кнопочку для фоторамы. Поделитесь опытом.
avatar
Как так сделать? Впихнул только код в topic_photoset с заменой. Изминился функционал фотосета. И все? Я немогу понять что делать с папкой «example»?!
Подскажите. И зачем было В header.tpl вставляеть:

avatar
Так можно гдето вывести Пример?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.