Скрипт увеличения и уменьшения изображений на WordPress

Есть вот такой скрипт, прекрасно работающий с изображениями на странице. Как его вставить в functions.php, чтоб работал на все изображения сайта?

<p><img src="images/karta1.jpg" width="200" style="cursor: zoom-in;" onclick="example(this)"></p>

<script>
var t, a;
function example(e){
clearTimeout(t);
var w = e.width;
if (a) {
t = setInterval(function () {
if (w <= 200) clearTimeout(t);
e.style.cursor = ‘zoom-in’;
e.style.borderRadius = ‘1px’;
e.style.boxShadow = ‘2px 2px 5px #fff’
e.width = w–;
}, 5);
}
else {
t = setInterval(function () {
if (w >= 450) clearTimeout(t);
e.style.cursor = ‘zoom-out’;
e.style.borderRadius = ‘5px’;
e.style.boxShadow = ‘2px 2px 5px #888’
e.width = w++;
}, 5);
}
a = !a;
}
</script>

Это у вас не функция, а скрипт! Соответственно вам нужно вынести в отдельный файл (например: zoom.js) этот код:


var t, a;
function example(e){
   clearTimeout(t);   
   var w = e.width;
     if (a) {
        t = setInterval(function () {
         if (w <= 200) clearTimeout(t);
         e.style.cursor = 'zoom-in';
          e.style.borderRadius = '1px';
         e.style.boxShadow = '2px 2px 5px #fff'         
          e.width = w--;
            }, 5);
}
     else {
        t = setInterval(function () {
         if (w >= 450) clearTimeout(t);
          e.style.cursor = 'zoom-out';
          e.style.borderRadius = '5px';
         e.style.boxShadow = '2px 2px 5px #888'
          e.width = w++;
          }, 5);
}
  a = !a;
}

И потом в файле functions.php нужно подключить этот скрипт вот так:


function reg_my_scripts() {
    wp_register_script( 'zoom', get_template_directory_uri() .'/scripts/zoom.js', array(), '', 'true');
    wp_enqueue_script( 'zoom' );
}    

add_action( 'wp_enqueue_scripts', 'reg_my_scripts', 5 );

Ну и для каждого изображения. которое нужно увеличить, нужно будет добавить вот это: onclick="example(this)"

Anonymous
Отправить
Ответ на: