ОсновноеRadiotalkПользовательское
MPCHAT - CMS хостинг чатов для профессионалов
90   •   Посмотреть все темы

Модальные окна для картинок в чате.

 

1163
Денис @Анатолич
Наткнулся на интересный пример модальных окон **********

Хотел узнать, у мастеров по дизайну, можно ли такие окна сделать для показа картинок загружаемых пользователями, в фреймовом чате.

И если можно то как?

Если именно такие окна сложно то может есть какие то решения попроще? Хотя именно это мне показалось самым оригинальным и интересным.

2615
Сергей @Pegass
Анатолич пишет:

Наткнулся на интересный пример модальных окон **********

Хотел узнать, у мастеров по дизайну, можно ли такие окна сделать для показа картинок загружаемых пользователями, в фреймовом чате.

И если можно то как?

Если именно такие окна сложно то может есть какие то решения попроще? Хотя именно это мне показалось самым оригинальным и интересным.

Можно, единственно может возникнуть проблема с картинками загружаемые через ББ-коды, ибо они могут быть огромными и тут надо попариться с написанием скрипта.
Скрипт пишется на jquery понадобится только это **********
и скрипт c определением реального размера картинки назначающийся картинке на обработчик mouseover
<img onmouseover="parent.ImegAlert(this.src);" onload="parent.imgminimum(this)" src="tmp/1333998771.jpg" border="0" width="300" id="22">

function Imegsize(imgurls)
{
var imgUrl = imgurls;
imag.src = imgUrl;
imag.onload=function ()
{
var imgWidth = imag.width;
var imgHeight = imag.height;

//вот сюда вставлять анимацию



}
}

Отредактировано Pegass - 10.04.2012
2615
Сергей @Pegass
Хотя не, не всё так просто, но это основные куски кода полюбому

1163
Денис @Анатолич
бб коды оставил только на шрифт. Картинки можно грузить только кнопкой обзор. так что с размером трудностей быть не должно. Да и папка при таком раскладе получится стандартная.
Проблема только в том как все это состыковать( я такое точно не осилю( не даются мне скрипты хоть убей(

2970
удалён @Foggy
Я бы рекомендовал использовать **********, чтобы картинки увеличивались на весь экран и при щелчке по кнопке закрытия картинки или просто вне картинки, она скрывалась. Метод, который описал Pegass вызовет больше сложностей, чем кажется. Основная проблема будет со скроллом, мне думается.
Анатолич, у тебя есть этот скрипт? Можно его модифицировать, если он стоит, или скрипт от Pegass модифицировать для fancybox.

2615
Сергей @Pegass
Foggy, Ну у меня стоит свой))) проблем нет, только вот от не такой как хочет Анатолич.
Со скроллом проблем не будет точно.

Анатолич, давай определяться, мы буде увеличивать картинку до её реального размера - это я быстро напишу
или же мы всё-таки будем определять размер фрейма сообщений чтобы картинка не оказалась больше?- это сложнее, те более что тестить мне не на чем)))

1163
Денис @Анатолич
Если проще то до реального размера.
Но если ширина и высота будет больше 700, то увеличение прекратить (не обязательно но желательно).
В маленьком размере картинка должна быть не ВЫШЕ 90 пикселов.

Сейчас стоит такой скрипт.

Показать текст

2615
Сергей @Pegass
блин, что-то я туплю третий день подряд - нафига писать свой, если на представленном ресурсе есть исходник?

1163
Денис @Анатолич
Pegass пишет:

блин, что-то я туплю третий день подряд - нафига писать свой, если на представленном ресурсе есть исходник?

Так я спецом и кинул ссылки, чтобы геморроя лишнего не было.
Просто моих скромных познаний в сайтостроительстве и скриптах, не хватает на то, чтобы адаптировать коды для показа картинок в фреймовом чате. Потому и обратился за помощью.

2615
Сергей @Pegass
Я его немного переделал уже, чуть позже выложу

И кстати этот скрипт не создает модального окна, если что))

Отредактировано Pegass - 11.04.2012
87
k4at @k4at
Анатолич пишет:

для показа картинок в фреймовом чате. Потому и обратился за помощью.

Может стоит перейти на дивы?

1163
Денис @Анатолич
k4at пишет:

Анатолич пишет:

для показа картинок в фреймовом чате. Потому и обратился за помощью.

Может стоит перейти на дивы?

а в чем преимущество? при входе в чат загрузится на полсекунды быстрее? Но взамен надо все скрипты переделывать. И не все будут работать корректно.
А может и вовсе не будут работать.

87
k4at @k4at
Вроде вдумчивые и правильные сообщения пишете .. а тут... *рукалицо

1007
BETEPAH @BETEPAH
Анатолич пишет:

k4at пишет:

Анатолич пишет:

для показа картинок в фреймовом чате. Потому и обратился за помощью.

Может стоит перейти на дивы?

а в чем преимущество? при входе в чат загрузится на полсекунды быстрее? Но взамен надо все скрипты переделывать. И не все будут работать корректно.
А может и вовсе не будут работать.

Основное преимущество - возможность более гибко вертеть дизайном.

2615
Сергей @Pegass
такс, в твой скрипт добавляем красное

/* [Функции - общие] */

/* Функция изменения загружаемой картинки */
var id_img = 0;
function imgminimum(obj)
{var imgmax = 90; // максимальный размер картинки
var h = obj.height;
var w = obj.width;
if (h>imgmax||w>imgmax){if (h>w) {obj.height=imgmax}else {obj.height=imgmax}};
if (!obj.id){var scr=parent.chat.document.body;
if(parent.chat.document.compatMode != 'BackCompat')
scr=parent.chat.document.documentElement;
scr.scrollTop=scr.scrollHeight;
obj.id=id_img++;}}


/* [Функция - вывода сообщений и команд] */


}

if (text.split('src=tmp').length>1&&parent.chat.document.getElementById('kartinka').checked) {text=text.replace(/.br..img.src.(tmp.(.+\.jpg)).border.0..br./igm, "<a href=$1 onclick=\"parent.wo(this.href,'','690','500','yes');return false;\" target="+nick+"><img class=expando onload=parent.imgminimum(this) src=$1 border=0></a>");}
else
{text=text.replace(/.br..img.src.(tmp.(.+\.jpg)).border.0..br./igm, "<a href=$1 target=_blank><img src=http://mpchat.com/blank/img/ftp/img.gif border=0>$2</a>")};

в irc.html добавляем в head <script type="text/javascript" src="ССЫЛКА_НА_НАШ_СКРИПТ"></script>

ну и сам скрипт создайте где удобно файл JS со следующим кодом, в отличии от оригинала увеличение останавливается как только одна из сторон достигнет 700px

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);

if (e.ims[i].d && times > e.ims[i].jump){
//alert(e.ims[i].w);
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
if( e.ims[i].im.width > 700 || e.ims[i].im.height>700)
if( e.ims[i].im.width > e.ims[i].im.height)
{
e.ims[i].im.height = e.ims[i].im.height*700/e.ims[i].im.width;
e.ims[i].im.width = 700;
}
else
{
e.ims[i].im.width = e.ims[i].im.width*700/e.ims[i].im.height;
e.ims[i].im.height = 700;
}


e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];

e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}

Отредактировано Pegass - 12.04.2012
2615
Сергей @Pegass
k4at пишет:

Вроде вдумчивые и правильные сообщения пишете .. а тут... *рукалицо

Ну не все же такие хорошие разработчики как вы, у нас знаете ли ручки кривенькие)))

1163
Денис @Анатолич
Pegass,
Вроде все сделал по рецепту( но почему то не работает(

под утро нашел ошибку. Спасибо огромное. Шикарно работает. То что хотел

Отредактировано Анатолич - 12.04.2012
35
Квинт @Квинт
Вот интересная весч) А как сделать, чтоб по щелчку на картинку она в центре появлялась, а не просто увеличивалась при наведении?

2615
Сергей @Pegass
Квинт пишет:

Вот интересная весч) А как сделать, чтоб по щелчку на картинку она в центре появлялась, а не просто увеличивалась при наведении?

руками? 🐱‍👤 🐱‍👤 🐱‍👤

35
Квинт @Квинт
Pegass пишет:

Квинт пишет:

Вот интересная весч) А как сделать, чтоб по щелчку на картинку она в центре появлялась, а не просто увеличивалась при наведении?

руками? 🐱‍👤 🐱‍👤 🐱‍👤

Умник что ли? Объясни тогда!