Можно ли для оперделенного класса избражений применять JS обработки?

Question

[Алексей]

Может не совсем ясно написал заголовок.
Итак установлен JS

<script type="text/javascript">
function l_image (a) {
    document.example_img.src=a
}
</script>

он ссылки вида

<a href="javascript:l_image ('http://site.ru/pic.jpg')">Текст</a>

выводит в месте, где стоит код

<img src="/wp-content/uploads/2017/11/Музей-иллюзий.jpg" name="example_img"
  alt="Картинки для демонстрации работы скрипта смены изображений" width="100%">

Стандартно же картинки выводятся
кодом

<img class="CLASS1" title="TITLE1" src="http://site.ru/pic.jpg" alt="ALT1" width="300" height="140" />

ВОПРОС
Можно ли как то сделать чтобы изображения с классом CLASS1 не выводились стандартно, а отрабатывались этим JS?

Answer 1

[Валерий]

Если подключен jquery, то вот так:

$('.class1').each(function () {
    $(this).after('<a href="javascript: l_image(\'' + $(this).attr('src') + '\'">Текст</a>').remove();
});

Comments

[Алексей]

а как проверить подключен он или нет? И куда это вставлять?

[Валерий]

Алексей selftrips.ru, поищите в коде страницы упоминание jquery.

Код вставьте после определения функции l_image, например.

[Алексей]

Валерий,

<script type='text/javascript' src='http://copy.selftrips.ru/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

оно?

[Алексей]

Валерий, не работает((

[Валерий]

Алексей selftrips.ru, попробуйте тогда так:

<script type="text/javascript">
function l_image (a) {
    document.example_img.src=a;
}

$(document).ready(function () {
    $('.class1').each(function () {
        $(this).after('<a href="javascript: l_image(\'' + $(this).attr('src') + '\'">Текст</a>').remove();
    });
});
</script>

[Алексей]

нет((

[Алексей]

Валерий, в песочнице вообще не работает(( https://jsfiddle.net/okn3p0co/1/

[Валерий]

Алексей selftrips.ru, https://codepen.io/anon/pen/rYorrK

[Алексей]

Почему на сайте не работает???? copy.selftrips.ru/uncategorized/1/548
код скопировал 1 в 1

[Алексей]

Валерий, причем часть кода работает (старая), а ваша нет((

[Алексей]

Валерий,

JQMIGRATE: Migrate is installed, version 1.4.1  jquery-migrate.min.js:2:542
TypeError: $ is not a function[Подробнее]  548:55:1
	<анонимная>

С этим как то связано?

[Валерий]

Алексей selftrips.ru, разумеется связано. У вас установлена какая-то кастомная версия jQuery, поэтому переменная $ не объявлена. Попробуйте вместо $ использовать jQuery:

jQuery(document).ready(function () {
    jQuery('.class1').each(function () {
        jQuery(this).after('<a href="javascript: l_image(\'' + jQuery(this).attr('src') + '\'">Текст</a>').remove();
    });
});

[Алексей]

картинка перестала вводиться вообще

SyntaxError: missing ) after argument list[Подробнее]

[Валерий]

Алексей selftrips.ru, эмм, возьмите код отсюда https://codepen.io/anon/pen/rYorrK, замените $ на jQuery

[Алексей]

404

[Алексей]

Заработало!!! Спасибо!!!

[Алексей]

Валерий, А можно изменить "мой" код или ваш так чтобы
Картинки превращались в сыллки, но все они одновременно одна поверх другой выводились в "месте вывода" (с их alt и title? т.е. разными для разных картинок ), по по клику на ссылке нужная подтягивалась наверх? или они все были невидимые, а по клику одна становилась видимая до клина на другой ссылке?

Т.е., как я понимаю, при найденном решении в коде картинки отсутствуют, и поисковики их не видят, считают что страница без картинок, а так они появятся в коде

[Валерий]

Алексей selftrips.ru, можно. Но на Тостере дают советы, решают проблемы, а не пишут код за вас :-) Попробуйте найти исполнителя на https://fl.ru.

[Алексей]

Валерий, так какие то роботы отвечают

[Алексей]

Валерий, а вы не можете взяться?

[Валерий]

Алексей selftrips.ru, нет, извините.

[Алексей]

Валерий, Ок, спасибо.
Это слишком просто или наоборот слишком сложно?