Иван Антонов

<a href="{$wa_app_url}">{$wa->shop->settings('name')}</a>  <span class="rarr">&rarr;</span>

Замените на свою ссылку. И это не JavaScript, а SMARTY - шаблонизатор для PHP.

Как меняете картинку, так и отзыв.
На картинку добавляете атрибут (например data-text-id) с id скрытого материала.
И когда нажимаете на картинку:

1. Меняете картинку в центре,
   
2. Скрываете все открытые отзывы,
   
3. Открываете отзыв с id в атрибуте data-text-id
   

Вот пример:

<div class="avatars">
     <img class="avatar avatar-big" id="mainAvatar" src="avatar1.jpg">
     <img class="avatar" src="avatar1.jpg" alt="Ирина Петровна" data-report-id="report1">
     <img class="avatar" src="avatar2.jpg" alt="Игорь Семенович" data-report-id="report2">
     <img class="avatar" src="avatar3.jpg" alt="Людмила Батьковна :)" data-report-id="report3">
</div>
<div class="reports">
    <div class="report" id="report1">Классно работают ребята</div>
    <div class="report" id="report2">Заказал. Привезли. Круто!</div>
    <div class="report" id="report3">Куда я попала?! О_О</div>
</div>

Грубо говоря, вот так:

$(function() {
    $('[data-report-id]').click(function() {
        $('#mainAvatar').attr('src', $(this).attr('src'));
        $('.report').hide();
        $('#' + $(this).attr('data-report-id')).show();
    });
});

Спасибо Doc за примеры. Но вроде ни одна версия IE не поддерживает FileReader.
Поэтому Я делаю "по старинке" используя PHP, MySQL, AJAX. Выполняю загрузку в фоновом режиме и потом добавляю картинку в DOM. Если картинка в течении одного дня ни к чему не прикрепляется удаляю её автоматически CRON задачей.

Прошу помощи, мне надо выгрузить картинку под ней сделать поле input для обновления картинки и при выборе другой картинки ее показать, и так выводить все картинки

Подумайте как можно сделать это проще.
К примеру:
У вас есть форма редактирования, в неё Вы выгружаете все фотографии. После каждой фотографии добавляете скрытый input с её id, также рядом делаете элемент для удаления фотографии из DOM вместе со соответствующим скрытым полем. Добавьте пустой input[type=file] для загрузки новых картинок.
На сервере, когда форма отправится, вы сравниваете idы из базы и полученные из формы, если каких-то нет в форме, то удаляете фотографии с соответствующими id и с сервера.
А input[type=file] вы можете настроить так чтобы он автоматически загружал ваши фотографии после выбора и размещал их в форме.

А вообще не бойтесь экспериментировать с формой, возвращаемые данные могут быть массивом.
Если вы после каждой картинки добавите

<input type="file" name="form_name[image][id_картинки]">

вы сможете выстроить именно такую логику, какую Вы описали в вопросе.

var ar1 = ['white', 'red', 'black', 'orange'];
var ar2 = ['white', 'black'];
var res = [];
var res2 = [];

for (var i = 0; i < ar1.length; i++) {
    if ( ar2.indexOf(ar1[i]) !== -1 ) {
        res[res.length] = ar1[i];
    }
}

// или

for (var i = 0; i < ar1.length; i++) {
    for (var j = 0; j < ar2.length; j++) {
        if (ar1[i] == ar2[j]) {
            res2[res2.length] = ar1[i];
        }
    }
}

alert(res);
alert(res2);

"This ~FF0000~string ~FFFF00~should ~00FF00~ be colored".replace(/~([A-F0-9]{3,6})~([^~]+)/g, '<span style="color: #$1;">$2</span>');

https://jsfiddle.net/esqt3aat/

Пересмотреть архитектуру. Перенесите анимацию на JavaScript, так как CSS недостаточно гибок в этом плане.
или вариант назначить удаление класса по таймауту, назначив время выполнения - время действия анимации.
Например https://jsfiddle.net/4eh8qaaa/

