Страница 1 из 11
Модератор форума: JonMagon 
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » JavaScript » Уменьшение изображения
Уменьшение изображения
Вера2929
Сообщений: 62
Репутация: 6

Сообщение # 1 | 17:24:16
Здравствуйте . Подскажите, как настроить блог,чтобы изображения которые превышают 1000 пикселей имели приблизительно такой вид . Картинка должна быть 1000 пикселей, если она очень большая,а под или над ней,выводилась ссылка"посмотреть в исходную величину",при нажатии на ссылку увеличить,картинка увеличивается
leonoff(on)
Сообщений: 259
Репутация: 62

Сообщение # 2 | 18:03:01
Вера2929, сайт какой у вас? Структуру надо посмотреть

Почему реперы зимой и летом ходят в шапках, но при этом все равно болеют?
Вера2929
Сообщений: 62
Репутация: 6

Сообщение # 3 | 16:46:34
http://moehobbi.ucoz.ru/

Добавлено (03 Мар 2015, 16:46:34)
---------------------------------------------
ну помогите ))

leonoff(on)
Сообщений: 259
Репутация: 62

Сообщение # 4 | 18:10:54
Вера2929, я не нашел ни одной фотографии в блоге более 1000px. И второе, вы же вставляете картинки с яндекс диска. Короче говоря, сделать то, что вы хотите абсолютно не сложно, но мне нужно тогда взглянуть на исходный код шаблонов блога "Вид материалов" и "Страница материала и комментариев к нему". Выложите здесь эти 2 кода и я вам помогу.

Почему реперы зимой и летом ходят в шапках, но при этом все равно болеют?
Вера2929
Сообщений: 62
Репутация: 6

Сообщение # 5 | 07:45:17
ВИД МАТЕРИАЛА

Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$<br/><div style="text-align:center;"><a href="$ENTRY_URL$" title="читать далее $TITLE$"><img alt="" src="http://moehobbi.ucoz.ru/shapki-dalee/0_109a0f_5c61005f_M.png" " /></a></div></div><?endif?><div class="eDetails" style="clear:both;">
<?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','0','float')?></div><?endif?>
<?if($CATEGORY_NAME$)?><a class="e-category" href="$CATEGORY_URL$">$CATEGORY_NAME$</a><span class="ed-sep"> | </span><?endif?>
<span class="e-reads"><span class="ed-title">Просмотров:</span> <span class="ed-value">$READS$</span></span><span class="ed-sep"> | </span>
<?if($AUTHOR_NAME$)?><span class="e-author"><span class="ed-title">Author:</span> <span class="ed-value">$AUTHOR_NAME$</span></span><span class="ed-sep"> | </span><?endif?>
<?if($USERNAME$)?><span class="e-add"><span class="ed-title">Добавил:</span> <span class="ed-value"><a href="$PROFILE_URL$">$USERNAME$</a></span></span><span class="ed-sep"> | </span><?endif?>
<span class="e-date"><span class="ed-title">Дата:</span> <span class="ed-value"title="$TIME$">$DATE$</span></span>
<?if($COMMENTS_URL$)?><span class="ed-sep"> | </span><a class="e-comments" href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>
</div></td></tr></table><br />

Страница материала и комментов к нему

Код
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title></title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>

<body style="background:url('/shapki-dalee/fon.jpg') #362D29; margin:0px; padding:0 1% 0 1%;">
$ADMIN_BAR$

<div style="height:239px;">
<div style="float:left;">
<img src="/shapki-dalee/2222.png" border="0"><img src="" border="0"><img src="" border="0"><img src="" border="0">
</div>
<div style="padding-top:100px;">
<span style="color:#E6D5AA;font:20pt bold Verdana,Tahoma;"></span>
</div>
</div>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="10" height="10"><img src="/.s/t/995/6.gif" border="0"></td><td style="background:url('/.s/t/995/7.gif');"></td><td width="10" height="10"><img src="/.s/t/995/8.gif" border="0"></td></tr>
<tr><td style="background:url('/.s/t/995/9.gif');"></td><td style="background:url('http://moehobbi.ucoz.ru/shapki-dalee/fon_blokov.jpg') #E9D8AD;padding:10px;">

