Загрузить
Здравствуйте! Наверное каждый владелец сайта, который ждет, и желает отдачи с проекта, хочет иметь высокую валидность и оптимизацию сайта. Данный скрипт позволит прописывать атрибуты ALT и TITLE в изображения. Так же этот скрипт служит и шаблоном для доработок функциональности BB cod'ов.
Текст в атрибутах можно генерировать автоматически или писать вручную, в зависимости от конкретных условий. В результате можно получить трафик из поиска по изображениям, добавить нужную стилизацию, и просто улучшить процесс добавления изображений.

1) Как можно использовать скрипт?

На больших проектах, которым нужны изображения, но имеется недостаток места, приходится использовать сторонние сервисы для загрузки изображений, это не только практично, но и дает возможность не "забивать" лишним весом место на сайте. Приходится искать решения, как сделать загрузку лучше, и понятнее для пользователя; Это и послужило созданию данного кода. Даже не слишком опытный пользователь, который знает что хочет видеть в итоге, всегда найдет как использовать данный "мануал".

2) Пишем скрипт с оптимизации изображений нуля (где брать примеры BB кодов)

Дабы не "создавать велосипед" по новой, и не ломать голову как это реализовать, проделываем следующие действия:

  • Открываем Инструменты разработчика (Ctrl+Sthift+I В зависимости от браузера окно может иметь другой вид и горячие кнопки вызова, функционал).

  • Первым действием (цифра 1 на скриншоте №1) будет нажатие на кнопку инспекции элемента.
  • Второе действие (цифра 2 на скриншоте №1) переносим курсор мышки на нужный для нас инспектируемый элемент (В данном случае кнопку img) и кликаем на него.
    У нас появилось в рабочей области выделенный тег, с его атрибутами, в данном случае нас интересует onclick (выделенная на скриншоте №1), так как именно он отвечает за событие с открытием Alert сообщения для ввода URL адреса (скриншот №2).

  • Третьим действием будет выделение и копирование нужного нам содержимого onclick'a (цифра 3 на скриншоте №1), который мы и попытаемся найти дальше.

  • Переходим в вкладку Sources (цифра 1 на скриншоте №3)
  • Ищем в меню слева нужный нам скрипт (цифра 2 на скриншоте №3)
  • В низу панели инструментов нажимаем вкладку Search (цифра 3 на скриншоте №3 | Горячие кнопки вызова - Ctrl+F) И вставляем выделенное нами содержимое с атрибута onclick:
    Код
    _tag_image
    в строку поиска выделенную красной рамкой
  • В рабочей "среде" мы видим изначальный код, который мы усовершенствуем:
    Код
    function _tag_image(wh){
    var FoundErrors = '';
    var enterURL = prompt('Image URL', "http://");
    if (!enterURL || enterURL=='http://') {return;}
    doInsert('<img border="0" align="absmiddle" src="'+enterURL+'">',"",false,wh);
    }

    Там же можно глянуть примеры событий других кнопок;

3) Улучшаем полученный код

  • Первое что я сделаю, это добавлю комментарии к коду, чтобы было понятнее
    Код
    function _tag_image(wh){ //Событие _tag_image описанное в onclick элемента
    var FoundErrors = ''; //Ненужная переменная - следствие далее
    var enterURL = prompt('Image URL', "http://"); //var Название_переменной = prompt('Название окна', "шаблон значения")  
    if (!enterURL || enterURL=='http://') {return;} //Событие указывающее о закрытии при пустом либо "шаблонном значении" поля
    doInsert('<img border="0" align="absmiddle" src="'+enterURL+'">',"",false,wh);//HTML код который мы видим в итоге + переменные
    } //Конец кода

  • Удалим лишнее из кода чтобы не повторялось, это будет вторая и четвертая строчки кода, получим итог:
    Код
    function _tag_image(wh){ //Событие _tag_image описанное в onclick элемента
    var enterURL = prompt('Image URL', "http://"); //var Название_переменной = prompt('Название окна', "шаблон значения")  
    doInsert('<img border="0" align="absmiddle" src="'+enterURL+'">',"",false,wh);//HTML код который мы видим в итоге + переменные
    } //Конец кода

  • Изменим переменную и добавим нужные:
    Код
    function _tag_image(wh){ //Событие _tag_image описанное в onclick элемента
    var enterURL = prompt('URL Оригинала изображения', "http://"); //var Название_переменной = prompt('Название окна', "шаблон значения")  
    var enterALT = prompt('ALT Картинки', "Изображение № "); //Новая переменная. Будет находится в теге img - alt=""
    var enterTITLE = prompt('TITLE Картинки', "Увеличить изображение"); //Новая переменная. Будет находится в теге a - title=""
    var enterNUM = prompt('Номер скриншота', "№ "); //Новая переменная. Подпись
    doInsert('<img border="0" align="absmiddle" src="'+enterURL+'">',"",false,wh); //HTML код который мы видим в итоге + переменные
    } //Конец кода

    Мы изменили 1 переменную и добавили 3 новых - title\alt\подпись, более того они работают, и появляются в алерт сообщениях, но не выводятся в конечном результате в наше поле.
  • Пишем конечный код
    Код
    function _tag_image(wh){
    var enterURL = prompt('URL Оригинала изображения', "http://");
    var enterALT = prompt('ALT Картинки', "Изображение № ");
    var enterTITLE = prompt('TITLE Картинки', "Увеличить изображение");
    var enterSIG = prompt('Номер скриншота', "№ ");
    doInsert('<a class="ulightbox" data-fancybox-group="1" title="'+enterTITLE+'" href="'+enterURL+'"><img src="'+enterURL+'" alt="'+enterALT+'" class="class-img" ></a><p class="signature">'+enterSIG+'<p>',"",false,wh);
    }
    К классам signature и class-img можно будет добавить стилизацию, или ввести свои, предусмотренные дизайном, селекторы
  • Добавляем код ниже на сайт, перед закрывающим тегом </body>:
    Код
    <script>function _tag_image(wh){
    var enterURL = prompt('URL Оригинала изображения', "http://");
    var enterALT = prompt('ALT Картинки', "Изображение № ");
    var enterTITLE = prompt('TITLE Картинки', "Увеличить изображение");
    var enterSIG = prompt('Номер скриншота', "Скриншот № ");
    doInsert('<a class="ulightbox" data-fancybox-group="1" title="'+enterTITLE+'" href="'+enterURL+'"><img src="'+enterURL+'" alt="'+enterALT+'" class="class-img" ></a><p class="signature">'+enterSIG+'<p>',"",false,wh);
    }</script>

  • В конце получаем код который добавляется в поле где применяется тег
    Код
    <a class="ulightbox" data-fancybox-group="1" title="Увеличить изображение" href="http://"><img src="http://" alt="Изображение № 1" class="class-img"></a><p class="signature">Скриншот № 1<p>

Комментарии
avatar