Фильтр по:
  

Как сделать открытие картинок в аякс окне на форуме ... - Страница 6

Как сделать...

Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать открытие картинок в аякс окне на форуме ... (Открытие картинок в аякс окне. uCoz, JavaScript.)
Как сделать открытие картинок в аякс окне на форуме ...
Дата: Четверг, 01.07.2010, 00:28 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Тема про превьюшко, картинки при клике ......... и прочее - в таком духе ... на тему «как» ...

 
Дата: Вторник, 20.12.2011, 17:05 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


 Спасибо, огромное

Вроде внимательно читал, но, наверное, проглядел.
Картинки-превьюшки просто лежат на фоне.
Не всем придет в голову нажать на них.
Как-то можно сделать так, чтобы картинки-превьюшки обрамляла какая-нибудь рамочка (подсказка, что это превьюшка и для лучшего просмотра на нее следует нажать.
А лучше, такую-же или что-то типа лупы, как у Вас ЗДЕСЬ
Спасибо!

Сообщение отредактировал SKh - Вторник, 20.12.2011, 17:24
 
Дата: Вторник, 20.12.2011, 22:05 |
Группа: Гости
Quote (SKh)
А лучше, такую-же или что-то типа лупы, как у Вас ЗДЕСЬ

Code
$("td.posttdMessage a[title^='Нажмите']").addClass('imgLink').prepend('<span></span>').click(function(){
showImg(this.href);
return false;
});

- стили скопируйте со страницы которую указали как “как у Вас ЗДЕСЬ ”...

 
Дата: Вторник, 20.12.2011, 23:10 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


 Спасибо.
Но я у себя в ПУ не могу найти табличку, указанную на этом скриншоте
cranky

И, правильно ли я понимаю, код
Code
$("td.posttdMessage a[title^='Нажмите']").addClass('imgLink').prepend('<span></span>').click(function(){  
showImg(this.href);  
return false;
});
нужно вставлять в CSS?

 
Дата: Вторник, 20.12.2011, 23:36 |
Группа: Гости





 SKh,
Quote (SKh)
Но я у себя в ПУ не могу найти табличку, указанную на этом скриншоте

Это е скриншот - это просто картинка.
Читай тему, а именно сообщение 4 и ниже ...
...

Добавлено (20.12.2011, 23:36)
---------------------------------------------

Quote (SKh)
нужно вставлять в CSS?

biggrin А что, это похоже на стили? dry

 
Дата: Вторник, 20.12.2011, 23:43 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


 Так я же ничего не соображаю))) ни в html ни в CSS
все методом тыка
ОК!
Спасибо.

Да и CSS у меня переделан на сто рядов.
Может лучше достать его (CSS) из файлового менеджера и вставить указанный Вами фрагмент?

Сообщение отредактировал SKh - Вторник, 20.12.2011, 23:47
 
Дата: Вторник, 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
 
Дата: Вторник, 20.12.2011, 23:59 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


 Спасибо!


wink
Прикрепления: 4093883.gif (46.2 Kb)

Сообщение отредактировал SKh - Среда, 21.12.2011, 00:01
 
Дата: Среда, 21.12.2011, 00:37 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


 Я понял.
Но что-то все поплыло, весь дизайн. Но пока еще стили не ставил...

В CSS от
Code
/* ===== forum Start ===== */
до /
Code
* ====== forum End ====== */

не увидел ни одной строки начинающейся с
Code
.imgLink

И куда тогда вставлять?
Видишь, какой я трудный)

Добавлено (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
 
Дата: Среда, 21.12.2011, 00:39 |
Группа: Гости





 SKh,
Quote (SKh)
не увидел ни одной строки начинающейся с

И не увидешь. Её нет. Просто вставь, перед
Code
/* ====== forum End ====== */

Добавлено (21.12.2011, 00:39)
---------------------------------------------
SKh,

Quote (SKh)
В этом-то хоть я правильно сделал?

Да, правильно, только пробел убери.

 
Дата: Среда, 21.12.2011, 00:43 |
SKh
Генерал-майор
Группа: Проверенные
Сообщений: 314
Награды: 0
Репутация: 5
Статус: Offline


 Хе-хе
А это уже юкоз накосорезил. Я пробел убирал!
ОК!

Получилось!

Спасибо, огромное!

Сообщение отредактировал SKh - Среда, 21.12.2011, 01:04
 
Дата: Воскресенье, 15.01.2012, 17:59 |
Группа: Гости





 likbezz, здравствуй! Подскажи пожалуйста,а есть ли подобный скрипт,как этот "Как сделать превью фотографии/картинки/рисунка на форуме ... (Чтобы при клике открывалось новое окно с полной картинкой ..) " только для каталога статей? Т.е. чтобы я добавлял изображения не через файловый менеджер а как бы прикреплял их с статье,и потом эти изображения увеличивались по нажатию=)
Заранее огромное СПАСИБО!

 
Дата: Воскресенье, 15.01.2012, 23:36 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 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>

...

 
Дата: Пятница, 24.02.2012, 10:29 |
Siver
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline
Quote (likbezz)
moda:0 - модальное окно (все остальное пространство закрывается полупрозрачным слоем).

поставил moda:1, фон не затемняется.

У меня в настройке модуля размер максимального изображения выставлен: 800х600. Загружаю картинку размером: 1928х1928,
открывается окно на весь экран (разрешение моего монитора: 1280х1024), картинка в окне выходит за пределы окна и при этом естественно появляются полосы прокрутки. Какие нужно выставить параметры для отображения больших картинок в размере не более 800х600?


Картинка в уменьшенном виде выглядит хорошо, вот так:

Прикрепления: 5116457.png (211.4 Kb) · 2907683.png (54.1 Kb)

 
Дата: Пятница, 24.02.2012, 11:39 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 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+'\" />

- Это кусок скрипта...
Только зачем ограничивать картинку такими размерами? - она у вас и на форуме, в постах такая же ...
...

 
Дата: Пятница, 24.02.2012, 12:15 |
Siver
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline
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" и т.п., если картинок в одном посте несколько?
В данный момент они открываются все по отдельности только.

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Как сделать открытие картинок в аякс окне на форуме ... (Открытие картинок в аякс окне. uCoz, JavaScript.)
Поиск:


Мобильная версия