$GLOBAL_AHEADER$

<!-- <middle> -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="width:250px;">

$GLOBAL_CLEFTER$
</td>

<td valign="top" style="padding:0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="15" height="15"><img src="/.s/t/995/17.gif" border="0"></td><td style="background:url('/.s/t/995/18.gif');"></td><td width="10" height="10"><img src="/.s/t/995/19.gif" border="0"></td></tr>
<tr><td style="background:url('/.s/t/995/20.gif');"></td><td style="background:#FFFFFF;padding:10px;"><!-- <body> --><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> » <a href="$MODULE_URL$"><!--<s5208>-->Статьи<!--</s>--></a> <?if($SECTION_NAME$)?>» <a href="$SECTION_URL$">$SECTION_NAME$</a><?endif?> » <a href="$CAT_URL$">$CAT_NAME$</a></td>
<td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?> <a href="$ADD_ENTRY_LINK$"><!--<s5202>--><img alt="" src="http://moehobbi.ucoz.ru/shapki-dalee/novaja-tema.png" /><!--</s>--></a> <?endif?></td>
</tr>
</table>
<hr />
<div class="eTitle" style="padding-bottom:3px;"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>$ENTRY_TITLE$</div>
<table border="0" width="100%" cellspacing="0" cellpadding="2" class="eBlock">
<tr><td class="eText" colspan="2">$MESSAGE$ <?if($SOURCE$)?><br /><br /><!--<s5174>-->Источник<!--</s>-->: <a href="javascript://" rel="nofollow" onclick="window.open('$SOURCE$');return false;">$SOURCE$</a><?endif?></td></tr>
<tr><td class="eDetails1" colspan="2"><?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div><?endif?><span class="e-category"><span class="ed-title"><!--<s3179>-->Категория<!--</s>-->:</span> <span class="ed-value"><a href="$CAT_URL$">$CAT_NAME$</a></span></span><span class="ed-sep"> | </span><span class="e-add"><span class="ed-title"><!--<s3178>-->Добавил<!--</s>-->:</span> <span class="ed-value"><a href="$PROFILE_URL$">$USER$</a> ($ADD_DATE$) </span></span>
<?if($AUTHOR_NAME$)?><span class="ed-sep"> | </span><span class="e-author"><span class="ed-title"><!--<s5173>-->Автор<!--</s>-->:</span> <span class="ed-value"><u>$AUTHOR_NAME$</u><?endif?> <?if($AUTHOR_EMAIL_JS$)?><a href="$AUTHOR_EMAIL_JS$" title="E-mail">E</a><?endif?> <?if($AUTHOR_SITE$)?><a rel="nofollow" href="javascript://" onclick="window.open('$AUTHOR_SITE$');return false;" title="Web-site">W</a><?endif?></span></span>
</td></tr>
<tr><td class="eDetails2" colspan="2"><span class="e-reads"><span class="ed-title"><!--<s3177>-->Просмотров<!--</s>-->:</span> <span class="ed-value">$READS$</span></span> <?if($COMMENTS_NUM$)?><span class="ed-sep"> | </span><span class="e-comments"><span class="ed-title"><!--<s3039>-->Комментарии<!--</s>-->:</span> <span class="ed-value">$COMMENTS_NUM$</span></span><?endif?>
<?if($TAGS$)?><span class="ed-sep"> | </span><span class="e-tags"><span class="ed-title"><!--<s5308>-->Теги<!--</s>-->:</span> <span class="ed-value">$TAGS$</span></span><?endif?>
<?if($RATING$)?><span class="ed-sep"> | </span><span class="e-rating"><span class="ed-title"><!--<s3119>-->Рейтинг<!--</s>-->:</span> <span class="ed-value"><span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span></span></span><?endif?></td></tr>
</table>

<?if($COM_IS_ACTIVE$)?>
<?if($COM_CAN_READ$)?>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="60%" height="25"><!--<s5183>-->Всего комментариев<!--</s>-->: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr>
<tr><td colspan="2">$COM_BODY$</td></tr>
<tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr>
<tr><td colspan="2" height="10"></td></tr>
</table>
<?endif?>

<?if($COM_CAN_ADD$)?>
$COM_ADD_FORM$
<?else?>
<?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg"><!--<s5237>-->Добавлять комментарии могут только зарегистрированные пользователи.<!--</s>--><br />[ <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> ]</div><?endif?>
<?endif?>
<?endif?><!-- </body> --></td><td style="background:url('/.s/t/995/21.gif');"></td></tr>
<tr><td width="15" height="15"><img src="/.s/t/995/22.gif" border="0"></td><td style="background:url('/.s/t/995/23.gif');"></td><td width="10" height="10"><img src="/.s/t/995/24.gif" border="0"></td></tr>
</table>
</td>

<td valign="top" style="width:178px;">
$GLOBAL_DRIGHTER$
</td>
</tr>
</table>
<!-- </middle> -->

$GLOBAL_BFOOTER$
</td><td style="background:url('/.s/t/995/25.gif');"></td></tr>
<tr><td width="10" height="10"><img src="/.s/t/995/26.gif" border="0"></td><td style="background:url('/.s/t/995/27.gif');"></td><td width="10" height="10"><img src="/.s/t/995/28.gif" border="0"></td></tr>
</table>

<div style="color:#EBDAAF;text-align:center;padding:10px;">$POWERED_BY$</div>

</body>

</html>


Страница с огромной картинкой для примера http://moehobbi.ucoz.ru/publ....-0-2648
leonoff(on)
Сообщений: 259
Репутация: 62

Сообщение # 6 | 09:50:21
Вера2929, ясно. Вы вставляете картинку непосредственно в материал. С помощью визуального редактора. Я то думал... Ну тогда вставьте это код перед </body> в странице материалов и комментариев Каталога статей, а не блога как вы говорили ранее. Ссылку, которую вы привели, ведет в каталог статей

Код
<script>
     $(document).ready(function() {
         var image, width, url;
         $("td.eText p img").each(function() {
             image = $(this);
             width = this.width;
             url = this.src;
             if (width>=1000) {
                    image.css({'width': '100%', 'height': 'auto'});
                    image.before('<a href="' + url + '" target="_blank">Увеличить это изображение</a>  <a href="' + url + '" target="_blank">Щелкните здесь, чтобы увидеть его в исходную величину.</a>');
             }
         });
     });
</script>

И раз вы вставляете картинки в визуальном редакторе, то ставьте в нем сразу ширину 100% и высоту 100%. Только знак % обязательно ставьте. Иначе система будет думать, что это 100px. Тогда никакие скрипты и не понадобятся.

Почему реперы зимой и летом ходят в шапках, но при этом все равно болеют?
Вера2929
Сообщений: 62
Репутация: 6

Сообщение # 7 | 10:52:32
Благодарю,все получилось!! Скажите, а если этот скрипт всунуть в модуль страницы сайта, то будет ли он работать на сайте для всех больших изображений. Или для каждого отдельного модуля нужен отдельный скрипт ?

Добавлено (04 Мар 2015, 10:52:32)
---------------------------------------------
Еще один вопросик shy ,а если я через world вставляю изображения,почему они не уменьшаются автоматом ?

leonoff(on)
Сообщений: 259
Репутация: 62

Сообщение # 8 | 11:05:50
Вера2929,
Цитата Вера2929 ()
если этот скрипт всунуть в модуль страницы сайта, то будет ли он работать на сайте для всех больших изображений
ну если заменить строчку

Код
$("td.eText p img").each(function() {
на

Код
$("img").each(function() {
то должно.
Цитата Вера2929 ()
если я через world вставляю изображения,почему они не уменьшаются автоматом
Это как вообще? wacko

Почему реперы зимой и летом ходят в шапках, но при этом все равно болеют?
Вера2929
Сообщений: 62
Репутация: 6

Сообщение # 9 | 12:48:48


я имею ввиду, когда вставляешь код изображений,например с яндекс фоток .
Цитата
Фотографии в альбоме «<a href="https://fotki.yandex.ru/users/bedofdeadleaves/album/219798/">Пумы</a>», автор <a target="_blank" href="https://fotki.yandex.ru/users/bedofdeadleaves/"><b><font color="red">b</font><font color="black">edofdeadleav<wbr/>es</font></b></a> на Яндекс.Фотках<br/><br/><a href="https://fotki.yandex.ru/users/bedofdeadleaves/view/553688/"><img src="https://img-fotki.yandex.ru/get/6301/93295147.39e/0_872d8_73532ee8_orig.jpg" title="" alt="" border="0"/></a><br/><br/>
leonoff(on)
Сообщений: 259
Репутация: 62

Сообщение # 10 | 13:37:04
Вера2929, чуть переделал скрипт. Можете его вставлять в любые модули/шаблоны

Код
<script>   
       $(document).ready(function() {   
           var src, image, width, url;   
      if ($("td.eText p img").length != 0) {
          src = $("td.eText p img");
      } else {
          src = $("img");
      }
           src.each(function() {   
               image = $(this);   
               width = this.width;   
               url = this.src;   
               if (width>=1000) {   
                      image.css({'width': '100%', 'height': 'auto'};);   
                      image.parent().before('<a href="' + url + '" target="_blank">Увеличить это изображение</a>  <a href="' + url + '" target="_blank">Щелкните здесь, чтобы увидеть его в исходную величину.</a>');   
               }   
           };);
       };);   
</script>
Хотя нет. Лучше так тогда

Код
<script>  
      $(document).ready(function() {  
          var image, width, url;  
          $("img").each(function() {  
              image = $(this);  
              width = this.width;  
              url = this.src;  
              if (width>=1000) {  
                     image.css({'width': '100%', 'height': 'auto'});  
                     image.before('<a href="' + url + '" target="_blank">Увеличить это изображение</a>  <a href="' + url + '" target="_blank">Щелкните здесь, чтобы увидеть его в исходную величину.</a>');  
              }  
          });  
      });  
</script>

Почему реперы зимой и летом ходят в шапках, но при этом все равно болеют?
Сообщение отредактировал leonoff(on) - Среда, 04 Мар 2015, 13:39:08
Вера2929
Сообщений: 62
Репутация: 6

Сообщение # 11 | 14:46:09
Все работает, только под шапкой появились такие ссылки,их можно как-то убрать ?
leonoff(on)
Сообщений: 259
Репутация: 62

Сообщение # 12 | 15:02:57
Вера2929, никак нам не расстаться )) smile biggrin . Попробуйте так

Код
<script>  
      $(document).ready(function() {  
          var src, image, width, url;  
      
          $(".eBlock img").each(function() {  
              image = $(this);  
              width = this.width;  
              url = this.src;  
              if (width>=1000) {  
                     image.css({'width': '100%', 'height': 'auto'});  
                     image.parent().before('<a href="' + url + '" target="_blank">Увеличить это изображение</a>  <a href="' + url + '" target="_blank">Щелкните здесь, чтобы увидеть его в исходную величину.</a>');  
              }  
          });
      });  
</script>

Почему реперы зимой и летом ходят в шапках, но при этом все равно болеют?
Вера2929
Сообщений: 62
Репутация: 6

Сообщение # 13 | 17:41:58
Спасибо, то что нужно !
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » JavaScript » Уменьшение изображения
Страница 1 из 11
Поиск: