Прошу показать\рассказать\расписать "на пальцах" как правильно сделать превью фотографии\картинки\рисунка вставленного в сообщение на форуме (что бы картинка в сообщении была небольшого размера, скажем 100-200 пикс), а после нажатия, открывалась в полный размер!
И так, поставим задачу: 1. Картинка должна быть небольшого размера (200x200), например. 2. После нажатия, открывалась в полный размер.
Начинаем решать.
1. Идём в ПУ (панель управления сайтом. здесь и далее...) ... Главная » Форум » Настройки модуля ... и настраиваем размеры уменьшенного изображения.... Заменяя установленные по умолчанию размеры на свои. Не забываем нажать на клавишу [сохранить] .... ヅ
С первой задачей, а именно, установка максимальных размеров - справились.
Второе. На сайтах в юкоз системе, есть функция вызова модального окна, с дизайном, выбранном вами для пу. Доступны несколько вариантов: .... На данном сайте «blue» ... как можно убедится (если ещё актуально) - кликнув по картинке.
Новое модальное окно (uWind - здесь и далее ...) создается следующим кодом:
Code
new _uWnd(name, title, width, height, opts, content, menuitems, app)
... Подробнее, по создание окон можно прочитать вот здесь ...
Сейчас нам нужен простейший вариант: Примерно вот такой:
Code
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}, 'Полное изображение');
Quote (Info)
Где: myWndFullImg - уникальное имя окошка. Нигде не отображается, но используется при работе с такими окнами. Полное изображение - заголовок окошка. Отображается в шапке. '10','10' - ширина и высота окошка. В скобочках{} - дополнительные параметры: popup:1 - закрывать ли окно при клике на пространстве вне окна. (1\0 - да\нет - true\false - здесь и далее) modal:0 - модальное окно (все остальное пространство закрывается полупрозрачным слоем). waitimages:30000 - ждать загрузки всех картинок autosizewidth:1 - автоопределение ширины. hideonresize:1 - прятать содержимое при изменении размеров окна. autosize:1 - автоопределение размеров. minh:100 - минимальная высота (в пикселях). minw:100 - минимальная ширина (в пикселях). min:0 - отображать ли кнопку Minimize (свернуть). max:0 - отображать ли кнопку Maximize (развернуть). resize:1 - разрешить изменение размеров окна пользователем.
Полное изображение - контент, содержание окна. Может быть строкой, объектом или функцией, возвращающей строку.
В данном случае, нам нужна картинка. Следовательно, вместо «Полное изображение» - пишем код (HTML) картинки:
Далее, все это, нам нужно запихнуть в функцию, которая будет выполняться при клике на маленькой картинке: Пишем:
Code
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 src=\"'+url+'\" alt=\"Полное изображение\" title=\"Полное изображение\" />'); };
Где:
Quote (Info)
showImg(url) showImg - просто имя функции, по которому мы (вы) будете к ней обращатся ... ヅ (url) - ссылка на полную картинку - будем передавать из события «клик». (пока его нет .... ヅ)
Осталось самое интересное - повесить на картинку-превьюшку, что автоматически создается системой юкоз, при вставке кода $IMAGE1__$ в комментарий. Для этого - смотрим исходник (исходный код HTML. Здесь и далее) и думаем к чему можно привязать обработчик.
Исходник:
Code
<!--IMG1--> <a href="http://likbezz.ucoz.ru/_fr/0/8501543.png" target="_blank" title="Нажмите, для просмотра в полном размере..."> <img alt="" style="border: 0pt none ; margin: 0pt; padding: 0pt;" src="http://likbezz.ucoz.ru/_fr/0/s8501543.jpg" align=""> </a> <!--IMG1-->
Вот он. Привязать можно, как минимум, к расширению файла, в атрибуте «href» ссылки в данном случае «.png», и к тексту, в атрибуте «title», а именно «Нажмите, для просмотра в полном размере...» .... В данном посте/инструкции - буду отрываться от значения «title».
Пишем обработчик:
Code
$("td.posttdMessage a[title^='Нажмите']").click(function(){ Здесь что-то делаем. });
Где:
Quote (Info)
td.posttdMessage - ячейка в которой будем производить инициализацию обработчика, в данном случае - ячейка с текстом поста/сообщения. a[title^='Нажмите']" - сама ссылка, с фильтром по содержанию атрибута «title». Здесь будем выбирать все ссылки с атрибутом title начинающихся с «Нажмите».
Про фильтры контента можно почитать вот в этой статье «jQuery. Селекторы» или инет вам в помощь .... ヅ
Где: showImg(this.href) - при клике - запускаем написанную ранее, функцию «showImg» и (!!!) передаём в неё ссылку на полное изображение - (this.href). return false; - возвращаем «false» для отмены поведения по-умолчанию, то есть перехода по ссылке в новое окно ....
// Start function (showImg) 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 src=\"'+url+'\" alt=\"Полное изображение\" title=\"Полное изображение\" />'); }; // End function (showImg)
// End DocumentReady }); </script>
Теперь, сё это нужно воплотить в «жись» ... А именно, заставить работать ... ヅ По-этому - идём опять в ПУ » Главная » Управление дизайном » Редактирование шаблонов » Форум » Общий вид страниц форума И, где нибудь снизу, например, перед закрываюшим «/body», пишем вот такую весчь:
Где: <?if($PAGE_ID$='threadpage')?> - ID страницы, на которой должен работать скрипт, чтобы не перегружать лишними обработчиками другие страницы, где нет картинок,и, следовательно, данная функция - не нужна. threadpage - это страница с постами. Та, которую вы сейчас смотрите. ヅ
Узнать это можно из админбара, вот так: Картинка:
...
Всё. Появятся вопросы - рисуйте в тему .... или создавайте свою ... ヅ Удачи.
P.S. В функции (function showImg(url)), а именно «new _uWnd» - не должно быть разрывов строк.
Но вэтом коде необходимо указывать урл изображения и его имя и еще нужные возможно параметры, опять таки если я правильно понял.
.... Так. ... Смотри: $("td.posttdMessage a[title^='Нажмите']") - нашли ячейку «td» с классом «posttdMessage» а в ней ссылку - тег «a» - с атрибутом «title» начинающемся со слова «Нажмите» - правильно? - это понятно? Дальше, повесили, присвоили действие при клике .click(function(){ ... }); ... Что присвоили? - правильно, ... запуск функции: showImg(this.href); - что это? - «showImg» - Это имя функции - она должна быть объявлена, прописана ... А это что? «(this.href)» - параметры, которые мы передаём с саму функцию. А что это за параметр? «this.href» - это значение атрибута «href» у объекта «this» который вызвал это действие «click» .... а к чему мы привязывали? - правильно, к тегу «a» - это ссылка .... А что есть у ссылки? - адрес объекта, на который ссылается. Значит что мы передали a функцию? Правильно - ссылку на объект - в данном случае - на картинку - “урл изображения” Понятно? - если нет - дальше не читай. ..... Функция:
Quote
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 src=\"'+url+'\" alt=\"Полное изображение\" title=\"Полное изображение\" />'); };
Передали? - передали. Получаем. function showImg(url){ ... }; - Запускается функция. И смотрит - есть ли у неё дополнительный параметр? ... Ан, есть. Дополнительный параметр (url) - это то, что в скобочках - отметил красным ..... и куда он идет? .... Правильно - он вписывается в атрибут «src» новой картинки «<img src=\"'+url+'\"» .... Что? .......
Quote (Гость)
Но вэтом коде необходимо указывать урл изображения и его имя и еще нужные возможно параметры
- С URL - разобрались. Имя - какое имя? ... Требует уточнения. «еще нужные возможно параметры» - какие? например. .......
Quote (Гость)
И тут я перестаю догонять, если в коде шаблона я добавляю урл картинки, которую нужно превью делать, то как быть с остальными картинками?
... И тут я впадаю в ступор ... “если в коде шаблона я добавляю урл картинки” - в смысле? .... Как вы можете добавить в код шаблона ссылку на картинку которую только загрузит какой нибудь пользователь - то есть её ещё не существует ... на сервере. .... ...
Quote (Гость)
или может в написании самого сообщения нужно как-то делать код картинки?
- Для этого скрипта - не нужно. Для чего мы искали ячейку, в ней ссылку с титле «Нажмите» .... ? - для того, чтобы не заботится о том,и не проставлять вручную спец теги ..... Для которых, замечу, нужен свой скрипт - обработчик ....
Quote (Гость)
И будут ли картинки - которые юзеры прикреплять в своих постах тоже сами делаться превьюшками.
- Будут. Если превышают максимальные допустимые размеры изображения на вашем, в данном случае моём, форуме - 400x400 .... - но мне пришлось их уменьшить ..... ヅ ... картинка больно маленькая .... ヅ
- Покажите пальцем кто НЕ самоучка. .... Этому нигде не учат - а основы - грубо - правила дорожного движения - доступны каждому. Так что, если проводить параллель - наличие прав, ещё не говорит о мастерстве вождения. ... Так, отступление от темы ...
Quote (Гость)
я просто не знаю всех этих функций
- Основных функций - не так уж и много, .... и знать что, примерно, они делают - просто необходимо. Запомнить. Как таблицу умножения. Тем более, большинство из них понятно, из имени/названия....
В Харькове есть академия - http://www.itstep.org ШАГ- там вроде учат чему-то
- Ну, хорошо. Академия есть. Но вы же не думаете, что все, или большинство - учились коддингу/WEB-программировани в уч.заведениях? ..... В МИФИ, например, на факультете Кибернетики учат языкам программирования, криптографии и низкоуровнего разбора сетевых протоколов ..... но с повседневными задачами Web-коддинга - это мало схоже. Да, несомненно - не зная основ - вобще нечего делать, а основы - там преподают. И неплохо. Но, они доступны - свободно доступны, и любому смертному. Было бы желание.
Quote (Гость)
Сори ссылку на форум не могу дать - потому-что темы закрыты от просмотра непроверенных пользователей.
- Так создайте тестового ..... Вот пример - код вашего шаблона .... ☑Пример ..... ... Скрипт и прочее - в исходнике. Вставлять «как есть» - нельзя - я добавил таблицу и закоментировал ваши скрипты - кучу ошибок выдавали .... Код картинки - из поста выше.
Этот пользователь модератор того тестового форума.
- ну и как «модератор» будет редактировать шаблон форума - у него доступа к изменению дизайна сайта нет ..... ヅ .... - а так - смотри - что-то напутал ..... .... и как вы умудряетесь ...... - скрипт скачай(прикрепление), и вместо кода воткни ссылку ....
- в то же место, не вме́стЕ, а вме́стО кода.. ... .... Себе не забудь закачать - не факт, что он будет долго лежать .... .... ☑Пример, как должно быть .... - Где, посередине - картинка ....
