jQuery plugin set image src relative to the plugins location
up vote
0
down vote
favorite
I'm having some trouble creating a jQuery plugin that uses an image from the plugin itself.
Let's say I have the following structure
- foobar
- assets
- images
- fooBar.png
- images
- js
- foo_bar.js
- assets
And I created a plugin like this.
(function ($) {
$.fn.fooBar = function () {
let image_foo = '<img id="leFoo" style="display: none" src="../assets/images/fooBar.png"/>';
$('body').append(image_foo);
}
});
The plugin is being added to the site correctly and I can call the function like this: jQuery('body').fooBar();. The issue is that it is trying to fetch the image from the current path. So if I was on https://example.com/some/long/path/here.html
It would then try to fetch the image like so https://example.com/some/long/path/assets/images/fooBar.png
While the actual location could be different depending on where the library is being placed. Is there a way to dynamically fetch the path from the library location?
jquery jquery-plugins
asked Nov 9 at 13:25
Bram
1,13652339
add a comment |
up vote
0
down vote
favorite
I'm having some trouble creating a jQuery plugin that uses an image from the plugin itself.
Let's say I have the following structure
- foobar
- assets
- images
- fooBar.png
- images
- js
- foo_bar.js
- assets
And I created a plugin like this.
(function ($) {
$.fn.fooBar = function () {
let image_foo = '<img id="leFoo" style="display: none" src="../assets/images/fooBar.png"/>';
$('body').append(image_foo);
}
});
The plugin is being added to the site correctly and I can call the function like this: jQuery('body').fooBar();. The issue is that it is trying to fetch the image from the current path. So if I was on https://example.com/some/long/path/here.html
It would then try to fetch the image like so https://example.com/some/long/path/assets/images/fooBar.png
While the actual location could be different depending on where the library is being placed. Is there a way to dynamically fetch the path from the library location?
jquery jquery-plugins
asked Nov 9 at 13:25
Bram
1,13652339
Is there only one assets/images directory regardless of page location? Try removing the leading dots to make it absolute path ..src="/assets/images..."
– charlietfl
Nov 9 at 13:28
In the plugin folder "foobar" yes. I can imagine that some sites have multiple directories. To your edit,src="/assets/images...won't be possible since the plugin could be placed in someones site in a different location. E.g.mycool_site/plugins/jquery/foobar
– Bram
Nov 9 at 13:30
1
OK I think I get it, is relative to where plugin is. Might need to set an option for path to images in plugin
– charlietfl
Nov 9 at 13:32
Like this then perhaps?jQuery('body').fooBar('/plugins/jquery')where the plugin itself would then use'/' + location + '/assets/images/fooBar.png'? (location obviously being taken from the options being passed to the function).
– Bram
Nov 9 at 13:35
1
Something like that. Is more common for jQuery plugins to pass in an object....jQuery('body').fooBar({imageRoot:'/plugins/jquery/'}). Then that object can have numerous options user can override if needed
– charlietfl
Nov 9 at 13:37
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm having some trouble creating a jQuery plugin that uses an image from the plugin itself.
Let's say I have the following structure
- foobar
- assets
- images
- fooBar.png
- images
- js
- foo_bar.js
- assets
And I created a plugin like this.
(function ($) {
$.fn.fooBar = function () {
let image_foo = '<img id="leFoo" style="display: none" src="../assets/images/fooBar.png"/>';
$('body').append(image_foo);
}
});
The plugin is being added to the site correctly and I can call the function like this: jQuery('body').fooBar();. The issue is that it is trying to fetch the image from the current path. So if I was on https://example.com/some/long/path/here.html
It would then try to fetch the image like so https://example.com/some/long/path/assets/images/fooBar.png
While the actual location could be different depending on where the library is being placed. Is there a way to dynamically fetch the path from the library location?
jquery jquery-plugins
asked Nov 9 at 13:25
Bram
1,13652339
I'm having some trouble creating a jQuery plugin that uses an image from the plugin itself.
Let's say I have the following structure
- foobar
- assets
- images
- fooBar.png
- images
- js
- foo_bar.js
- assets
And I created a plugin like this.
(function ($) {
$.fn.fooBar = function () {
let image_foo = '<img id="leFoo" style="display: none" src="../assets/images/fooBar.png"/>';
$('body').append(image_foo);
}
});
The plugin is being added to the site correctly and I can call the function like this: jQuery('body').fooBar();. The issue is that it is trying to fetch the image from the current path. So if I was on https://example.com/some/long/path/here.html
It would then try to fetch the image like so https://example.com/some/long/path/assets/images/fooBar.png
While the actual location could be different depending on where the library is being placed. Is there a way to dynamically fetch the path from the library location?
jquery jquery-plugins
jquery jquery-plugins
asked Nov 9 at 13:25
Bram
1,13652339
asked Nov 9 at 13:25
Bram
1,13652339
edited Nov 9 at 13:33
asked Nov 9 at 13:25
Bram
1,13652339
asked Nov 9 at 13:25
Bram
1,13652339
asked Nov 9 at 13:25
Bram
1,13652339
1,13652339
Is there only one assets/images directory regardless of page location? Try removing the leading dots to make it absolute path ..src="/assets/images..."
– charlietfl
Nov 9 at 13:28
In the plugin folder "foobar" yes. I can imagine that some sites have multiple directories. To your edit,src="/assets/images...won't be possible since the plugin could be placed in someones site in a different location. E.g.mycool_site/plugins/jquery/foobar
– Bram
Nov 9 at 13:30
1
OK I think I get it, is relative to where plugin is. Might need to set an option for path to images in plugin
– charlietfl
Nov 9 at 13:32
Like this then perhaps?jQuery('body').fooBar('/plugins/jquery')where the plugin itself would then use'/' + location + '/assets/images/fooBar.png'? (location obviously being taken from the options being passed to the function).
– Bram
Nov 9 at 13:35
1
Something like that. Is more common for jQuery plugins to pass in an object....jQuery('body').fooBar({imageRoot:'/plugins/jquery/'}). Then that object can have numerous options user can override if needed
– charlietfl
Nov 9 at 13:37
add a comment |
Is there only one assets/images directory regardless of page location? Try removing the leading dots to make it absolute path ..src="/assets/images..."
– charlietfl
Nov 9 at 13:28
In the plugin folder "foobar" yes. I can imagine that some sites have multiple directories. To your edit,src="/assets/images...won't be possible since the plugin could be placed in someones site in a different location. E.g.mycool_site/plugins/jquery/foobar
– Bram
Nov 9 at 13:30
1
OK I think I get it, is relative to where plugin is. Might need to set an option for path to images in plugin
– charlietfl
Nov 9 at 13:32
Like this then perhaps?jQuery('body').fooBar('/plugins/jquery')where the plugin itself would then use'/' + location + '/assets/images/fooBar.png'? (location obviously being taken from the options being passed to the function).
– Bram
Nov 9 at 13:35
1
Something like that. Is more common for jQuery plugins to pass in an object....jQuery('body').fooBar({imageRoot:'/plugins/jquery/'}). Then that object can have numerous options user can override if needed
– charlietfl
Nov 9 at 13:37
Is there only one assets/images directory regardless of page location? Try removing the leading dots to make it absolute path ..
src="/assets/images..."– charlietfl
Nov 9 at 13:28
Is there only one assets/images directory regardless of page location? Try removing the leading dots to make it absolute path ..
src="/assets/images..."– charlietfl
Nov 9 at 13:28
In the plugin folder "foobar" yes. I can imagine that some sites have multiple directories. To your edit,
src="/assets/images... won't be possible since the plugin could be placed in someones site in a different location. E.g. mycool_site/plugins/jquery/foobar– Bram
Nov 9 at 13:30
In the plugin folder "foobar" yes. I can imagine that some sites have multiple directories. To your edit,
src="/assets/images... won't be possible since the plugin could be placed in someones site in a different location. E.g. mycool_site/plugins/jquery/foobar– Bram
Nov 9 at 13:30
1
1
OK I think I get it, is relative to where plugin is. Might need to set an option for path to images in plugin
– charlietfl
Nov 9 at 13:32
OK I think I get it, is relative to where plugin is. Might need to set an option for path to images in plugin
– charlietfl
Nov 9 at 13:32
Like this then perhaps?
jQuery('body').fooBar('/plugins/jquery') where the plugin itself would then use '/' + location + '/assets/images/fooBar.png' ? (location obviously being taken from the options being passed to the function).– Bram
Nov 9 at 13:35
Like this then perhaps?
jQuery('body').fooBar('/plugins/jquery') where the plugin itself would then use '/' + location + '/assets/images/fooBar.png' ? (location obviously being taken from the options being passed to the function).– Bram
Nov 9 at 13:35
1
1
Something like that. Is more common for jQuery plugins to pass in an object....
jQuery('body').fooBar({imageRoot:'/plugins/jquery/'}). Then that object can have numerous options user can override if needed– charlietfl
Nov 9 at 13:37
Something like that. Is more common for jQuery plugins to pass in an object....
jQuery('body').fooBar({imageRoot:'/plugins/jquery/'}). Then that object can have numerous options user can override if needed– charlietfl
Nov 9 at 13:37
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53226567%2fjquery-plugin-set-image-src-relative-to-the-plugins-location%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Is there only one assets/images directory regardless of page location? Try removing the leading dots to make it absolute path ..
src="/assets/images..."– charlietfl
Nov 9 at 13:28
In the plugin folder "foobar" yes. I can imagine that some sites have multiple directories. To your edit,
src="/assets/images...won't be possible since the plugin could be placed in someones site in a different location. E.g.mycool_site/plugins/jquery/foobar– Bram
Nov 9 at 13:30
1
OK I think I get it, is relative to where plugin is. Might need to set an option for path to images in plugin
– charlietfl
Nov 9 at 13:32
Like this then perhaps?
jQuery('body').fooBar('/plugins/jquery')where the plugin itself would then use'/' + location + '/assets/images/fooBar.png'? (location obviously being taken from the options being passed to the function).– Bram
Nov 9 at 13:35
1
Something like that. Is more common for jQuery plugins to pass in an object....
jQuery('body').fooBar({imageRoot:'/plugins/jquery/'}). Then that object can have numerous options user can override if needed– charlietfl
Nov 9 at 13:37