2 августа 2011 в 22:35
Здравствуйте.
Хочу организовать возможность загрузки изображений в ноду. Пробовал через field_node_gallery_image, но там картинки в ноде отображаются просто в ряд снизу вверх. Хотелось бы по другому сделать.
В общем вот
http://forum.kinopoisk.ru/showpost.php?p=2807251&postcount=3726
Хочу сделать подобный просмотр изображений в ноде. Чтобы пользователь, при создании ноды, мог загрузить картинки с жесткого диска, и в созданной ноде они также отображались как на форуме кинопоиске.
Подскажите какой модуль использовать, и как это организовать.
Комментарии
А что тебе мешает для этих картинок float:left задать?
Может этот вариант тебе больше подойдет? http://drupal.org/project/node_gallery
А можно ссылку на пример твоей страницы с выводом?
Так я же написал в сообщении ссылку.
http://forum.kinopoisk.ru/showpost.php?p=2807251&postcount=3726
У меня ничего не получается потому что я еще ничего не делал. Я незнаю с чего начать чтобы реализовать подобное, поэтому и написал сюда... думаю должен быть какой нибудь модуль который реализует подобное. Или подскажи другое решение. Если не знаешь, то просто напиши что не знаешь... и ссылки у меня нету, я на локалхосте.
Тогда скрин в студию, просто не очень понятно о чем речь без наглядного представления
Ты кажется не так понял, или я не так написал:) Просто я в данный момент использую field_node_gallery_image, но я не собираюсь именно через него делать подобный вывод изображений как на кинопоиске. Да и не делается это кажется через node_gallery.
Ты знаешь как организовать подобный вывод изображений в ноде? С помощью какого либо модуля или другим способом? Да или Нет?
Да, СKK + FileField + ImageField и редактирование шаблона ноды
Так пойдёт?
Наводите на картинку, - она плавно увеличивается, всплывает.
Приделывал к BUEditor.
Обычный JQuery + CSS и ничего лишнего.
Если подходит, - приеду с работы отпишусь, как прилепить.
Картинки загружаются напрямую с жесткого диска? Все изображения в миниатюрах стандартизируются (т.е. широкие картинки или высокие подгоняются под одно разрешение)? Возможно сделать чтобы увеличение по щелчку мышки а не при наведении?
Напрямую. Вот скриншот.
С помощью IMCE, т.е. подключаться по FTP мне не требуется. Работает без проблем, чего не скажешь о TinyBrowser с его флэш-загрузчиком.
Вот:
/*
myzoom - CSS-класс, задает внешний вид, рамку и т.п.
500 - скорость анимации, в миллисек., если не ошибаюсь
width,height - ширина и высота картинок.
*/
//Клик, - увеличить картинку
jQuery(function(){
jQuery('.myzoom').click(function(){
jQuery(this).children('img').stop(true,true)
.animate({width:"630px",height:"400px",left:"-63px",top:"0"}, 500);
});
});
//Отвели мышку, - уменьшить картинку
jQuery(function(){
jQuery('.myzoom').mouseout(
function(){
$(this).children('img').stop(true,true)
.animate({width:"240px",height:"155px",left:"0",top:"0"}, 500);
});
});
});
Ну вот и CSS:
div.myzoom {
width : 245px;
height : 155px;
position : relative;
float : left;
margin : 13px;
}
div.myzoom img {
position : relative;
cursor : pointer;
left : 0;
top : 0;
width : 245px;
height : 155px;
}
div.myzoom:hover {
overflow : visible;
visibility : hidden;
}
/* При наведении курсора будет выделяться синей рамкой для нагладности */
div.myzoom:hover img {
visibility : visible;
position : absolute;
z-index : 150;
border : solid 1px blue;
background : #FFF;
}
Работа кода проверена в FF 3.6/5, IE 8, Opera, Chrome.
Как подключать JQuery-скрипты к теме я писал на своём сайтике (info-файл темы подправите).
Чтобы оформить картинки т.о. в ноде пишете (в BUEditor просто кнопку новую добавите):
...картинка
</div>
<div style="clear:both;">
P.S.
То, что вы в 1-й ссылке описали смахивает на LightBox.
По общему принципу без лишнего мудрежа также без проблем прикрепляется к BUEditor.
Я в друпале недавно и еще многого незнаю... Я создал файл скрипта, добавил этот файл в инфо-темы, добавил css-код в css-файле темы.
Только не понял куда это писать?
...картинка
</div>
<div style="clear:both;">
И в новой кнопке Bueditor, в строчку содержимое что писать?
В админке ../admin/settings/bueditor/<Выбранный редактор>.
1-я кнопка для всплывающей картинки (вставить в "Содержание кнопки"). Текст, кот. будет идти после картинки, будет
"обтекать" изображение:
var form = [
{name: 'src', title: 'Image URL', required: true, suffix: E.imce.button('attr_src')},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text', required: true}
];
E.tagDialog('img', form, {title: 'Insert/edit image'}); /* Вывели диалог загрузки картинок */
E.wrapLines('<div class="myzoom">\n', ' ', '\n</div>',' '); /* Добавили между <img src="... наш класс */
2-я кнопка для всплывающей картинки (вставить в "Содержание кнопки"). Текст кот. будет идти после картинки
оттобразится с новой строчки, благодаря
var form = [
{name: 'src', title: 'Image URL', required: true, suffix: E.imce.button('attr_src')},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text', required: true}
];
E.tagDialog('img', form, {title: 'Insert/edit image'}); /* Вывели диалог загрузки картинок */
E.wrapLines('<div class="myzoom">\n', ' ', '\n</div>','<strong><div style="clear:both;"></strong>');
/* Добавили между <img src="... наш класс */
Ну и поле "Значок" прикрепите свои иконки для новых кнопок BUEditor (уже опционально).
Итог. По щелчку по первой кнопке, BUEditor будет в текст ноды вставлять наши дивы, потом вызывать окошко загрузки картинок. Пример работы 1-й кнопки:
<img src="/sites/default/files/files/images/addlanguage2.gif" width="640" height="400" alt="addlanguage2.gif" />
</div>
Пример работы 2-й кнопки:
<img src="/sites/default/files/files/images/addlanguage2.gif" width="640" height="400" alt="addlanguage2.gif" />
</div><div style="clear:both;">
Несмотря на то, что в HTML картинки будут вставляться с реальными width/height, отображаться они будут с фиксированными размерами.
P.S.
Кому интересно про BUEditor я писал тут.
Спасибо за предложенный вариант.
Есть еще у кого варианты? Или это только самому модуль нужно писать?
Решено. Помог модуль Lightbox2.
http://drupal.org/project/lightbox2