Делаем "Фотоблоки"

Tips & tricks

Вводное:
Наверное многие знакомы с возможностью на таких ресурсах как LAM (Lookatme) создавать внутри поста фотоблоки куда помещаются некоторое количество фотографий (чтобы не делать чересчур длинной скатерти). Да, в ЛС уже существует подобная штуковина — Фотосеты, но как отдельный вид поста она не имеет смысла. Сегодня я расскажу вам как сделать эти самые «Фотоблоки».

Нам понадобятся:
1. LiveStreet версии 0.5-0.5.1
2. Шаблон на jQuery
3. Fotoramajs от Артема Поликарпова
4. Прямые руки

Присутпим:
1. Качаем архив с Fotoramajs отсюда fotoramajs.com/

2. Внутри вы обнаружите 2 файла: собственно сама библотека fotorama.js и файл стилей для настройки внешнего вида fotorama.css

3. Подключаем библиотеку (предварительно поместив её в папку js вашего шаблона) в header.tpl вашего шаблона, очень просто 
<script type="text/javascript" src="{cfg name='path.static.skin'}/js/fotorama.js"></script>
и учитываем что у вас также уже должна быть подключена библотека jQuery.

Подключаем css файл
<link href="{cfg name='path.static.skin'}/css/fotorama.css" rel="stylesheet">

4. Теперь идем в настройки jevix.php (папка config) и разрешаем тег div
// вызов метода с параметрами
			array(
				array('cut','a', 'img', 'i', 'b', 'u', 's', 'video', 'em',  'strong', 'nobr', 'code', 'object', 'param', 'embed', 'ls', 'iframe','blockquote','div', 'p','h3','div'),
			),			


array(
				'div',
				array('class')
			),


5. Вуаля, все что нам теперь остается, зайти в редактор, создать новый пост, кликнуть на просмотр html кода (это если у вас tinyMCE), найти нужные вам фотографии (для незнающих тег img) и обьединить в следующий div

<div class="fotorama">
  <img src="1.jpg> <img src="2.jpg"> <img src="3.jpg">
</div>


PS: На все вопросы готов ответить в комментариях, хотя надеюсь они не возникнут :)

37 комментариев

avatar
а почему бы не допиллять стандартный функционал и пульнуть на гитхаб?
avatar
Ну я не программист.
+ в этой библиотеке есть нативные элементы (по типу перелистывания пальцем) и весит она раза в 2 меньше стандартной.
avatar
Чуть не забыл, div надо ещё в начале разрешить:
// вызов метода с параметрами
array(
array('cut','a', 'img', 'i', 'b', 'u', 's', 'video', 'em', 'strong', 'nobr', 'li', 'ol', 'ul', 'sup', 'abbr', 'sub', 'acronym', 'h4', 'h5', 'h6', 'br', 'hr', 'pre', 'code', 'object', 'param', 'embed', 'ls', 'iframe', 'table','td','tr','tbody','th','blockquote','div', 'p','h3','div'),
),
avatar
зачем 2 раза div?
avatar
Сначала вы разрешаете тег, потом условие.
avatar
Будет ли работать на шаблоне «Simple»?
avatar
конечно будет :)
avatar
в любом шаблоне будет.
здесь нет зависимости от шаблона.
avatar
Я как раз собирался встраивать fotorama в ls.

После выполнения описанных вами шагов — у вас слайд начал работать?
Т.к вы подключили только js, а как же сам сss?
<link href="{cfg name='path.static.skin'}/css/fotorama.css" rel="stylesheet">


И вопрос: я хочу сделать слайд со своими настройками, а не со стандартными. Вынес их в /js/setting.js, подключил в header.tpl
<script type="text/javascript" src="{cfg name='path.static.skin'}/js/setting.js"></script>

Содержание файла:
$(function() {
    $('#fotorama').fotorama({
	backgroundColor: '#fff',
	thumbsBackgroundColor: '#fff',
	thumbSize: 64,
	thumbBorderColor: 'yellow',
	thumbBorderWidth: 6,


});
	$('#fotorama').trigger('rescale', [940, 500]);
  });


Настройки так и остались стандартными.
avatar
Все настройки можно править внутри библиотеки.
Я ксс подключал в кофиге, забыл упоминуть добавлю.
avatar
А как править? Можно пример если не сложно? fotorama.js — он же обфусцированный…
Мне нужно просто установить ширину.
avatar
По-моему, не очень кошерно заставлять предлагать пользователю писать таким образом:
<div class="fotorama">
  <img src="1.jpg> <img src="2.jpg"> <img src="3.jpg">