Для начала осознайте разницу между Javascript и PHP, а потом приступайте к изучению.
Вот интересный ресурс по JavaScript.
По PHP тоже много ресурсов, Google вам в помощь.

Главное запомните:

Есть два компьютера:
Сервер - на котором хранится сайт и все его данные,
Клиент - компьютер посетителя.
PHP работает с компьютером-сервером, JavaScript с компьютером посетителя.

а именно:
PHP - работает с данными на сервере, генерирует ответ на запрос клиента;
JavaScript - работает с элементами на странице, добавляя анимацию и события (клик, скрол и т.д.) на разные элементы.

Нужно иметь две версии css и js: dev и prod. Во время разработки вы работаете только с dev версией, а prod у вас создается позже (перед запуском на продакшане выполняете минификацию и комбинирование).
Чтобы реализовать это автоматически вам нужен frontend сборщик такой как Grunt.JS или Gulp.JS, которые работают на node.js.
Главное преимущество вы получите возможность использовать css, js-препроцессоры и собирать минимизированный единственные файлы для сайта со стилями и JS.

Также попробуйте избавиться от не нужных библиотек в JS. Чаще всего они имеют излишний функционал и занимают много места. Возможно у вас получится отказаться от JQuery или хотя бы подключить slim версию.

Я обычно как-то так делаю.

$.ajax({
  url: "my_file.php",
  success: function (response) {
    $('#page_content').html( $(response).filter('#my_container').html() );
  }
});

Устал искать стабильное решение. Исключил из div'а атрибуты data-uk-button-checkbox, data-uk-button-radio и организовал их логику в JS. По щелчку добавляю или удаляю класс uk-active и всё работает как часы.

просто вы не пользовались логикой при составлении цикла :)

Используй JS.

Пример с Тостера

Ширина определилась на основе внутреннего содержимого (текста).
Следовательно нужных величин можно добиться настройкой шрифта.

<input type="text" onkeydown="return specialText(this, event)">

function specialText(element, event)
{
    if (
      event.keyCode == 69 || 
      event.keyCode == 189 || 
      element.value.length >= 100
    ) {
    	return false;
    }
}

или

<input type="text" maxlength="100" onkeydown="if (event.keyCode == 69 || event.keyCode == 189) return false">

https://jsfiddle.net/0yyq8us7/1/
Вот так, работает.

Задаешь id стилю, который будет меняться:

<link rel="stylesheet" href="general.css" id="style">

Для смены выполняешь JavaScript:

document.getElementById('style').setAttribute('href', 'red.css');

Я короче уже сам сделал что мне нужно
https://jsfiddle.net/3g2ubxep/

Масштабирование и перемещение, сделал так чтобы работало только с зажатой кнопкой Alt.

jQuery(document).ready(); - это привязка события готовности документа.
Когда документ полностью загрузится это событие вызовет функцию написанную в .ready( ... )
В данном примере он плавно прокрутит страницу к тому якорю который указан в шехе:
example.com/posts#post1 - хешем в ссылке является #post1
При переходе по ней и полной загрузки документа, страница покрутится к элементу с id="post1".
Если этот код убрать - страница по прежнему будет прокручивать, но уже не плавно, а резко к указанному якорю, тоже по завершению загрузки страницы.

Что касается кода внизу.
Этот код не дожидается полной загрузки страницы и выполняется сразу как браузер его прочитает.
В данном случае скрипт привязывает событие клика на иконку меню, при клике он плавно откроет или закроет меню.

jsfiddle.net/u6wyycqg

$('.month_block').hover(function() {
    var idboard = $(this).attr('data-idboard');
    $('.main_calendar[data-idboard="' + idboard +'"]').slideToggle(200);
});

возможно первый родитель .add_new_input не .row_list. Тогда это решаемо так:
$(this).parents('.row_list')

PS: В приведенном коде недостает });

Вот так вот:

function send(el) {
    var url = el.getAttribute('href');
    var msg = prompt('Сообщение');
    
   var form = document.createElement("form");
    form.setAttribute("method", 'post');
    form.setAttribute("action", url);

    var input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", 'msg');
    input.setAttribute("value", msg);

    form.appendChild(input);
    form.submit();
}