Фотоальбом, оформление картинок, поз. относительно родителя
|
|
|
2012-05-03Дата: Четверг, 03.05.2012, 12:55 | Сообщение # 1 |
Генерал-майор
Группа: Пользователи
Статус: Offline
|
Привет. Вчера мудохался пол ночи! Прошу потом удалить эту тему (чтобы избежать неприятностей). Есть на юкозе дебильная админ. реклама: как отодвинуть от неё фото пикселей на 20 вниз? Стилями можно? Проблем из-за этого не будет?
Исходник: Code <table border="0" width="100%" cellspacing="1" cellpadding="2"> <tr><td colspan="2" align="center"></td></tr> <tr><td colspan="2" align="center"><div id="ad6ba04efc36fc00ff451ebf23d1939a2"><div id="ads_games_parent9080" align="center" style="margin-bottom:4px;position:relative;zoom:1;"><style type="text/css">.adv-close {background: #b6b6b6 !important;padding: 0 8px !important;margin:0 0 4px 0 !important;font: 9px/15px 'Tahoma', 'Arial' !important;color: #fff !important;text-decoration: none !important;text-transform: uppercase;border-radius: 3px;display:inline-block;} .adv-close span {background: url(http://s62.ucoz.net/ucoz/img/uads/adv-close.png) no-repeat right center; padding: 0 13px 0 0 !important;cursor: pointer;} .adv-remove {display: block;text-align:center !important;background: url(http://s62.ucoz.net/ucoz/img/uads/a-buttons-logged.gif) repeat-x !important;padding: 0 10px !important;margin:0 !important;font: bold 9px/18px 'Tahoma', 'Arial' !important;color: #fff !important;text-decoration: none !important;text-transform: uppercase;border-radius: 0 0 3px 3px;} .adv-remove span {cursor: pointer;}</style><div id="ads_games_9080" onclick="window.open('http://u.to/SL9eAQ')" style="cursor:pointer;height:108px; background:url('http://s62.ucoz.net/ucoz/img/uads/ru/ogame1.jpg') no-repeat; background-repeat:none;max-width:728px; margin:auto;"><div style="position:related;top:0;left:0;text-align:right;cursor:pointer;" onclick="$(this).parent().hide();event.stopPropagation();"><a href="#" class="adv-close"><span>Закрыть</span></a></div><div style="position:related;top:0px;left:0px;text-align:left;margin-top:72px;cursor:pointer;" onclick="event.stopPropagation();"><a href="javascript://" onclick="new _uWnd('UBROWSERDOWNLOAD','Отключение рекламы',-550,-400,{resize:0,autosize:0,align:'justify'},{url:'http://s0.ucoz.net/cgi/ucozads.fcg?a=payform_p0',type:'GET',data:'',timeout:20000,dataType:'jsonp',success:function(data){if(this.wnd>0 && _uWnd.all[this.wnd]) _uWnd.all[this.wnd].content(data.PAYFORM);}});return false;" title="Отключить рекламу на всех сайтах системы uCoz" class="adv-remove"><span>Убрать рекламный баннер</span></a></div></div><div style="padding-top:1px"><a href="javascript://" onclick="new _uWnd('getpro','Премиум аккаунт',550,200,{resize:0,autosize:1,closeonesc:1,align:'justify'},{url:'/index/90-21'});return false;">Убрать рекламу на сайте</a></div></div><script type="text/javascript"> function resizeAdv(par1, par2) { if ($.browser.msie) { $('#' + par1).wrap($('<div></div>').css('text-align', 'center')).css('width', '728px'); $(window).bind('resize load', function () { $('#' + par1).css('width', $('#' + par2).width() > 728 ? "728px" : "100%"); }); } } $(resizeAdv('ads_games_9080','ads_games_parent9080')); </script></div><div><script type="text/javascript" src="http://s62.ucoz.net/cgi/uutils.fcg?a=ucozads_isoff&s=bandjuk.ucoz.ru"></script></div><script type="text/javascript" src="http://s62.ucoz.net/src/photo.js?2"></script> <script type="text/javascript"> var timerid=setInterval("check_pLoad()",100); function check_pLoad(){ var pw=document.getElementById('phtmSpan35'); var ph=document.getElementById('phtmDiv35'); if (!pw || !ph){clearInterval(timerid);return;} if (ph.offsetHeight<100)return; clearInterval(timerid); onloadFunc(pw.offsetWidth,ph.offsetHeight); } function printtip(p) { var n=p[0].replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'),u=p[1].replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); if(u) return '<a href="'+u+'" target="_blank">'+n+'</a>'; return n; } function onloadFunc(w,h) {window._phgui=new _uPhotoGUI('p739191415',w,h,[],{tipfunc:printtip,addfunc:appendfriend,edit:1,delfunc:removefriend,startbut:'showbut1',stopbut:'hidebut1',addwndtitle:'Добавить имя',addwndcont:'<table border=\"0\" cellpadding=\"1\" cellspacing=\"2\" width=\"100%\">\n<tr><td width=\"5%\" nowrap>Имя <span class=\"myWinError\">*</span>:</td><td><input style=\"width:140px\" id=\"newpName\" maxlength=\"30\"></td></tr>\n<tr><td nowrap>Сайт:</td><td><input style=\"width:140px;\" id=\"newpUrl\" maxlength=\"100\"></td></tr>\n<tr><td></td><td>\n<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" onmousedown=\"this.className=\'downBtn\'\" onmouseover=\"this.className=\'overBtn\'\" onmouseout=\"this.className=\'outBtn\'\">\n<tr>\n<td class=\"myBtnLeft\"><img alt=\"\" border=\"0\" src=\"http://s62.ucoz.net/img/1px.gif\"></td>\n<td class=\"myBtnCenter\"><div class=\"myBtnCont x-unselectable\" unselectable=\"on\" onclick=\"doappendframe();\"><a href=\"javascript://\" onclick=\"return false;\">Добавить</a></div></td>\n<td class=\"myBtnRight\"><img alt=\"\" border=\"0\" src=\"http://s62.ucoz.net/img/1px.gif\"></td>\n<td style=\"visibility:hidden;\"></td>\n</tr>\n</table>\n </td></tr>\n</table>',addwndw:-200,addwndh:-80,showdialog:onshowdialog});} function appendfriend(gidx,idx,par,editmode,init) { var l=$('#framelist1')[0]; if(init) l.innerHTML=''; if(!par)return; $('#onPhotoList').css('display',''); if(l.innerHTML.length>5)l.innerHTML+='<span class="sprPhtN">, </span>'; var n=par[0].replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); l.innerHTML+='<span onmouseover="var a=_uPhotoGUI.all['+gidx+'];if(a)a.showpart('+idx+',1);" onmouseout="var a=_uPhotoGUI.all['+gidx+'];if(a)a.hidetip();">'+n+'<a href="javascript://" rel="nofollow" onclick="var a=_uPhotoGUI.all['+gidx+'];if(a)a.delpart('+idx+',this.parentNode);sendMarks();return false;"><img border="0" onmouseover="this.src=\'http://s62.ucoz.net/img/fr/OmnD_.gif\'" onmouseout="this.src=\'http://s62.ucoz.net/img/fr/OmnD.gif\'" src="http://s62.ucoz.net/img/fr/OmnD.gif" title="Удалить" width="15" height="15" align="absmiddle"></a></span>'; }
function sendMarks(gidx){ var mm=[],m,tarr,t,o=window._phgui,i,arr=o.frames,j; for (i=0;i<arr.length;i++) { if(!arr[i]) continue; m=''; for(j=0;j<4;j++) { t=arr[i][j]; t/=(j==0 || j==2) ? o.width : o.height; t=(t>=1?0.9999:(t<0?0:t)); m+=''+Math.floor(t*10000)+'|'; } tarr=arr[i][4]; if(tarr) for(j=0;j<tarr.length;j++) m+=tarr[j].replace(/\|/g,'|')+'|'; mm.push(m); } _uPostForm('',{type:'POST',url:'http://bandjuk.ucoz.ru/photo/',data:{marks:mm,id:'4',a:8}}); }
function removefriend(idx,param) { if(param && param.parentNode){ var pn=param.parentNode; if (param.previousSibling && param.previousSibling.className=="sprPhtN") param.parentNode.removeChild(param.previousSibling); else if(!param.previousSibling && param.nextSibling && param.nextSibling.className=="sprPhtN")param.parentNode.removeChild(param.nextSibling); param.parentNode.removeChild(param); if(pn.childNodes.length==0)$('#onPhotoList').css('display','none'); } } function doappendframe() { var n=$('#newpName').val(),u=$('#newpUrl').val(); if(n.length<1) {window._phgui.startedit();return;} if (u && !u.match(/^http:/i))u='http://'+u; window._phgui.addframe([n,u]); $('#newpName,#newpUrl').val(''); sendMarks(); } function onshowdialog(gui,wnd) { $("#newpName")[0].focus(); }
</script><div id="phtmDiv35"><span id="phtmSpan35"><img alt="Фотография 1" id="p739191415" border="0" src="http://bandjuk.ucoz.ru/_ph/1/2/739191415.jpg" /></span></div><div id="hidebut1" style="display:none;padding:3px;"><div class="xw-tl"><div class="xw-tr"><div class="xw-tc xw-tsps"></div></div></div><div class="xw-ml"><div class="xw-mr"><div class="xw-mc" style="padding:5px">Выделите объекты на изображении и присвойте им названия. [<a id="savePhtM" href="javascript://" rel="nofollow" onclick="var a=window._phgui;if(a)a.finishedit();return false;" style="text-transform:uppercase;"><b class="myWinSuccess">Закончить</b></a>]</div></div></div><div class="xw-bl"><div class="xw-br"><div class="xw-bc"><div class="xw-footer"></div></div></div></div></div><div id="onPhotoList" style="display:none">На изображении: <span id="framelist1"></span></div></td></tr> <tr><td colspan="2" class="eDetails" style="text-align:center;"><!--<s3177>-->Просмотров<!--</s>-->: 5 | <!--<s5162>-->Размеры<!--</s>-->: 1024x750px/88.8Kb<div style="padding-top:4px;">
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 13:28 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
bandjuk, Quote (bandjuk) Есть на юкозе дебильная админ. реклама: как отодвинуть от неё фото пикселей на 20 вниз? Стилями можно? Да, можно: Code <style type="text/css"> #phtmDiv35{padding-top:20px;} </style>
А что бы не двигать для тех у кого нет рекламы, стили в условие: Code <?if($USER_LOGGED_IN$)?> <style type="text/css"> #phtmDiv35{padding-top:20px;} </style> <?endif?>
Или прямо в коде: Code <div id="phtmDiv35" style="<?if($USER_LOGGED_IN$)?>padding-top:20px;<?endif?>"> ...
Quote (bandjuk) Проблем из-за этого не будет? Нет, не будет. ...
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 13:44 | Сообщение # 3 |
Генерал-майор
Группа: Пользователи
Статус: Offline
|
likbezz, втророй вариант что-то не получился, наверно я не туда вставляю. Хотя хз куда ещё можно? Вот куда его тут ставить? Quote <table border="0" width="100%" cellspacing="1" cellpadding="2"> <tr><td colspan="2" align="center">$PHOTO_DESCR$</td></tr> <tr><td colspan="2"> <span class="eMessage">$PHOTO$<span></td></tr> И ещё сразу задан вопрос тут: Сделал вывод фоток по твоему коду, прописал ширину 300, высоту 185, но фотки разных размеров, некоторые растягиваются и получается не очень! Что можно придумать? И ещё по поводу вывода через информер на главную фотоальбома! Как ты сделал переключатели?
Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 14:21 | | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 14:23 | Сообщение # 4 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
bandjuk, Quote (bandjuk) втророй вариант что-то не получился, наверно я не туда вставляю. Хотя хз куда ещё можно? Шаблон же ты выше выложил - это кусок со страниы материалов и комментариев ... Вот туда, перед
Quote (bandjuk) Что можно придумать? Это сложнее - зафиксировать только по ширине или высоте. Или проверять габариты фотки - если высота больше - то фиксировать по высоте, если то по ширине. ...
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 14:36 | Сообщение # 5 |
Генерал-майор
Группа: Пользователи
Статус: Offline
|
likbezz, а как они это делают системно?
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 14:49 | Сообщение # 6 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
bandjuk, Quote (bandjuk) а как они это делают системно? Фотка обрезается, физически, до нужных пропорций или размера - смотря какие установки в настройках модуля. ...
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 15:23 | Сообщение # 7 |
Генерал-майор
Группа: Пользователи
Статус: Offline
|
likbezz, Quote Это сложнее - зафиксировать только по ширине или высоте. Или проверять габариты фотки - если высота больше - то фиксировать по высоте, если то по ширине. нужен скрипт?
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 15:46 | Сообщение # 8 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
bandjuk, Quote (bandjuk) нужен скрипт? Для чего? проверки размера? - нет, условиями. - выводит размер, формата: 1024x640 - разбиваешь и сравниваешь ... Первое значение - ширина. ...
Например: Код: Code <span class="eMessage">$PHOTO$<span> Стили: Code <style type="text/css"> <?if(substr($PHOTO_SIZE$,0,strpos($PHOTO_SIZE$,'x'))>substr($PHOTO_SIZE$,strpos($PHOTO_SIZE$,'x')+1))?> span.eMessage img{width:300px;height:auto;} <?else?> span.eMessage img{height:180px;width:auto;} <?endif?> </style> ...
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 16:26 | Сообщение # 9 |
Генерал-майор
Группа: Пользователи
Статус: Offline
|
likbezz, а теперь нужно также для высоты - y??? Фотки стали пропорциональными, но некоторые вытянулись по высоте. У меня уже мозг кипит, я нифиг не понял из того, что ты сделал!
Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 16:26 | | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 16:42 | Сообщение # 10 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
bandjuk, Quote (bandjuk) У меня уже мозг кипит, я нифиг не понял из того, что ты сделал! Да, что тут понимать: смотри, проверяем больше ли ширина фотки её высоты: Code <?if(substr($PHOTO_SIZE$,0,strpos($PHOTO_SIZE$,'x'))>substr($PHOTO_SIZE$,strpos($PHOTO_SIZE$,'x')+1))?> Если больше - суём стили такие: Code span.eMessage img{width:300px;height:auto;} Если меньше Такие: Code span.eMessage img{height:180px;width:auto;} Закрываем проверку - осталось только цифры свои поставить ... ...
| | |
|
|
|
2012-05-03Дата: Четверг, 03.05.2012, 17:58 | Сообщение # 12 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
bandjuk, Quote (bandjuk) наверно ты меня изначально не понял! Мне не подходит height:auto;!! Ну так установи фиксированный. ...
☑ Вертикальное и горизонтальное выравнивание по центру относительно родителя ...
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 18:23 | Сообщение # 13 |
Генерал-майор
Группа: Пользователи
Статус: Offline
|
Ага сейчас твой исходник посмотрим!
Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 18:24 | | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 18:24 | Сообщение # 14 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
bandjuk, Что за нах?
Code <div class="tabl_td" style="float:left;margin:3px;padding-top:17px"> <a href="$PHOTO_URL$" title="Название: $PHOTO_NAME$, Просмотры: $REVIEWS$"> <div class="imgRelativBox"> <div class="<?if(substr($PHOTO_SIZE$,0, strpos($PHOTO_SIZE$,'x'))> substr($PHOTO_SIZE$,strpos($PHOTO_SIZE$,'x')+1))?>vertImg<?else?>gorImg<?endif?>"> <img src="<?substr($PHOTO_DIRECT_URL$,0,strpos($PHOTO_DIRECT_URL$,'_ph')+4)?>$CID$/2/<?substr($PHOTO_DIRECT_URL$,-13)?>" alt="$OTHER1$" /></div> </div> </a> <div class="left_f"> <?if($CAT_NAME$)?><a title="Нажмите для перехода в категорию" href="$CAT_URL$" style="color:#333399; font-size:12pt;">$CAT_NAME$</a><?endif?></div><div class="right_f" style="color:#000000; font-size:10pt;">$PHOTO_SIZE$/$PHOTO_WEIGHT$Kb</div> <div style="margin-top:25px;"> <?if($RATING$)?><div align="center"><?$RSTARS$('12','/.s/img/stars/3/12.png','0','float')?></div><?endif?> </div></div>
Code <style type="text/css"> div.imgRelativBox,div.imgRelativBox div{position:relative;vertical-align:middle;text-align:center;} div.imgRelativBox{width:300px;height:185px;overflow:hidden;display:table;background-color:#F00;} div.imgRelativBox div{display:table-cell;} div.imgRelativBox div img{display:inline;vertical-align:middle;} div.imgRelativBox div.gorImg img{width:300px;height:auto;} div.imgRelativBox div.vertImg img{width:auto;height:185px;} </style> <!--[if lt IE 8]> <style type="text/css"> div.imgRelativBox,div.imgRelativBox div{display:block;block;zoom:1;} div.imgRelativBox div{top:50%;left:50%;block;} div.imgRelativBox div img{top:-50%;left:-50%;position:relative;display:block;} </style> <![endif]-->
| | |
|
|
2012-05-03Дата: Четверг, 03.05.2012, 18:41 | Сообщение # 15 |
Генерал-майор
Группа: Пользователи
Статус: Offline
|
likbezz, Антон, не ругайся! Ещё несколько вопросов. 1. Стили в ксс записывать прямо с <!--[if lt IE 8]> или в ксс засунут нельзя? 2. Некоторые фотки отображаются некоректно http://fotki.ucoz.ua/photo/devushki/hd/9-15-0-0-2
Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 18:49 | | |
|