</div>
avatar
топик скорее для разрабов, чем для обычных пользователей.
avatar
если вам это не кошерно делать (при условии что вы и так не используете wysiwyg) то сделайте ребятам адекватную кнопку для оборачивания.
avatar
всегда лучше делать в вашем проекте раздел Поддержка, где можно описать все возможности ресурса, а так же обучение к тому как писать посты. И оборачивание в див не будет сложным для обычных пользователей. Хотя не спорю, что сделать к редакторе специальную кнопку, рядом с «Загрузить фото», что бы газрузив нужное кол-во фотографий, автоматически оборачивались они в DIV
avatar
Было бы на много удобнее, если в фотосетах использовался бы такой фотоблок. Сейчас очень неудобная система, нажимаешь на картинку, тебя перекидывает к миниатюрам, было бы на много логичнее, чтобы при наведении мышки на главную картинку, по стронам появлялись стрелочки, а при нажатии на картинку, она открывалась в jquery окне в увеличенном размере.

Думаю если вы выпустите плагин заменяющий стандартный фотосет на такой блок, большая часть пользователей с проектамин а 0.5.1 купила бы его. Нет?
avatar
Думаю если вы выпустите плагин заменяющий стандартный фотосет на такой блок, большая часть пользователей с проектамин а 0.5.1 купила бы его. Нет?
кое что похожее уже есть в каталоге
avatar
думаю все вопросы касательно платной версии задавать netlanc он сделал liteimage и вроде как его собирался расширять до подобного функционала.
avatar
Это всё доработка обычного топика. Это не нужно в топике уже, нужно доработка фотосета. Потому что пользователи будут путаться, зачем фотосет, когда в топике то же самое можно сделать?
avatar
все вопросы касательно зачем нужен фотосет и тп к разработчикам, я с самого начала считал что фотоблоки оптимальное решение.
avatar
не собирался, а собираюсь )
avatar
Будет возможность как просто вставлять изображения загруженные через мультизагруз в топик, так и кнопка вставить фотоблок?
avatar
будет
avatar
Отлично. Тогда в конфиг плагина не мешало бы встроить функцию отключения фотосета для всех кроме админа. Можно это вырезать в файлах шаблона, но кто-то это не сможет сделать ведь.
avatar
пишите пожелания в топике плагина
avatar
Вот бы плагин увидать.
avatar
Вы сделали мой день, спасибо!!!
avatar
Для кастомной настройки скрипта в header.tpl вашего шаблона добавляем код:


<script language="JavaScript" type="text/javascript">
		    fotoramaDefaults = {
		    caption: true,
		    zoomToFit: false,
		    resize: true,
		    thumbsPreview: true
		}
	</script>
	
        сразу перед :
	{hook run='html_head_end'}


Кастомных настроек очень много: fotoramajs.com/options/
avatar
Как быть с тем, что на сайте фоторамы рекомендуют установить последнюю версию jquery, посмотрел, у нас в 0.5.1 версия 1.6.4.
В связи с этим вопрос: влияет ли как-нибудь наша старая jquery на функционал рамы? Имеет ли смысл скачать и установить свежую jquery, будет ли с ней работать функционал движка?
  • CZon
  • 0
  • ↓
avatar
Видимо это актуально для последней версии фоторамы 2.0.
Ну, а что мешает заменить jquery на новый?
avatar
Как запилить фотораму вместо стандартного фотосета?
avatar
Добрый день, все сделал как указано в топике, но картинки у меня выводятся по-старому. Проверил js и css файлы фоторамы, они подключаются. Но тег div в тексте топика, который должен выглядеть как 
<div class="fotorama">
  <img src="1.jpg> <img src="2.jpg"> <img src="3.jpg">
</div>

выглядит вот так
<div>
  <img src="1.jpg> <img src="2.jpg"> <img src="3.jpg">
</div>

подскажите пожалуйста, почему не определяется класс class=«fotorama» в теге div топика? Во время создания и редактирования топика указываю именно class=«fotorama», а потом уже, при выводе топика, он пропадает.
Спасибо.
avatar
забыл добавить что шаблон simple
avatar
Кто бы это дело для 1.0.1 запили?
avatar
*л
avatar
Поддержу. Есть реализовавшие на 1.0.1?
avatar
есть

netlanc.net/blog/333.html
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.