|
Как сделать открытие картинок в аякс окне на форуме ...
|
|
| [1] likbezz [01.07.2010, 00:28] |
|
Тема про превьюшко, картинки при клике ......... и прочее - в таком духе ... на тему «как» ... |
|
| [76] SKh [20.12.2011, 17:05] |
Спасибо, огромное 
Вроде внимательно читал, но, наверное, проглядел.
Картинки-превьюшки просто лежат на фоне.
Не всем придет в голову нажать на них.
Как-то можно сделать так, чтобы картинки-превьюшки обрамляла какая-нибудь рамочка (подсказка, что это превьюшка и для лучшего просмотра на нее следует нажать.
А лучше, такую-же или что-то типа лупы, как у Вас ЗДЕСЬ
Спасибо!
Сообщение отредактировал SKh - Вторник, 20.12.2011, 17:24 |
|
| [77] Гость [20.12.2011, 22:05] |
Quote (SKh) А лучше, такую-же или что-то типа лупы, как у Вас ЗДЕСЬ
Code $("td.posttdMessage a[title^='Нажмите']").addClass('imgLink').prepend('<span></span>').click(function(){
showImg(this.href);
return false;
});
- стили скопируйте со страницы которую указали как “как у Вас ЗДЕСЬ ”... |
|
| [78] SKh [20.12.2011, 23:10] |
Спасибо.
Но я у себя в ПУ не могу найти табличку, указанную на этом скриншоте
И, правильно ли я понимаю, код Code $("td.posttdMessage a[title^='Нажмите']").addClass('imgLink').prepend('<span></span>').click(function(){
showImg(this.href);
return false;
}); |
|
| [79] Гость [20.12.2011, 23:36] |
SKh, Quote (SKh) Но я у себя в ПУ не могу найти табличку, указанную на этом скриншоте
Это е скриншот - это просто картинка.
Читай тему, а именно сообщение 4 и ниже ...
...Добавлено (20.12.2011, 23:36)
---------------------------------------------
Quote (SKh) нужно вставлять в CSS?
 А что, это похоже на стили?  |
|
| [80] SKh [20.12.2011, 23:43] |
Так я же ничего не соображаю))) ни в html ни в CSS
все методом тыка
ОК!
Спасибо.
Да и CSS у меня переделан на сто рядов.
Может лучше достать его (CSS) из файлового менеджера и вставить указанный Вами фрагмент?
Сообщение отредактировал SKh - Вторник, 20.12.2011, 23:47 |
|
| [81] Гость [20.12.2011, 23:59] |
SKh, Quote (SKh) Да и CSS у меня переделан на сто рядов.
Может лучше достать его (CSS) из файлового менеджера и вставить указанный Вами фрагмент?
Указанный мной фрагмент НЕ стили - это скрипт, и как его вставлять, куда и прочее описано в начале темы, начиная с четвёртого поста, потрудитесь прочитать.
А стили, из того документа, что “у Вас ЗДЕСЬ” вот:
Code .imgLink{display:inline-block;position:relative;}
.imgLink span{background:url(http://likbezz.ru/_example/jquery/rest/myWnd/find.png) no-repeat 0 0;display:none;height:52px;width:52px;position:absolute;left:15px;top:15px;z-index:-1;}
.imgLink:hover span{display:block;z-index:99;}
вот их можете вставить в css.
Эх...
Добавлено (20.12.2011, 23:57)
---------------------------------------------
Полностью скрипт (на всякий случай, с той же страницы) вот:
Code <script type="text/javascript">
function showImg(url){
new _uWnd('myWndFullImg','Полное изображение','10','10',{popup:1,moda:0,waitimages:30000,autosizewidth:1,hideonresize:1,autosize:1,minh:100,minw:100,min:0,max:0,resize:1},'< img onclick=\"_uWnd.close(\'myWndFullImg\');\" src=\"'+url+'\" alt=\"Полное изображение\" title=\"Полное изображение\" />');
};
$(function(){
$("td.posttdMessage a[title^='Нажмите']").addClass('imgLink').prepend('<span></span>').click(function(){showImg(this.href);return false;});
});
</script>
Добавлено (20.12.2011, 23:59)
---------------------------------------------
Блин, пробел, когда копировать будете, уберите вот здесь - < img - между < и img не должно быть пробела.
Скрин откуда убрать пробел ...
Сообщение отредактировал likbezz - Среда, 21.12.2011, 01:03 |
|
| [82] SKh [20.12.2011, 23:59] |
Спасибо!
Сообщение отредактировал SKh - Среда, 21.12.2011, 00:01 |
|
| [83] SKh [21.12.2011, 00:37] |
Я понял.
Но что-то все поплыло, весь дизайн. Но пока еще стили не ставил...
В CSS от Code /* ===== forum Start ===== */ Code * ====== forum End ====== */
не увидел ни одной строки начинающейся с
И куда тогда вставлять?
Видишь, какой я трудный)Добавлено (21.12.2011, 00:37)
---------------------------------------------
В html сразу же заработало и весь фрагмент был таким:
Code <!-- /Footer -->
<?if($PAGE_ID$='threadpage')?>
<script type="text/javascript">
function showImg(url){new _uWnd('myWndFullImg','Полное изображение','10','10',{popup:1,moda:0,waitimages:30000,autosizewidth:1,hideonresize:1,autosize:1,minh:100,minw:100,min:0,max:0,resize:1},'< img onclick=\"_uWnd.close(\'myWndFullImg\');\"src=\"'+url+'\"alt=\"Полное изображение\"title=\"Полное изображение\"/>');};
$(function(){$("td.posttdMessage a[title^='Нажмите']").click(function(){showImg(this.href);return false;});});
</script>
<?endif?>
</body></HTML>
Сейчас, получился таким:
Code <!-- /Footer -->
<?if($PAGE_ID$='threadpage')?>
<script type="text/javascript">
function showImg(url){new _uWnd('myWndFullImg','Полное изображение','10','10',{popup:1,moda:0,waitimages:30000,autosizewidth:1,hideonresize:1,autosize:1,minh:100,minw:100,min:0,max:0,resize:1},'< img onclick=\"_uWnd.close(\'myWndFullImg\');\"src=\"'+url+'\"alt=\"Полное изображение\"title=\"Полное изображение\"/>');};
$(function(){$("td.posttdMessage a[title^='Нажмите']").addClass('imgLink').prepend('<span></span>').click(function(){showImg(this.href);return false;});});
</script>
<?endif?>
</body></HTML>
В этом-то хоть я правильно сделал?
Сообщение отредактировал SKh - Среда, 21.12.2011, 00:30 |
|
| [84] Гость [21.12.2011, 00:39] |
SKh, Quote (SKh) не увидел ни одной строки начинающейся с
И не увидешь. Её нет. Просто вставь, перед
Code /* ====== forum End ====== */ Добавлено (21.12.2011, 00:39)
---------------------------------------------
SKh, Quote (SKh) В этом-то хоть я правильно сделал?
Да, правильно, только пробел убери. |
|
| [85] SKh [21.12.2011, 00:43] |
Хе-хе
А это уже юкоз накосорезил. Я пробел убирал!
ОК!
Получилось!
Спасибо, огромное!
Сообщение отредактировал SKh - Среда, 21.12.2011, 01:04 |
|
| [86] Fenix [15.01.2012, 17:59] |
likbezz, здравствуй! Подскажи пожалуйста,а есть ли подобный скрипт,как этот "Как сделать превью фотографии/картинки/рисунка на форуме ... (Чтобы при клике открывалось новое окно с полной картинкой ..) " только для каталога статей? Т.е. чтобы я добавлял изображения не через файловый менеджер а как бы прикреплял их с статье,и потом эти изображения увеличивались по нажатию=)
Заранее огромное СПАСИБО! |
|
| [87] likbezz [15.01.2012, 23:36] |
Fenix, Quote (Fenix) likbezz, здравствуй! Подскажи пожалуйста,а есть ли подобный скрипт,как этот "Как сделать превью фотографии/картинки/рисунка на форуме ... (Чтобы при клике открывалось новое окно с полной картинкой ..) " только для каталога статей? Т.е. чтобы я добавлял изображения не через файловый менеджер а как бы прикреплял их с статье,и потом эти изображения увеличивались по нажатию=)
Добрый вечер.
Можно и для каталога статей. Если у вас стандартный (один из стандартных) дизайнов, нужно лишь изменить имена классов в скрипте.
Вот так:
Code <script type="text/javascript"> function showImg(url){ var t='Полное изображение'; new _uWnd('myWndFullImg',t,'10','10', {popup:1,moda:0,waitimages:30000,autosizewidth:1,hideonresize:1,autosize:1,minh:110,minw:110,min:0,max:0,resize:1}, '<img onclick=\"_uWnd.close(\'myWndFullImg\');\" src=\"'+url+'\" alt=\"'+t+'\" title=\"'+t+'\" />'); }; $(document).ready(function(){ $("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите']").click(function(){ showImg(this.href);return false;}); }); </script>
Где:
$("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите']") - слассы в которых содержатся ссылки на картинки которые нужно открывать в аякс окошке.
...
Скрипт вставляют после оператора $BODY$ как код, или ссылку на скрипт.
Ссылка вот такая:
Code <script type="text/javascript" src="http://likbezz.ru/_source/_js/ext/_showImg.js"></script>
... |
|
| [88] Siver [24.02.2012, 10:29] |
Quote (likbezz) moda:0 - модальное окно (все остальное пространство закрывается полупрозрачным слоем).
поставил moda:1, фон не затемняется.
У меня в настройке модуля размер максимального изображения выставлен: 800х600. Загружаю картинку размером: 1928х1928,
открывается окно на весь экран (разрешение моего монитора: 1280х1024), картинка в окне выходит за пределы окна и при этом естественно появляются полосы прокрутки. Какие нужно выставить параметры для отображения больших картинок в размере не более 800х600?
Картинка в уменьшенном виде выглядит хорошо, вот так:
|
|
| [89] likbezz [24.02.2012, 11:39] |
Siver, Quote (Siver) Quote moda:0 - модальное окно (все остальное пространство закрывается полупрозрачным слоем). поставил moda:1, фон не затемняется.
Блин, откуда вы цитировали это? Вижу что моё, но там опечатка, нужно не moda:1, а modal:1 ... )
...
Quote (Siver) Какие нужно выставить параметры для отображения больших картинок в размере не более 800х600?
Quote (JavaScript) <img style=\"max-height:600px;max-width:800px;\" onclick=\"_uWnd.close(\'myWndFullImg\');\" src=\"'+url+'\" alt=\"'+t+'\" title=\"'+t+'\" />
- Это кусок скрипта...
Только зачем ограничивать картинку такими размерами? - она у вас и на форуме, в постах такая же ...
... |
|
| [90] Siver [24.02.2012, 12:15] |
Quote (likbezz) Блин, откуда вы цитировали это? Вижу что моё, но там опечатка, нужно не moda:1, а modal:1 ... )
Это с первой страницы, первый пост ), так я и думал, что опечатка, нужно наверное исправить, а то замучают вопросами ))
Quote (likbezz) - Это кусок скрипта...
значит вместо этой строки?
Code <img onclick=\"_uWnd.close(\'myWndFullImg\');\" src=\"'+url+'\" alt=\"Полное изображение\" title=\"Полное изображение\" />
Quote (likbezz) Только зачем ограничивать картинку такими размерами? - она у вас и на форуме, в постах такая же ...
размер 800х600 для примера, буду больше ставить.
Спасибо большое!Добавлено (24.02.2012, 12:15)
---------------------------------------------
Есть еще вопрос. Как сделать перелистывание картинок в одном модальном окне нажатием ссылки/кнопки "next" и т.п., если картинок в одном посте несколько?
В данный момент они открываются все по отдельности только. |
|
