|
|
Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » JavaScript » Уменьшение изображения |
Уменьшение изображения |
Здравствуйте . Подскажите, как настроить блог,чтобы изображения которые превышают 1000 пикселей имели приблизительно такой вид . Картинка должна быть 1000 пикселей, если она очень большая,а под или над ней,выводилась ссылка"посмотреть в исходную величину",при нажатии на ссылку увеличить,картинка увеличивается
|
Вера2929, сайт какой у вас? Структуру надо посмотреть
Муж рассказал жене, что у него есть любовница. Причина смерти: коронавирус.
|
http://moehobbi.ucoz.ru/
Добавлено (03 Мар 2015, 16:46:34) |
Вера2929, я не нашел ни одной фотографии в блоге более 1000px. И второе, вы же вставляете картинки с яндекс диска. Короче говоря, сделать то, что вы хотите абсолютно не сложно, но мне нужно тогда взглянуть на исходный код шаблонов блога "Вид материалов" и "Страница материала и комментариев к нему". Выложите здесь эти 2 кода и я вам помогу.
Муж рассказал жене, что у него есть любовница. Причина смерти: коронавирус.
|
ВИД МАТЕРИАЛА
Код <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 |
Вера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. Тогда никакие скрипты и не понадобятся. Муж рассказал жене, что у него есть любовница. Причина смерти: коронавирус.
|
Благодарю,все получилось!! Скажите, а если этот скрипт всунуть в модуль страницы сайта, то будет ли он работать на сайте для всех больших изображений. Или для каждого отдельного модуля нужен отдельный скрипт ?
Добавлено (04 Мар 2015, 10:52:32) |
Вера2929,
если этот скрипт всунуть в модуль страницы сайта, то будет ли он работать на сайте для всех больших изображений Код $("td.eText p img").each(function() { Код $("img").each(function() { Это как вообще? Муж рассказал жене, что у него есть любовница. Причина смерти: коронавирус.
|
я имею ввиду, когда вставляешь код изображений,например с яндекс фоток . Цитата Фотографии в альбоме «<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/> |
Вера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, никак нам не расстаться )) . Попробуйте так
Код <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> Муж рассказал жене, что у него есть любовница. Причина смерти: коронавирус.
|
| |||
| |||