2013-08-16 3 views
0

На моем сайте Wordpress я использую код JavaScript для интерактивной части.Wordpress Javascript File SRC File Path

Когда файл является локальным, я просто звоню anyPlus.src = "solarZoom.png";.

Я пробовал много способов и не могу понять, как получить изображение из пути к файлу, когда он находится на моем сервере. Я попробовал /powerbox/Tour/solarZoom.png, ../Tour/solarZoom.png, Tour/solarZoom.png, /Tour/solarZoom.png, /solarZoom.png.

В моем стиле я бы назвал его «../Tour/solarZoom.png», но он не работает в javascript.

Я прикрепил изображение своей иерархии. Мой корень - /powerbox/index.php.

enter image description here

+0

/powerbox/Tour/solarZoom.png не работает? –

+0

nope. Я попробовал /powerbox/Tour/solarZoom.png, ../Tour/solarZoom.png, Tour/solarZoom.png, /Tour/solarZoom.png, /solarZoom.png – BDGapps

+0

Интересно. Попробуйте возиться с '$ _SERVER ['DOCUMENT_ROOT']."/Path ";' и другими параметрами и посмотреть, что это дает –

ответ

2

Со всеми информаций я мог собрать о ваша проблема, я могу только решить этим:

Возьмите index.php - файл на тот же уровень, где ваш javascript.js - находится файл, добавьте

-

в ваш <head> - тег. Теперь у вас есть префикс шаблона-URL-адреса в переменной ABSPATH. Изменение функции hotSpotFunc(part) находится здесь: http://frankfusion.com/powerbox/wp-content/themes/powerbox/Tour/javascript.js на линии 24:

anyPlus.src="http://frankfusion.com/powerbox/wp-content/themes/powerbox/"+imgName; 

должны быть в настоящее время

anyPlus.src=ABSPATH+imgName; 

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

Стоит упомянуть некоторые другие вещи:

  1. every wordpress theme has a header.php - file, где этот материал должен идти. Прочитайте что-нибудь о разработке WP Theme: http://codex.wordpress.org/Theme_Development
  2. Do not use global variables or global function names как вы делаете прямо сейчас в своем javascript.
  3. Сделайте твердую структуру в своем wordpress - папке. Вам действительно нужна детская тема для этого проекта? Сейчас это выглядит немного беспорядочно.
  4. Текущее «решение» является грязным. Используйте совет от @brasofilo, поскольку он обнаружил чистое решение.
+0

Если бы это была детская тема, я думаю, что 'bloginfo ('template_url')' не будет работать, рекомендуемым способом является 'get_stylesheet_directory_uri()', поскольку он выглядит сначала в дочерней папке, а затем в родительском (и это эквивалентно 'bloginfo ('stylesheet_directory')'). Но выглядит как [это не ребенок] (http://frankfusion.com/powerbox/wp-content/themes/powerbox/style.css) ... Хотя ваши и ответы Сета похожи, этот * очень полный * , для этого +1 – brasofilo

2

Enqueue Ваш JavaScript, используя wp_enqueue_scripts и передать правильный URL через wp_localize_script.

Как так:

add_action('wp_enqueue_scripts', 'b5f_enqueue_scripts'); 

function b5f_enqueue_scripts() 
{ 
    wp_register_script(
     'tour-script', // Handle 
     get_stylesheet_directory_uri() . '/Tour/javascript.js', // File url 
     array('jquery') // Dependencies 
    ); 
    wp_enqueue_script('tour-script'); 
    wp_localize_script( 
     'tour-script', 
     'localize_vars', 
     array( 
      'url' => get_stylesheet_directory_uri(), 
      'path' => get_stylesheet_directory(), 
      'solar' => get_stylesheet_directory_uri() . '/Tour/solarZoom.png' 
     ) 
    ); 
} 

И в файле javascript.js:

jQuery(document).ready(function($) { 
    console.log(localize_vars.url); 
    $("body").prepend('<img src="'+ localize_vars.solar + '" />'); 
}); 

wp_localize_script был создан, чтобы передать переведенных строк в файлы JavaScript, но он может быть использован, чтобы передать что-нибудь на самом деле. Просто заполните этот массив другими данными и получите доступ к нему в переменной JS localize_vars.DATA.

+0

Итак, я делаю: anyPlus.src = localize_vars .url + '/Tour/solarZoom.png' – BDGapps

+0

, что не сработало :-( – BDGapps

+0

Как я могу проверить? У меня есть роль в этом, когда я нависаю над ним, изображение увеличивается, а затем изменяется на solarZoom.png. – BDGapps

1

Попробуйте это в своем заголовке определить это выше всех сценариев, которые будут ссылаться изображения ....

<script type="text/javascript"> 
    var ABSPATH = "<?php bloginfo('template_url'); ?>"; 
</script> 

Теперь при ссылке на изображение сделать anyPlus.src = ABSPATH + "/Tour/solarZoom.png";

+0

Я получаю ABSPATH не определен – BDGapps

+0

BDGapps

+0

Вы помещаете это выше всех тегов сценария? Это должен быть самый первый javascript, который загружается. Я просто копировал и вставлял его в текущий проект, и он отлично работал. – Seth