• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Увеличение картинки по клику на форуме
Увеличение картинки по клику на форуме
Skamp
Сообщений: 19
Репутация: 0

Сообщение # 1 | 13:34:28 21 Авг 2014
Вообщем такая беда. Если на сайте вставить картинку через BB теги или на форум(прикреплённый файл), то картинка вставляется в оригинальном размере!(например 1000 на 1000).
Уменьшить все картинки через css легко. А как их уменьшить и что бы при клике на них они увеличивались(через стандартный ucoz'озовский box).

+ Если картинка маленькая её не надо увеличивать или сжимать.
Сообщение отредактировал webanet - Четверг, 21 Авг 2014, 17:49:06
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 2 | 17:48:08 21 Авг 2014
Skamp, по умолчанию так и должно работать как вы желаете. прикрепляете к сообщению картинку и жмете её для увеличения. вот так



а в сообщении прикрепленную картинку нужно выводить кодом $IMAGEх$ где х номер загруженной картинки, а не би-би кодом [img]
[/img] тогда будет все работать
Прикрепления: 0359020.jpg (50.7 Kb)
ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Skamp
Сообщений: 19
Репутация: 0

Сообщение # 3 | 22:10:06 21 Авг 2014
Спасибо! Очень не помогли! Бесполезный ответ. Пф. Спросил одно, ответили на другое. Всегда так?
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 4 | 22:19:41 21 Авг 2014
Skamp, поясните тогда что именно вы хотели. если би-би кодами, то это невозможно системными средствами. или в хтмл режиме ставить картинку со стилем class="ulightbox"
или так как я сказала
ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Skamp
Сообщений: 19
Репутация: 0

Сообщение # 5 | 17:29:42 24 Авг 2014
webanet, сайт у меня в профиле. Первый пост. Там картинка добавлена средством BB кода.
она уменьшена через css. Как сделать, что бы при клики увеличилась.

P.S. Нужно, что бы она автоматически изменялась. (ибо пользователям всем не объяснишь)

Добавлено (24 Авг 2014, 17:29:42)
---------------------------------------------
ВОт http://mugenworks.com/forum/5-5357-1 как мне увеличить данную картинку, которую я вставил через bb код...
P.S.Надо что бы, было всё автоматически.

Сообщение отредактировал Skamp - Пятница, 22 Авг 2014, 10:32:29
M-Brook
Сообщений: 215
Репутация: 75

Сообщение # 6 | 13:15:53 27 Авг 2014
я не знаю на кой Х вы это сделали но исправьте:

это у вас на блоке с картинкой такой класс лежит

Цитата
eMessage img {max-width:10px;} eMessage img {max-height:10px;}


а теперь по вашему вопросу:

Код
<style>
     .eMessage.img img {
       width:300px;
       height:300px;
     }
     .darkLayer {
       width:100%;
       height:100%;
       position:fixed;
       top:0;
       left:0;
       background: rgba(0, 0, 0, 0.6);
     }
     .darkLayer close {
       position:absolute;
       z-index:5;
       top:5px;
       right:5px;
       color:#fff;
       background:rgba(0, 0, 0, 0.4);
       width:20px;
       text-align:center;
       padding:1px 1px 0 0;
       cursor:pointer;
     }
     .darkLayer bimg {
       width:80%;
       height:80%;
       display:block;
       background-color: rgb(75, 75, 75) !important;
       background-position: 50% 50% !important;
       background-size: contain !important;
       margin:10%;
       border:2px solid rgb(75, 75, 75);
       border-radius:6px;
       position:relative;
     }
</style>
<div class="eMessage img">
     <img src="http://s9.postimg.org/fi0nrmzt9/Juubi_by_Shinrashi.png">
</div>
<script>
     $.fn.extend({
       live: function (types, data, fn) {jQuery(this.context).on(types, this.selector, data, fn); return this}
     });
     $('.eMessage.img').click(function () {
       $('body').append('<div class="darkLayer"><bimg style="background:url(' + $(this).find('img').attr('src') + ') no-repeat"><close>X</close></dimg></div>');
     });
     $('.darkLayer').live('click', function (e) {
       var a = $(this),
         b = e.target.tagName;
       if (a.is('.darkLayer') && b == 'CLOSE' || e.target.getAttribute('class') == 'darkLayer') a.remove();
     });
     $(document).keyup(function (event) {
       if ($('.darkLayer').length && (event.which == 27 || event.keyCode == 27)) $('.darkLayer').remove();
     });
</script>

как работает ТУТ
все давольно просто = удачи
Спасибо = "+" в репутацию
Любые вопросы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
Сообщение отредактировал M-Brook - Среда, 27 Авг 2014, 13:19:12
Nexxus
Сообщений: 289
Репутация: 66

Сообщение # 7 | 21:40:38 27 Авг 2014
Skamp
Сообщений: 19
Репутация: 0

Сообщение # 8 | 23:50:35 27 Авг 2014
Цитата M-Brook ()
кой Х
Ну да... Красивее же когда картинки размером 100000 на 100000 вылазиет на весь экран...
Цитата M-Brook ()
как работает ТУТ все давольно просто = удачи
При попытки выделить текст, если есть картинка в посте. То она выскакивает.
Цитата Nexxus ()
//forum.ucoz.ru/forum/38-44225-1182360-16-1399282719

Я или кривой. Или я что то не понял... Не получилось поставить скрипт.
M-Brook
Сообщений: 215
Репутация: 75

Сообщение # 9 | 17:51:47 28 Авг 2014
Цитата
При попытки выделить текст, если есть картинка в посте. То она выскакивает.

просто перевесте совбытие с блока на картинку
вот это $('.eMessage.img'). - поменять на $('.eMessage.img>img').
Спасибо = "+" в репутацию
Любые вопросы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
Skamp
Сообщений: 19
Репутация: 0

Сообщение # 10 | 19:00:01 28 Авг 2014
Цитата M-Brook ()
просто перевесте совбытие с блока на картинку вот это $('.eMessage.img'). - поменять на $('.eMessage.img>img').
Попробывал... Теперь вообще не открывается((
M-Brook
Сообщений: 215
Репутация: 75

Сообщение # 11 | 12:59:40 29 Авг 2014
Цитата Skamp ()
. Теперь вообще не открывается((

тогда так замените
Код
$('.eMessage.img').click(function () {

на
Код
$('.eMessage.img').click(function (ev) {
if(ev.target.tagName == 'IMG') {

и перед концом фугкции добавить закрывающую скобку "}"
Спасибо = "+" в репутацию
Любые вопросы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
Сообщение отредактировал M-Brook - Пятница, 29 Авг 2014, 13:02:26
Nexxus
Сообщений: 289
Репутация: 66

Сообщение # 12 | 18:36:34 29 Авг 2014
Цитата Skamp ()
Я или кривой. Или я что то не понял... Не получилось поставить скрипт.

Куда-нибудь на страницу форума добавь.
machito
Сообщений: 32
Репутация: 0

Сообщение # 13 | 15:38:52 19 Май 2015
Скажите можно ли эту програмку совместить с укозом ?
Прикрепления: 8491443.png (101.1 Kb)
где начинается долг, кончается дружба
Rostislav
Сообщений: 2396
Репутация: 591

Сообщение # 14 | 15:41:10 19 Май 2015
machito, вряд ли
Эрудитов.Нет
o_Lisovenko
uProduct
Сообщений: 4704

Сообщение # 15 | 23:55:58 19 Май 2015
machito, нельзя. uCoz не файловое хранилище. Для таких программ есть фотохостинги. На uCoz можно удобно загрузить через FTP или через Файловый менеджер.
uSocial.pro - лучшие кнопки соц. сетей для Вашего сайта!
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Увеличение картинки по клику на форуме
  • Страница 1 из 1
  • 1
Поиск: