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

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

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

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



а в сообщении прикрепленную картинку нужно выводить кодом $IMAGEх$ где х номер загруженной картинки, а не би-би кодом [img]
[/img] тогда будет все работать
Прикрепления: 0359020.jpg(51Kb)

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Skamp
Сообщений: 19
Репутация: 0

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

Сообщение # 4 | 22:19:41
Skamp, поясните тогда что именно вы хотели. если би-би кодами, то это невозможно системными средствами. или в хтмл режиме ставить картинку со стилем class="ulightbox"
или так как я сказала

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Skamp
Сообщений: 19
Репутация: 0

Сообщение # 5 | 17:29:42
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
я не знаю на кой Х вы это сделали но исправьте:

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

Цитата
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
Skamp
Сообщений: 19
Репутация: 0

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

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

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

просто перевесте совбытие с блока на картинку
вот это $('.eMessage.img'). - поменять на $('.eMessage.img>img').

Спасибо = "+" в репутацию
Любые вопросы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
Skamp
Сообщений: 19
Репутация: 0

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

Сообщение # 11 | 12:59:40
Цитата 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
Цитата Skamp ()
Я или кривой. Или я что то не понял... Не получилось поставить скрипт.

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

Сообщение # 13 | 15:38:52
Скажите можно ли эту програмку совместить с укозом ?
Прикрепления: 8491443.png(101Kb)

где начинается долг, кончается дружба
Rostislav
Сообщений: 2395
Репутация: 591

Сообщение # 14 | 15:41:10
machito, вряд ли

o_Lisovenko
uProduct
Сообщений: 4360

Сообщение # 15 | 23:55:58
machito, нельзя. uCoz не файловое хранилище. Для таких программ есть фотохостинги. На uCoz можно удобно загрузить через FTP или через Файловый менеджер.

Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Увеличение картинки по клику на форуме
Страница 1 из 11
Поиск: