Фильтр по:
  

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Фотоальбомы » Фотоальбом, оформление картинок, поз. относительно родителя (Фотоальбомы, изменение размеров, оформление)
Фотоальбом, оформление картинок, поз. относительно родителя
Дата: Четверг, 03.05.2012, 12:55 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: 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;">


 
Дата: Четверг, 03.05.2012, 13:28 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: 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)
Проблем из-за этого не будет?

Нет, не будет.
...


 
Дата: Четверг, 03.05.2012, 13:44 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: 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, но фотки разных размеров, некоторые растягиваются и получается не очень! Что можно придумать?
И ещё по поводу вывода через информер на главную фотоальбома! Как ты сделал переключатели? wacko wacko wacko wacko wacko


Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 14:21
 
Дата: Четверг, 03.05.2012, 14:23 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bandjuk,
Quote (bandjuk)
втророй вариант что-то не получился, наверно я не туда вставляю. Хотя хз куда ещё можно?

Шаблон же ты выше выложил - это кусок со страниы материалов и комментариев ... Вот туда, перед
Code
</head>


Quote (bandjuk)
Что можно придумать?

Это сложнее - зафиксировать только по ширине или высоте.
Или проверять габариты фотки - если высота больше - то фиксировать по высоте, если то по ширине.
...


 
Дата: Четверг, 03.05.2012, 14:36 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


likbezz, а как они это делают системно?

 
Дата: Четверг, 03.05.2012, 14:49 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bandjuk,
Quote (bandjuk)
а как они это делают системно?

Фотка обрезается, физически, до нужных пропорций или размера - смотря какие установки в настройках модуля.
...


 
Дата: Четверг, 03.05.2012, 15:23 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


likbezz,
Quote
Это сложнее - зафиксировать только по ширине или высоте.
Или проверять габариты фотки - если высота больше - то фиксировать по высоте, если то по ширине.

нужен скрипт?


 
Дата: Четверг, 03.05.2012, 15:46 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bandjuk,
Quote (bandjuk)
нужен скрипт?

Для чего? проверки размера? - нет, условиями.
Code
$PHOTO_SIZE$
- выводит размер, формата: 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>

...


 
Дата: Четверг, 03.05.2012, 16:26 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


likbezz, а теперь нужно также для высоты - y???
Фотки стали пропорциональными, но некоторые вытянулись по высоте.
У меня уже мозг кипит, я нифиг не понял из того, что ты сделал! cry


Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 16:26
 
Дата: Четверг, 03.05.2012, 16:42 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: 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
<?else?>

Такие:
Code
span.eMessage img{height:180px;width:auto;}

Закрываем проверку
Code
<?endif?>

- осталось только цифры свои поставить ...
...


 
Дата: Четверг, 03.05.2012, 16:53 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


likbezz, наверно ты меня изначально не понял! Мне не подходит height:auto;!!
Мне нужно чтобы размеры были строго 300 на 185, и при этом фотка не искажалась, т.е как бы обрезалась что ли wacko wacko wacko wacko wacko wacko wacko wacko


 
Дата: Четверг, 03.05.2012, 17:58 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bandjuk,
Quote (bandjuk)
наверно ты меня изначально не понял! Мне не подходит height:auto;!!

Ну так установи фиксированный.
...

Вертикальное и горизонтальное выравнивание по центру относительно родителя
...


 
Дата: Четверг, 03.05.2012, 18:23 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


Ага сейчас твой исходник посмотрим! smile
Прикрепления: 4492088.png (313.2 Kb)

Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 18:24
 
Дата: Четверг, 03.05.2012, 18:24 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


bandjuk,
Quote (bandjuk)
likbezz,

Что за нах?

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]-->


 
Дата: Четверг, 03.05.2012, 18:41 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


likbezz, Антон, не ругайся! Ещё несколько вопросов.
1. Стили в ксс записывать прямо с <!--[if lt IE 8]> или в ксс засунут нельзя? wacko
2. Некоторые фотки отображаются некоректно http://fotki.ucoz.ua/photo/devushki/hd/9-15-0-0-2


Сообщение отредактировал bandjuk - Четверг, 03.05.2012, 18:49
 
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Фотоальбомы » Фотоальбом, оформление картинок, поз. относительно родителя (Фотоальбомы, изменение размеров, оформление)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия